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