How to set Max Items Per Row in Responsive Grids in Flutter-CodePudding

I have a responsive grid that returns two containers in a row because that's what I want. the problem is that whenever I view the app on a tablet, the grid looks ugly because it expands. I then set the max item per row to 4 so 4 containers appear if the screen is more expansive but I don't want to do this because 3 items per row will appear on some screens. I basically want to set the items per row to 2 on phones and to 4 on tablets and PC. I put my app to be viewable only in portrait mode so I don't want the code to be adjusted according to landscape mode. I just want the items per row to change from 2 to 4 once the width of the screen is more than let's say 2000 px since tablets' widths are usually 2000 px. Please how can I code this? My code below

child: ResponsiveGridList(
                    horizontalGridSpacing: 15, // Horizontal space between grid items// Vertical space between grid items
                    verticalGridSpacing: 0,
                    minItemWidth: 10, // The minimum item width (can be smaller, if the layout constraints are smaller)
                    minItemsPerRow: 2, // The minimum items to show in a single row. Takes precedence over minItemWidth
                    maxItemsPerRow: 4,

CodePudding user response：

one trick is to use the width of the device screen and handle this issue with simple short if for example:

maxItemsPerRow: MediaQuery.of(context).size.width >= 600? 4: 2,