How to build responsive Grid in flutter?

Question

I want to build a grid with some images and captions in Flutter Web. I want that in mobile it will show 2 column and in desktop 4. How can I build this.

Answer 1

Use LayoutBuilder to establish a cut point at your desired width. Inside LayoutBuilder, set the number of columns for the grid with something like:

final columns = constraints.width > 500 ? 4 : 2;

Then build your grid within that. You could even make it a formula, like divide the width by 250 and truncate to an int.