How to Get the Screen Size in Flutter

To make your application more responsive across all devices, it is essential to dynamically get the screen size in Flutter. Fortunately, Flutter provides straightforward methods to get the screen’s width and height.

Get the Screen Size

In Flutter, it is possible to get the screen size by logical or physical pixels.

• Logical Pixels: In UI frameworks like Flutter, logical pixels ensure that elements on the screen appear the same size on any device. They are adjusted automatically to keep everything looking consistent across different screens.
• Physical Pixels: These are the actual number of pixels on the screen.

Logical Pixels

To get the Logical Pixels we can use the MediaQuery class. To access a 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.

final Size size = MediaQuery.of(context).size;

However, there is a more effective approach, which is to use the sizeOf function. The sizeOf function only triggers a rebuild when the size attribute of the MediaQuery changes. If you use the of function, it will rebuild every time any of the MediaQuery attributes change.

final Size size = MediaQuery.sizeOf(context);

Now that we know how to retrieve the screen size, let us put it to use. In the main.dart file below, we will use the MediaQuery class to get the width and height of the screen and display them.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.sizeOf(context);
    final double width = size.width;
    final double height = size.height;

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Screen Width: $width\nScreen Height: $height',
            style: const TextStyle(fontSize: 20, height: 2.5),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

In this code snippet, we use the context of our MyApp widget to retrieve an instance of the nearest MediaQuery. From the MediaQuery instance, we access the size attribute and store it in a variable called size. Using this variable, we extract the width and height values. These values are then displayed in a Text widget, resulting in the following output.

Physical Pixels

To get the physical pixels we use the View class. The View class also has an of function. On the View instance we can access the physicalSize attribute to get the physical pixels.

final Size size = MediaQuery.of(context).size;

We can adjust the previous example to now showcase the physical pixels.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final Size size = View.of(context).physicalSize;
    final double width = size.width;
    final double height = size.height;

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Screen Width: $width\nScreen Height: $height',
            style: const TextStyle(fontSize: 20, height: 2.5),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

In the above code snippet, we replaced MediaQuery.sizeOf(context).size with View.of(context).physicalSize;. If we restart the application you will see that width and height have increased, because we are now showing the physical pixels.

Logical Pixels Versus Physical Pixels

In this post, we discussed both logical and physical pixels. As mentioned before logical pixels are used to ensure that your widgets are displayed similarly across different screens. So whenever you are working on your user interface ensure that you use logical pixels. Physical pixels can be useful for tasks like calculating aspect ratios to correctly display videos in your application.

Get the Height and Padding of the Appbar

Most applications display an AppBar widget at the top, which takes up space from the available screen height. To determine the remaining height, you need to subtract the height and padding of the AppBar widget from the total screen height. For detailed instructions on how to retrieve the height and padding of the AppBar widget, please refer to the following article: How to Get the Height and Padding of the AppBar in Flutter.

Conclusion

In this post, we used Flutter’s MediaQuery class to dynamically get the screen size. The MediaQuery class is easy to use as long as we have access to the context. With the MediaQuery class you will retrieve the logical pixels, if you want to get the physical pixels you can always use the View class.