Flutter change StaggeredGridView crossAxisCount by screen rotation

Question

StaggeredGridView like with GridView support crossAxisCount and that work fine when i define specific number for crossAxisCount , such as 1 or 2 for this option i want to change that with screen size resolution automatically by code, for example this below code can calculate screen size and can be used for GridView or StaggeredGridView

int _crossAxisCount = 0;
final double screenWidthSize = MediaQuery.of(context).size.width;
if (screenWidthSize > 720) {
  _crossAxisCount = 3;
} else if (screenWidthSize > 520) {
  _crossAxisCount = 2;
} else {
  _crossAxisCount = 1;
}

when i define _crossAxisCount for the library crossAxisCount option, it doesn't work and only work when i press on hot reload button

but when i change that to specific count, that work fine

UPDATED:

LayoutBuilder(
  builder:(context,constraints){
    int _crossAxisCount = 0;
    final double screenWidthSize = MediaQuery.of(context).size.width;
    if (screenWidthSize > 720) {
      _crossAxisCount = 3;
    } else if (screenWidthSize > 520) {
      _crossAxisCount = 2;
    } else {
      _crossAxisCount = 1;
    }
    return StaggeredGridView.countBuilder(
      primary: false,
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      crossAxisCount: _crossAxisCount ,
      mainAxisSpacing: 2.0,
      crossAxisSpacing: 2.0,
      itemCount: feedsList.length,
      itemBuilder: (BuildContext context, int index) => Card(
          clipBehavior: Clip.antiAliasWithSaveLayer,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              BuildFeedsItems(
                  item: feedsList[index] as FeedsItemsList,
                  doubleTapImageEvents: _doubleTapImageEvents,
                  fullScreenDialog: fullScreenDialog,
                  theme: theme )
            ],
          )),
      staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
    );
  },
)

how can help me to know whats this issue and how can i fix that?

Answer 1

Get the screen orientation from the MediaQuery and set the crossAxisCount depending on the orientation.

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

Answer 2

You should use OrientaionBuilder in this link

Example:

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

Answer 3

 @override
  Widget build(BuildContext context) {
    int _crossAxisCount = 0;
    return LayoutBuilder(
      builder: (context,constraints){
        if(constraints.maxWidth>720){
            _crossAxisCount = 3;
            return _straggeredView(_crossAxisCount);
        }else if(constraints.maxWidth>520 && constraints.maxWidth<720){
            _crossAxisCount = 2;
            return _straggeredView(_crossAxisCount);
        }else{
            _crossAxisCount = 1;
            return _straggeredView(_crossAxisCount);
        }
      },
    )
}

Widget _straggeredView(_crossAxisCount) {
    return StaggeredGridView.countBuilder(
       crossAxisCount : _crossAxisCount,
      ...
    )
  }