SliverGrid Explained | Flutter for Android Developers

What’s SliverGrid?

A sliver that places multiple box children in a two dimensional arrangement.

Check the official documentation for more.

SliverGrid explained for Android Developers

SliverGrid places its children in arbitrary positions determined by gridDelegate. Each child is forced to have the size specified by the gridDelegate. The main axis direction of a grid is the direction in which it scrolls; the cross axis direction is the orthogonal direction. This is similar to how Android developers use RecyclerView with GridLayoutManager to create grid-like layouts, where items are arranged in a grid format and can be scrolled vertically or horizontally.

Example Code

Here is an example of how to use SliverGrid:

SliverGrid(
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200.0,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 4.0,
  ),
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container(
        alignment: Alignment.center,
        color: Colors.teal[100 * (index % 9)],
        child: Text('grid item $index'),
      );
    },
    childCount: 20,
  ),
)

SliverGrid Remarks

Using SliverGrid allows for efficient rendering of a grid of items in a scrollable view, optimizing performance by lazily creating and destroying child elements.