扑。 - 如何在 Gridview 中动态 crossAxisCount

Question

I have a GridView where I want the crossAxisCount to change based on the device size specifically mobile (crossAxisCount:3) and tablet (crossAxisCount:4). I am new to Flutter and I know there is MediaQuery but I don't know how to use it.

I am also attaching an image for reference. What I am looking for.

Answer 1

you can check if the device's shortest side < 600 so it's phone

crossAxisCount: MediaQuery.of(context).size.shortestSide < 600 ? 2 : 4,

as an option you can create extension for BuildContext like this

extension ContextExtension on BuildContext {
  bool get isTablet => MediaQuery.of(this).size.shortestSide > 600;

  bool get isPhone => MediaQuery.of(this).size.shortestSide < 600;
}

and use it:

crossAxisCount: context.isTablet ? 4 : 2

Answer 2

you can use wrap widget instead of gridview A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. you can learn how to use wrap widget in this article: https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16