flutter divide horizontally

How to use Flutter screen width and height with MediaQuery

Basics /

Flutter MediaQuery.of

MediaQuery.of is a method in the Flutter framework that allows you to access information about the dimensions and layout of a device’s screen. You can use it to get the width and height of the screen, the pixel density, and the text scaling factor.

To use MediaQuery.of, you need to pass it a BuildContext object, which you can get from the context argument in the build method of a StatefulWidget or StatelessWidget.

Here’s an example of how you might use MediaQuery.of to get the screen width and use it to set the width of a Container widget:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Container(
      height: 50,
      width: screenWidth,
      color: Colors.white,
      child: Text('Width of the screen: $screenWidth'),
      // ...
    );
  }
}
flutter screen width

Get the width and height of the screen in Flutter

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

Container(
  height: screenHeight,
  width: screenWidth,
  color: Colors.white,
  // ...
),

This might give you an error because it doesn’t calculate the SafeArea and the AppBar. Below in the post I explained how to calculate the SafeArea and AppBar.

The context argument passed to the of method should be the BuildContext of a widget in the widget tree.

Note that the size property returns the size of the display screen in logical pixels, not physical pixels. The size is adjusted for the device pixel ratio, which is the ratio of the physical pixels on the screen to the logical pixels.

You can also use it like this.

Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  color: Colors.white,
  // ...
),
flutter screen width and height
Container(
  height: 50,
  width: screenWidth,
  color: Colors.white,
  child: Column(
    children: [
      Text('Width of the screen: $screenWidth'),
      Text('Height of the screen: $screenHeight'),
    ],
  ),
)

What is a safe area in Flutter?

In Flutter, the “safe area” refers to the area of the display screen that is not obscured by system UI elements (e.g., status bar, navigation bar, notch). The safe area helps ensure that important content on the screen is not obscured by these elements and is visible to the user.

The safe area is defined by the padding property of the MediaQueryData object, which you can get using the of method of the MediaQuery class. The padding property represents the padding around the display screen.

Here is an example of how you can get the safe area in Flutter:

EdgeInsets safeArea = MediaQuery.of(context).padding;

The context argument passed to the of method should be the BuildContext of a widget in the widget tree.

You can then access the properties of the safeArea object as follows:

double leftPadding = safeArea.left;
double topPadding = safeArea.top;
double rightPadding = safeArea.right;
double bottomPadding = safeArea.bottom;

The left, top, right, and bottom properties represent the padding on the left, top, right, and bottom sides of the display screen, respectively.

flutter screen paddings
Container(
  // height: 50,
  width: screenWidth,
  color: Colors.white,
  child: Column(
    children: [
      Text('Width of the screen: $screenWidth'),
      Text('Height of the screen: $screenHeight'),
      Text('Top Padding: $topPadding'),
      Text('Bottom Padding: $bottomPadding'),
      Text('Left Padding: $leftPadding'),
      Text('Right Padding: $rightPadding'),
    ],
  ),
)

Note that the values of the padding properties are returned in logical pixels, not physical pixels. The values are adjusted for the device pixel ratio, which is the ratio of the physical pixels on the screen to the logical pixels.

Screen height and safe area in Flutter

To get the height of the screen minus the safe area in Flutter, you can use the size property of the MediaQueryData object and subtract the height of the viewInsets from it. The viewInsets property represents the insets (e.g., status bar, keyboard) that reduce the available screen space.

Here are examples of how you can get the screen height minus the safe area in Flutter:

double screenHeight = MediaQuery.of(context).size.height;
double safeAreaHeight = MediaQuery.of(context).viewInsets.bottom;
double screenHeightMinusSafeArea = screenHeight - safeAreaHeight;
double safeAreaHeightTop = MediaQuery.of(context).viewInsets.top;
double safeAreaHeightBottom = MediaQuery.of(context).viewInsets.bottom;

double safeAreaHeightTopBottom = safeAreaHeightTop + safeAreaHeightBottom;

Here is an example of how you can get the screen height minus the safe area and app bar in Flutter:

double screenHeight = MediaQuery.of(context).size.height;
double safeAreaHeight = MediaQuery.of(context).viewInsets.bottom;
double appBarHeight = AppBar().preferredSize.height;
double screenHeightMinusSafeAreaAndAppBar = screenHeight - safeAreaHeight - appBarHeight;
//double usableScreenHeight = screenHeight - safeAreaHeight - appBarHeight - topPadding;

double usableScreenHeight = screenHeight - safeAreaHeightTop - safeAreaHeightBottom - appBarHeight - topPadding;
flutter safe area
Container(
  // height: 50,
  width: screenWidth,
  color: Colors.white,
  child: Column(
    children: [
      Text('Height of the screen: $screenHeight'),
      Text('Safe Area Top: $safeAreaHeightTop'),
      Text('Safe Area Bottom: $safeAreaHeightBottom'),
      Text('Safe Area Top and Bottom: $safeAreaHeightTopBottom'),
      Text('AppBar height: $appBarHeight '),
      Text('Top Padding: $topPadding'),
      Text('Bottom Padding: $bottomPadding'),
      Text('Usable Screen Height: $usableScreenHeight '),
    ],
  ),
)

What is LayoutBuilder in Flutter?

LayoutBuilder is a widget in Flutter that allows you to build a widget tree that depends on the dimensions of its parent widget. It’s often used when you need to create a layout that adjusts to the dimensions of the screen or a parent widget, or when you want to specify a widget’s size based on its parent’s size.

