"MediaQuery.of(context).size" VS "LayouBuilder( BoxConstraints constraints)"

user_17100762 0
Viewed 85

I am a new Flutter learner. I am trying to write both mobile and web application using the same code base. I am wondering to know where should I use MediaQuery.of(context).size and where LayouBuilder( BoxConstraints constraints)?

Also like to know is it efficient to only one of them all through a big application or they are kind of complementary to each other?

EDIT: I like also know more about the behavior of these methods while

  • User zoom-in/zoom-out the screen

  • User changes the orientation of the screen on the mobile app, or the web browser size on the desktop computer

Which method is more suitable for these 2 situations?

flutter-layoutbuilder mpmediaquery responsive-design flutter
1 Answers

LayouBuilder provide constrains based on its parent widget. You can wrap LayouBuilder with a SizedBox, then check the constraints of it.

But for the MediaQuery.of(context).size it will provide the screen size, doesnt matter it is wraped with a SizedBox or not.

  • To get screen size inside widget tree, you can use MediaQuery.of(context).size,The size of the media in logical pixels (e.g, the size of the screen).
  • To get parent widget size, and layout inner children based on parent, use LayouBuilder
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Container(
                width: constraints.maxWidth,
                height: constraints.maxHeight,
                color: Colors.red.withOpacity(.3),
                alignment: Alignment.center,
                child: Text("Using layout Builder"),
              );
            },
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.green.withOpacity(.3),
          alignment: Alignment.center,
          child: Text("Using MediaQuery"),
        )
      ],
    ));
  }
}

enter image description here

For size, you can use Layoutbuilder while the competent will be based on parent widget and it doesn't call the query. Somecases like on showDialog you need mediaQuery to get size. Use Layoutbuilder whenever possible.

More about LayoutBuilder and MediaQueryData/size

user_101571270
Related