How to adapt crossAxisCount of GridView based on its width in Flutter?

Question

What is the best practice to adapt the number of columns (crossAxisCount) of a GridView based on its width in Flutter?

Maybe I can better explain the intended behaviour by referencing HTML:

• I create 6 boxes (eg DIVs) with a width of 200 px (and same height) each.
• (a) If the element surrounding these boxes has a width of 400 px, it would automatically show 2 boxes per row in 3 rows.
• (b) If the element surrounding these boxes has a width of 700 px, it would automatically show 3 boxes per row in 2 rows.

Answer 1

Use Wrap. It can put renderboxes as many as fit to a row, then wrap to the next row. (formerly a comment, but it looks like the answer!)

Answer 2

I do this like below. You can try..

  int getItemCountPerRow(BuildContext context) {
    double minTileWidth = 200; //in your case
    double availableWidth = MediaQuery.of(context).size.width;
    
    int i = availableWidth ~/ minTileWidth;
    return i;

  }