Flutter - Layout a Grid

Question

I am trying to layout a 4x4 grid of tiles in flutter. I managed to do it with columns and rows. But now I found the GridView component. Could anyone provide an example on how to do it using it?

I can't really wrap my head around the docs. I don't seem to get the results I want.

Answer 1

Use whichever suits your need.

1. GridView.count(...)

   GridView.count(
     crossAxisCount: 2,
     children: <Widget>[
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
     ],
   )
   

2. GridView.builder(...)

   GridView.builder(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     itemBuilder: (_, index) => FlutterLogo(),
     itemCount: 4,
   )
   

3. GridView(...)

   GridView(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     children: <Widget>[
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
     ],
   )
   

4. GridView.custom(...)

   GridView.custom(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     childrenDelegate: SliverChildListDelegate(
       [
         FlutterLogo(),
         FlutterLogo(),
         FlutterLogo(),
         FlutterLogo(),
       ],
     ),
   )
   

5. GridView.extent(...)

   GridView.extent(
     maxCrossAxisExtent: 400,
     children: <Widget>[
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
     ],
   )
   

Output (same for all):