How to create responsive grid in flutter app?

Question

What is best practice to make a flutter app responsive? In the code below is a StraggeredGridView with hardcoded values.

Should I write a method that is calculating the values, depending on the screen size, or are there any other ways to do so?

Thanks for your help!

  StaggeredGridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 20,
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20),
    //shrinkWrap: true,
    children: <Widget>[
      _buildTile(
          Padding(
              padding: const EdgeInsets.all(20.0),
            child: Column(children: <Widget>[
              Material(
                  color: Color.fromRGBO(123, 228, 193, 0.5),
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Image.asset(
                      'assets/siren.png',
                      height: 40,
                    ),
                  )),
              Padding(padding: EdgeInsets.only(bottom: 10.0)),
              Text('NOTRUF', style: tileFontStyle),
            ]),
          ),),

Solution 1

layoutBuilder as @Abbas.M mentioned is a possibility What you also can use is mediaQuery

    var deviceData = MediaQuery.of(context); 
    var screenSize = MediaQuery.of(context).size;
    var deviceOrientation = MediaQuery.of(context).orientation;

    if (screenSize.width > oneColumnLayout) {
      ...
    } else {
      ...
    }

like the device data, screen size, or orientation, but also animations and other stuff this really helps.

Solution 2

use responsive_grid package

it works like the Bootstrap grid system

Solution 3

You can make it responsive just like how you do it in CSS.

Use mathematics! but how?

Wrap your widget with layout builder and use constraints.maxWidth to play with the crossAxisCount attribute:

crossAxisCount:(constraints.maxWidth ~/ 250).toInt()

Solution 4

What I've been doing lately is that I get the dimensions of an app when it starts and store them as constants that i use all over the app. check out this as i found it very helpful.

You can also use some widgets that does the scaling on their own like layoutBuilder more on that here

View more solutions