How to create responsive layout in Flutter

In this article, we will learn different responsive layouts that is mostly used in the flutter to create the UI of the Application. Responsive design simply means using a single code set that responds to various changes to the layout of the devices. The responsive app layout its UI according to the screen size and shape of the device. Flutter, being a cross-platform app development framework, supports devices with widely varying screen sizes: It can run on a device as small as a smartwatch to devices like a large TV. It’s always a challenge to adapt your app to such a variety of screen sizes and pixel densities using the same codebase.

Also read: How To Implement Form Widget And Validation In Flutter

We are following different approaches to getting responsiveness in our Flutter application. Some of the approaches are listed below:

  1. Layout Builder
  2. Orientation Builder
  3. Aspect Ratio
  4. MediaQuery
  5. Expanded and Flexible
  6. FractionallySizedBox

Layout Builder:

LayoutBuilder has builder property that has BoxConstraints which enables us to determine the maximum and minimum height and width properties of the screen and to build our layouts. Here we have two properties that we mostly used i.e key which is optional and builder which is required and it takes a constraint property in order to determine the height and width of the screen

The main difference between MediaQuery and LayoutBuilder is that MediaQuery uses the complete context of the screen rather than just the size of your particular widget, whereas LayoutBuilder can determine the maximum width and height of a particular widget.

         LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
            if (constraints.maxWidth < 600) {
              return protraitMode();
            } else {
              return landscapeMode();
            }
          }),

Here in the above code, We use builder property in the Layout Builder widget where BoxConstraints should be defined. We have a width and height of the entire screen where constraints can be used as maxWidth and maxHeight. If constraints are maxWidth is less than 600, the screen goes to portraitMode() and if not goes to landscapeMode()
600 is the entire size width of our device screen.

2. Orientation Builder

Orientation Builder builds a widget tree that can depend on the parent widget’s orientation (distinct from the device orientation). Orientation Builder has a builder property to build the layouts. This builder is called when the device orientation changes. There is a condition between the changes Orientation i.e. Orientation. portrait and Orientation. landscape.

          OrientationBuilder(
              builder: (BuildContext context, orientation) {
            if (orientation == Orientation.portrait) {
              return protraitMode();
            } else {
              return landscapeMode();
            }
          }),

Here in the above code . We use builder property in the Orientation Builder widget where orientation should be there. If orientation is equal to the Orientation. portrait, the screen shows/goes to portraitMode() and if not goes to landscapeMode() If we have to do the Landscape Mode where we should do orientation is equal to the Orientation. landscape and it gave us the screen according to our mobile screen.

3. Aspect Ratio

AspectRatio is a widget that attempts to size the child to a specific aspect ratio. we can use the aspect ratio widget to size the child to a specific aspect ratio. This widget first tries the largest width permitted by the layout constraints and then decides the height by applying the given aspect ratio to the width.

         AspectRatio(
            aspectRatio: 4/3,
           child: Container(
             color: Colors.green,
           ),
         ),

Here in the above code, AspectRatio has the required property i.e. AspectRatio to specify the aspect ratio value of width/height. Such as the 4/3 aspect ratio uses the value of 4.0/3.0.

4. Media Query

The MediaQuery class provides us with not just the widget size, but with the entire screen size of our application at runtime and the device orientation at the time. We can use Media Query to retrieve the size (width/height) and orientation (portrait/landscape) of the screen.

       Container(
          color: Colors.green,
          height: MediaQuery.of(context).size.height /3,
          width: MediaQuery.of(context).size.width,
        ),

By Using MediaQuery in the width and height of the entire screen size of our
screen. We simply use the MediaQuery in the width i.e
width: MediaQuery.of(context).size.width; // take the width of the screen
width: MediaQuery.of(context).size.width * 0.1; // take the only 10% width of the screen
width: MediaQuery.of(context).size.width / 2; // take the only half of the width of the screen
height: MediaQuery.of(context).size.height; // take the height of the screen
height: MediaQuery.of(context).size.height * 0.1; // take the only 10% height of the screen
height: MediaQuery.of(context).size.height / 2; // take the only half of the height of the screen

5. Expanded and Flexible

Expanded and Flexible are the widgets in flutter which are especially useful inside a Column or a Row. Expanded and Flexible widgets fill the available space, whereas do not necessarily have to fill the entire available space. Flexible is similar to the expanded widget but it controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available. It is an important part of making a responsive app that looks and feels the same across multiple device sizes.

 Expanded(
            child: Container(
              color: Colors.amber,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.amber,
            ),
          ),
          Flexible(
            child: Container(
              color: Colors.green,
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(
              color: Colors.green,
            ),
          ),

6. FractionallySizedBox

The  FractionallySizedBox widget helps to size its child to a fraction of the total available space. It is especially useful inside Expanded or Flexible widgets. It has properties i.e child, width factor, the height factor

 FractionallySizedBox(
        alignment: Alignment.centerLeft,
        widthFactor: 3,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.green,
            border: Border.all(color: Colors.white),
          ),
        )),

Thank you for reading the guide on Responsive Design in Flutter.

Also read: The magic of Extension Methods. What Is Flutter’s BuildContext?