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),
            ]),
          ),),

Answer 1

use responsive_grid package

it works like the Bootstrap grid system

Answer 2

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.