Flutter : Build Responsive UI

July 22, 2021 Publish By : EXPERT APP DEVS 5 min read Viewed By : 649
Flutter - Build Responsive UI

In modern scenario there are such a lot of gadgets to be had in marketplace with different sizes and different pixels so now and again you will face problem is layout UI of application for mobile devices like, a few gadgets get suitable output or in a few gadgets it'll now no longer get output as per your mockup and expectations.

To conquer this problem in flutter mobile applications, Flutter lets you create responsive applications which self-adapt to device's screen size and orientation.

What is Responsive Application ?

Typically, a responsive app has had its layout tuned for the available display size. Often this means (for example), re-laying out the UI if the user resizes the window, or adjusting the device’s orientation. This is particularly important while the same app can run on plenty of devices, from a watch, phone, tablet, to a computer or desktop computer.

There are simple techniques to developing Flutter apps with responsive design:

MediaQuery Class

With MediaQuery class you cannot without delay change layout, however the usage of this class you may find device's height, width in addition to its orientation and user preferences.

This is more useful in case you need to design your layout at the bases of any particular device size, however it's going to give the same output in all different size devices.

To get mediaQueryData simply use following line of code:

MediaQueryData mediaQueryData = MediaQuery.of(context);

On the idea of MediaQueryData you may now get device size, orientation, screen height, screen width, blockSize in horizontal, blockSize in vertical in addition to safe area in vertical and horizontal both.

Safe area is like, in case you need to create layout after notification bar then you need to get a safe area with horizontal in addition to in case you need to manage device curve display and manipulate layouts vertical side then use safe area in with vertical.

To control display screen orientation and device type.

enum DisplayType {

  Desktop,
  Mobile,
  Tablet
}

To manage displayType as per device size use following function:

DisplayType getDeviceScreenType(MediaQueryData mediaQuery) {
  var orientation = mediaQueryData.orientation;
  double deviceWidth = 0;
  if (orientation == Orientation.landscape) {
    deviceWidth = mediaQueryData.size.height;
  } else {
    deviceWidth = mediaQueryData.size.width;
  }
  if (deviceWidth > 950) {
    return DisplayType.Desktop;
  }
  if (deviceWidth > 600) {
    return DisplayType.Tablet;
  }
  return DisplayType.Mobile;
}

Now, Manage flutter widget size as per device height or width by creating DeviceSizeInfo class.

class DeviceSizeConfig{
static MediaQueryData mediaQueryData;

 static double safeAreaHorizontal;
static double safeAreaVertical;
static double safeBlockHorizontal;
static double safeBlockVertical;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;

 

void initDeviceSizeConfig(BuildContext context) {
mediaQueryData = MediaQuery.of(context);

 

 safeAreaHorizontal =
mediaQueryData.padding.left + mediaQueryData.padding.right;


safeAreaVertical =
mediaQueryData.padding.top + mediaQueryData.padding.bottom;


safeBlockHorizontal = (screenWidth -safeAreaHorizontal) / 100;


safeBlockVertical = (screenHeight - safeAreaVertical) / 100;


screenWidth = mediaQueryData.size.width;


screenHeight = mediaQueryData.size.height;


blockSizeHorizontal = screenWidth / 100;


blockSizeVertical = screenHeight / 100;

}
}

Initialise initDeviceSizeConfig method of DeviceSizeConfig class in your app first screen and Now, use DeviceSizeConfig class  data to manage the widget's height, width in the UI.

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
DeviceSizeConfig().initDeviceSizeConfig(context);
  return return Center(
  child: Container(
  height: SizeConfig.blockSizeVertical * 20,
  width: SizeConfig.blockSizeHorizontal * 50,
  color: Colors.orange,
  ),
);

}

LayoutBuilder class

The different way is to use a LayoutBuilder, a great alternative to MediaQuery that has been used to address orientation changes. It is a builder widget similar to a “StreamBuilder '' or a “FutureBuilder '', that still offers BoxConstraints which allows you to decide the maximum and minimum height and width properties of the screen.

The builder feature is called withinside the following situations:

The first time the widget is laid out.

When the parent widget passes one-of-a-kind layout constraints.

When the parent widget updates this particular widget.

When the dependencies that the builder feature subscribes to change.

The builder function isn't called at some stage in layout if the parent passes the same constraints repeatedly.

Example :

Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNormalContainer();
          }
        },
      ),
    );
  }

Expanded and Flexible

The widgets which can be especially useful inside a Column or a Row are Expanded and Flexible. The Expanded widget expands a child of a Row, Column, or Flex so that the child fills the available space, whereas  Flexible does not always fill the whole available space.

Expanded Widget Syntax :

const Expanded(
{Key? key,
int flex = 1,
required Widget child}
)

 

Flexible Widget Syntax :

const Flexible(
{Key key,
int flex: 1,
FlexFit fit: FlexFit.loose,
@required Widget child}
)

While working with responsiveness, a number of the terrific Flutter plugins that you may use are as follows:

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.