How to Determine Screen Height and Width in Flutter?

Sometimes, you may need to know the size and position of a widget rendered on the screen programmatically. For example, you will need to control a child’s widget based on the parent’s size and location. So, we’ll see how to determine screen height and width in the Flutter app.

In this article, Flutter Agency will teach you how to access the device screen width and height in the Flutter app in the simplest possible method.

You want to have distinct UI layouts for different screen sizes if you’re building an app for both phones and tablets. If the customer prefers a much larger text size or wants to minimize animations, you can find yourself in a similar scenario.

You can use MediaQuery to measure the size of the device you’re using and adjust your layout accordingly.

MediaQuery gives you a more complete picture of your device screen size and might provide you more information about user layout preferences.

You may get the width or height of the screen by using MediaQuery with the current context of your widget. MediaQuery returns a high-level view of the current app’s screen size, as well as more comprehensive information about the device and its layout preferences. It’s as simple as invoking MediaQuery.of in the build method to get to it.

double width = MediaQuery.of(context).size.width;

double height = MediaQuery.of(context).size.height;

You need a MaterialApp or a WidgetsApp around your widget. They provide MediaQuery. When you call .of(context) flutter will always look up the widget tree to find the widget.

If you don’t do this, you may get “No MediaQuery widget found” error. See more details at: ’No MediaQuery widget found’ Error in Flutter.

Wrap your Widget at the root with the MaterialApp() widget, as shown below:

Widget build(BuildContext context) {    

return MaterialApp(       

home: Home()    

 );

}

Apply the percentage of Screen height and width to the size of child widgets.

Container(

         height: (MediaQuery.of(context).size.height / 2),

         width: (MediaQuery.of(context).size.width / 2),

         color: Colors.green,

     child:const Center(child: Text("Media Query Container")),

),

Let’s have an Example to Determine the Screen size using the MediaQuery class.

class Home extends StatefulWidget {

  const Home({Key? key}) : super(key: key);

  @override

  _HomeState createState() => _HomeState();

}

class _HomeState extends State {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text("Media Query"),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Container(

              height: (MediaQuery.of(context).size.height / 2),

              width: (MediaQuery.of(context).size.width / 2),

              color: Colors.green,

              child: const Center(child: Text("Media Query Container")),

            )

          ],

        ),

      ),

    );

  }

}

Output:

Conclusion:

So in this article, we will go through how to determine screen height and width in a Flutter app. This article will help you to make your flutter app responsive. We hope you enjoyed this article.

This Article Originally published at: https://flutteragency.com/determine-screen-height-width-flutter/