Here’s an example of how you can use the LayoutBuilder widget:

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth,
      height: constraints.maxHeight,
      color: Colors.red,
    );
  },
)
flutter screen width height
Expanded(
  child: LayoutBuilder(
    builder: (context, constraints) {
      return Container(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        color: Colors.red,
        child: Column(
          children: [
            SizedBox(height: 20,),
            Text('Screen width: ${constraints.maxWidth}'),
            Text('Screen height: ${constraints.maxHeight}'),
          ],
        ),
      );
    },
  ),
)

In this example, the LayoutBuilder widget creates a Container widget with a width and height that are equal to the maximum width and height of the parent widget. The dimensions of the parent widget are passed to the builder function of the LayoutBuilder as a BoxConstraints object in the constraints parameter.

You can use the constraints object to specify the dimensions of the child widget based on the dimensions of the parent widget. For example, you could set the width of the child widget to half the width of the parent by using constraints.maxWidth / 2.

I hope this helps! Let me know if you have any questions.

divide the screen in half horizontally in Flutter

To divide the screen into two containers in Flutter, you can use a LayoutBuilder widget and a Row widget. The LayoutBuilder widget allows you to build a widget tree that depends on the dimensions of its parent widget, and the Row widget allows you to arrange its children horizontally.

Here’s an example of how you could use these widgets to divide the screen into two containers that each take up half the screen width:

LayoutBuilder(
  builder: (context, constraints) {
    return Row(
      children: [
        Container(
          width: constraints.maxWidth / 2,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: constraints.maxWidth / 2,
          height: 100,
          color: Colors.blue,
        ),
      ],
    );
  },
)

This code creates a Row widget with two children, which are both Container widgets with equal widths. The width of each container is set to half the maximum width of the parent widget, which is determined by the constraints object passed to the builder function of the LayoutBuilder.

flutter divide horizontally

You can use a media query to adjust the layout based on the screen size by wrapping the LayoutBuilder widget in a LayoutBuilder widget and using the MediaQuery.of method to access the screen size. Here’s an example of how you could modify the code above to use a media query:

LayoutBuilder(
  builder: (context, constraints) {
    var screenWidth = MediaQuery.of(context).size.width;
    return Row(
      children: [
        Container(
          height: 100
          width: screenWidth / 2,
          color: Colors.red,
        ),
        Container(
          height: 100
          width: screenWidth / 2,
          color: Colors.blue,
        ),
      ],
    );
  },
)

In this example, the width of each container is set to half the width of the screen, which is determined using the MediaQuery.of method and the size property of the context object.

This will work too.

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

Row(
  children: [
    Container(
      height: 100,
      width: screenWidth / 2,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: screenWidth / 2,
      color: Colors.blue,
    ),
  ],
)

divide the screen in half vertically in Flutter

flutter divide vertically

To divide the screen into two containers in Flutter, you can use a LayoutBuilder widget and a Column widget. The LayoutBuilder widget allows you to build a widget tree that depends on the dimensions of its parent widget, and the Column widget allows you to arrange its children vertically.

Here’s an example of how you could use these widgets to divide the screen into two containers that each take up half the screen height:

Expanded(
  child: LayoutBuilder(
    builder: (context, constraints) {
      return Column(
        children: [
          Container(
            width: constraints.maxWidth,
            height: constraints.maxHeight / 2,
            color: Colors.red,
          ),
          Container(
            width: constraints.maxWidth,
            height: constraints.maxHeight / 2,
            color: Colors.blue,
          ),
        ],
      );
    },
  ),
)

This code creates a Column widget with two children, which are both Container widgets with equal heights. The height of each container is set to half the maximum height of the parent widget, which is determined by the constraints object passed to the builder function of the LayoutBuilder.

You can use a media query to adjust the layout based on the screen size by wrapping the LayoutBuilder widget in a LayoutBuilder widget and using the MediaQuery.of method to access the screen size. Here’s an example of how you could modify the code above to use a media query:

LayoutBuilder(
  builder: (context, constraints) {
    double screenHeight = MediaQuery.of(context).size.height;
    double safeAreaHeightTop = MediaQuery.of(context).viewInsets.top;
    double safeAreaHeightBottom = MediaQuery.of(context).viewInsets.bottom;
    double appBarHeight = AppBar().preferredSize.height;
    EdgeInsets safeArea = MediaQuery.of(context).padding;
    double topInset = viewInsets.top;
    double usableScreenHeight = screenHeight - safeAreaHeightTop - safeAreaHeightBottom - appBarHeight - topPadding;

    return Column(
      children: [
        Container(
          height: usableScreenHeight / 2,
          color: Colors.red,
        ),
        Container(
          height: usableScreenHeight / 2,
          color: Colors.blue,
        ),
      ],
    );
  },
)

You can also do it without LayoutBuilder.

double screenHeight = MediaQuery.of(context).size.height;
    double safeAreaHeightTop = MediaQuery.of(context).viewInsets.top;
    double safeAreaHeightBottom = MediaQuery.of(context).viewInsets.bottom;
    double appBarHeight = AppBar().preferredSize.height;
    EdgeInsets safeArea = MediaQuery.of(context).padding;
    double topInset = viewInsets.top;
double usableScreenHeight = screenHeight - safeAreaHeightTop - safeAreaHeightBottom - appBarHeight - topPadding;


Column(
  children: [
    Container(
      height: usableScreenHeight / 2,
      color: Colors.red,
    ),
    Container(
      height: usableScreenHeight / 2,
      color: Colors.blue,
    ),
  ],
)

Related Posts