How to make Flutter app responsive according to different screen size?

Creating a responsive user interface is crucial for any mobile application, especially when you’re building an app that will be used across various devices and platforms. In this blog post, we’ll discuss how to make your Flutter app responsive according to different screen sizes.

Using MediaQuery class

The `MediaQuery` class in Flutter provides information about the physical characteristics of the device screen, such as the width, height, and pixel density. To get these values, you can use the following code:

MediaQueryData queryData;
queryData = MediaQuery.of(context);

Here’s a breakdown of what each of these properties represents:

• devicePixelRatio: This property returns the ratio of physical pixels to logical pixels on the device screen.
• size.width and size.height: These properties return the width and height of the device screen in physical pixels.
• textScaleFactor: This property returns a factor that can be used to scale text up or down according to the user’s preference.

Using AspectRatio class

The `AspectRatio` class is another useful tool for creating responsive layouts in Flutter. It allows you to specify an aspect ratio for your widget and will automatically adjust its size based on that ratio.

new Center(
  child: new AspectRatio(
    aspectRatio: 100 / 100,
    child: new Container(
      decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        color: Colors.orange,
      ),
    ),
  ),
)

In this example, the `AspectRatio` widget is used to create a container with an aspect ratio of 1:1. The `aspectRatio` property specifies the desired width-to-height ratio for the child widget.

Other useful classes

In addition to `MediaQuery` and `AspectRatio`, there are several other classes that can be used to create responsive layouts in Flutter:

• LayoutBuilder: This class allows you to specify a function that will be called whenever the layout of the widget changes.
• FittedBox: This class is similar to `AspectRatio`, but it allows you to specify a maximum size for the child widget instead of an aspect ratio.
• CustomMultiChildLayout: This class provides a way to create custom layouts by specifying a function that will be called whenever the children need to be laid out.

Using SizeConfig class

The `SizeConfig` class is a helpful utility for getting and storing screen sizes in your Flutter app. Here’s an example of how you can use it:

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;
  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;
    _safeAreaHorizontal = _mediaQueryData.padding.left + _mediaQueryData.padding.right;
    _safeAreaVertical = _mediaQueryData.padding.top + _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 100;
    safeBlockVertical = (screenHeight - _safeAreaVertical) / 100;
  }
}

Here’s how you can use the `SizeConfig` class in your widget:

Widget build(BuildContext context) {
  SizeConfig().init(context);
  return Container(
    height: SizeConfig.safeBlockVertical * 10, // 10 for example
    width: SizeConfig.safeBlockHorizontal * 10, // 10 for example
  );
}

In this example, the `SizeConfig` class is used to get and store screen sizes in the app. The `init` method is called at the beginning of the widget’s build process, and then the stored values are used to set the height and width of a container.