Search code examples
flutterdartresponsive-designflutter-layout

How to create responsive grid in flutter app?


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

  • 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.