How to make the flutter app responsive according to different screen sizes?

How to make the flutter app responsive according to different screen sizes?

A responsive app lays out its UI according to the size and shape of the screen. This is necessary when the same app can run on a variety of devices. When the user resizes the window on a laptop or desktop or changes the orientation of the phone or tablet, the app should respond by rearranging the UI accordingly. so let us make the flutter app responsive according to different screen sizes.

Check out the different approaches for this in the given below article…

How to make the flutter app responsive according to different screen sizes?

Take screen width and height, calculate a grid of 100*100 out of it to position and scale things, and save it as static variables that can be reused. Works quite well in most cases. Try it like this:

AppConfig.width = MediaQuery.of(context).size.width;
AppConfig.height = MediaQuery.of(context).size.height;
AppConfig.blockSize = AppConfig.width / 100;
AppConfig.blockSizeVertical = AppConfig.height / 100;

After doing this, Scale everything according to these values, Like this:

double elementWidth = AppConfig.blockSize * 10.0;   // 10% of the screen width

or Like this:

double fontSize = AppConfig.blockSize * 1.2;

Sometimes the safe area kills the layout, So one can also try this approach :

AppConfig.safeAreaHorizontal = MediaQuery.of(context).padding.left +
    MediaQuery.of(context).padding.right;

double screenWidthWithoutSafeArea = AppConfig.width - AppConfig.safeAreaHorizontal;

This class will also help and then will initiate the class with the init method:

import 'package:flutter/widgets.dart';

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;
  }
}

Then try these dimensions in your widgets

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

 

Conclusion:

So in this article, we have learned how to make the flutter app responsive according to different screen sizes.

Also, check the article for adding a slide transition widget.!!

Thanks for checking the Article!!! Keep Learning, Keep Fluttering !!!

Do let us know if you need any further assistance with Flutter Development. We would love to assist you.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.