How to find the widget size to avoid rendering when widget render outside the device area-CodePudding

Here I have a center Offset value that is where I need to position the widget, I have positioned the widget with the help of Positioned widget and moved the widget to the center with the help of FractionalTranslation widget, and moved it to the center offset.

But here some part widgets get rendered outside the canvas, so I want to ignore the rendering of the widget which is rendered outside the screen. If I get the size of the widget, I can be able to ignore the render, but I am struggling with getting widget height and width.

I have attached the code snippet below for reference.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Positioned(
          left: 20,
          top: 150,
            child: FractionalTranslation(translation: const Offset(-0.5, -0.5),child: Container(
          color: Colors.grey,
          child: const Text('Widget size'),
        )))
      ]),
    );
  }
}

Thanks.

CodePudding user response：

Check this solution, a bit complicated but worth a try:

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double height = 0.0;
  double width = 0.0;
  final GlobalKey _globalKey = GlobalKey();

  @override
  void initState() {
    SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
      height = _globalKey.currentContext!.size!.height;
      width = _globalKey.currentContext!.size!.width;
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Positioned(
            left: 20,
            top: 150,
            key: _globalKey,
            child: FractionalTranslation(
                translation: const Offset(-0.5, -0.5),
                child: Container(
                  color: Colors.grey,
                  child: Text("      $height $width"),//added spaces so you can see it
                )))
      ]),
    );
  }
}

CodePudding user response：

To get the screen width and height:

Screen width  : MediaQuery.of(context).size.width
Screen height : MediaQuery.of(context).size.height

To center the widget to the screen it is easy as below code.Center Widget do the trick

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: keyRed,
      appBar: AppBar(),
      body: Center(
        child: Container(
          color: Colors.grey,
          child: const Text('Widget size'),
        ),
      ),
    );
  }