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

Question

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.

Answer 1

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
                )))
      ]),
    );
  }
}

Answer 2

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'),
        ),
      ),
    );
  }

Answer 3

I already have at least one problem with the way you centre a container. However, I have tried to get a handle on the size option of a widget. There are 02 approaches to this with Flutter.

1. Use MediaQuery for a given context

• final double ScreenWidth : MediaQuery.of(context).size.width
• final double ScreenHeight : MediaQuery.of(context).size.height

2. Use constraints parameter in a LayoutWidget. Here is the sample with the LayoutWidget. I hope these two approaches will help you.

    Scaffold(
      appBar: AppBar(),
      body: Stack(children: [
        Positioned(
            left: 20,
            top: 150,
            child: FractionalTranslation(
              translation: const Offset(-0.5, -0.5),
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  if (constraints.maxWidth < 600) {
                    return Container(
                      color: Colors.teal,
                      width: 150,
                      height: 150,
                      child: const Text('Widget size'),
                    );
                  } else {
                    return Container(
                      color: Colors.grey,
                      width: 350,
                      height: 350,
                      child: const Text('Widget size'),
                    );
                  }
                },
              ),
            ))
      ]),
    );