How to get the screen height and width dynamically in Flutter

Getting the screen size in Flutter can be very helpful when you want to adjust your widget dynamically to the screen size of the user's device. Fortunately, Flutter provides a straightforward way to get the width and height of the screen.

MediaQuery

The MediaQuery class in Flutter provides access to information about the current device's screen. It lets you obtain information such as screen size and device orientation.

To access the MediaQuery instance, you typically use the of function provided by the MediaQuery class. This method takes a BuildContext as a parameter and returns the closest MediaQuery ancestor widget's data.

MediaQueryData mediaQuery = MediaQuery.of(context);

Retrieving screen size

The MediaQueryData object obtained from MediaQuery.of provides the screen size through the size property. It returns a Size object that contains the width and height of the screen in logical pixels.

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

Now that we know how to get the width and the height of the screen let us put it to use. In the following main.dart file we will retrieve the width and the height using the MediaQuery and display the values on the screen:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    final double width = size.width;
    final double height = size.height;

    return MaterialApp(
      title: 'Screen Size Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Size Demo'),
        ),
        body: Center(
          child: Text(
            'Screen Width: $width\nScreen Height: $height',
            style: TextStyle(fontSize: 20, height: 2.5),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

In this code snippet, we use the context of our MyApp widget to retrieve the nearest MediaQuery. From the MediaQuery we access the size and put it in a variable called size. Via this variable, we access the width and the height. These values are displayed in a Text widget, this will result in the following:

Instead of showing the values let us use the values to set the width of a Container widget:

body: Container(
  width: width,
  height: height * 0.5,
  color: Colors.green,
),

In this code snippet, we replaced the Text widget in the body property of the Scaffold widget with a Container widget. We set the width of the Container widget to our width variable and we set the height to 50% of the total height of the user's screen. This is done by multiplying the height by 0.5, this will result in the following:

Handling device orientation changes

Flutter also provides a convenient way to respond to changes in device orientation. The MediaQueryData object includes the orientation property, which represents the current orientation of the device. It can be either Orientation.portrait or Orientation.landscape.

Orientation orientation = MediaQuery.of(context).orientation;

Let us implement it into our code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MediaQueryData mediaQuery = MediaQuery.of(context);
    final Size size = mediaQuery.size;
    final double width = size.width;
    final double height = size.height;
    final Orientation orientation = mediaQuery.orientation;

    return MaterialApp(
      title: 'Screen Size Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Size Demo'),
        ),
        body: Container(
          width: orientation == Orientation.portrait ? width : width * 0.5,
          height: height * 0.5,
          color: Colors.green,
        ),
      ),
    );
  }
}

In the above code snippet, we added the orientation variable and we are retrieving the orientation from our MediaQuery. Now in our Container widget, we made a change to the width property to change the width based on the device's orientation. When the device orientation is in landscape mode we change the width of the container to half the width of the screen.

AppBar height and top padding

If we want to calculate the correct remaining height, we need to subtract the height of the AppBar widget and its top padding from the total screen height. I have written a separate post to go over the possible ways to do it:

How to get the height of the AppBar and its padding in Flutter

In this post, we will discuss how to find the height of the AppBar widget and its padding in Flutter. It is important to know these measurements to create designs that work well on different screens.

Code OnwardsTijn van den Eijnde

Conclusion

In this post, we used Flutter's MediaQuery class to get the height and width of the device dynamically. The MediaQuery class is easy to use as long as we have access to a context. The MediaQuery can also be used to get the orientation of the device. This allows you to adapt your user interface to dynamically change based on the orientation.