Web Analytics Made Easy -
StatCounter
Flutter Get Screen Height and Width

When developing an app using flutter can get the height and width of the screen to make our UI look responsive or for another purpose. In this article, we will use different ways to get screen height and width in a flutter app.

MediaQuery class

The MediaQuery class can be used to get the screen height and width.

Example using MediaQuery class

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

In the above code, the of method connected with the current context of the widget has the size property which can be used to get the screen height and width.

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

  @override
  Widget build(BuildContext context) {
    double heightOfScreen = MediaQuery.of(context).size.height;
    double widthOfScreen = MediaQuery.of(context).size.width;   
    print('$heightOfScreen $widthOfScreen'); 
    return SizedBox(
      height: heightOfScreen,
      width: widthOfScreen,
    );
  }
}

We can then assign the screen height and width to any widget which has height and width properties as shown in the above code.

LayoutBuilder class

LayoutBuilder class which is good to use when want to create a responsive user interface for different platforms such as Windows, Web, or Mobile. It can also be used to get the screen height and width.

Example using LayoutBuilder class

print('${constraints.maxHeight} ${constraints.maxWidth}');

In the above code, constraints that can be obtained using LayoutBuilder class can be used to get screen height and width.

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (ctx, constraints) {
        print('${constraints.maxHeight} ${constraints.maxWidth}');
        return SizedBox(
          height: constraints.maxHeight,
          width: constraints.maxWidth,
        );
      },
    );
  }
}

In the above example, we wrap our SizedBox widget with the LayoutBuilder widget which has builder property. The builder property accepts two arguments first has a type of BuildContext and second has a type of BoxConstraints which can be used to get the screen height and width as shown in the above code.

Conclusion

We can get screen height and width in flutter using LayoutBuilder and MediaQuery class.

Click to rate this post!
[Total: 3 Average: 5]
Avatar

By AmmarJaved

Ammar Javed possesses a unique combination of skills and expertise in web, desktop, and mobile app development, and content writing. Ammar Javed is a strategic thinker and has problem-solving abilities. Ammar Javed can work independently and in a team. Ammar Javed is dedicated to continuous learning and professional development.

One thought on “Flutter – Get Screen Height and Width”

Leave a Reply

Your email address will not be published. Required fields are marked *

Translate »