CODEWITHSUNDEEP
flutterdartresponsive-designflutter-layout
T.Im
T.Im

Reputation: 159

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

Upvotes: 12

Views: 23737

Answers (5)

Bermjly Team
Bermjly Team

Reputation: 3711

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

Use mathematics! but how?

Use MediaQuery width to play with the crossAxisCount attribute:

crossAxisCount:(MediaQuery.of(context).size.width ~/ 250).toInt()

Extra useful tip:

Case you need to control Min / Max count you can import math library and use min / max functions.

Example:

import 'dart:math';


/// Inside widget build insert following variables

final currentCount = (MediaQuery.of(context).size.width ~/ 250).toInt();

final minCount = 4;

...

// Automatically select whichever is greater

crossAxisCount: max(currentCount, minCount);


// Automatically select whichever is less

crossAxisCount: min(currentCount, minCount);

Upvotes: 20

Darkhorse
Darkhorse

Reputation: 206

Use the MediaQuery.of(context).orientation == Orientation.landscape on crossAxisCount. Then use ternary operator or if/else statement to state crossAxisCount values. See example below. Worked for me.

crossAxisCount: (MediaQuery.of(context).orientation == Orientation.landscape) ? 4 : 2

Upvotes: 3

Mohamed Ali
Mohamed Ali

Reputation: 4015

use responsive_grid package

it works like the Bootstrap grid system

Upvotes: 9

key
key

Reputation: 1402

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.

Upvotes: 7

Abbas.M
Abbas.M

Reputation: 3394

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

Upvotes: 3

Related Questions