In some cases, you might want to display your items as a Grid rather thana normal list of items that come one after the next. For this task, we’ll employthe GridView Widget.

The simplest way to get started using grids is by using theGridView.countconstructor, because it allow us to specify how many rows or columns we’d like.

In this example, we’ll generate a List of 100 Widgets that display theirindex in the list. This will help us visualize how GridView works.

  1. GridView.count(
  2.   // Create a grid with 2 columns. If you change the scrollDirection to
  3.   // horizontal, this would produce 2 rows.
  4.   crossAxisCount: 2,
  5.   // Generate 100 Widgets that display their index in the List
  6.   children: List.generate(100, (index) {
  7.     return Center(
  8.       child: Text(
  9.         'Item $index',
  10.         style: Theme.of(context).textTheme.headline,
  11.       ),
  12.     );
  13.   }),
  14. );

Complete example

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     final title = 'Grid List';
  12.     return MaterialApp(
  13.       title: title,
  14.       home: Scaffold(
  15.         appBar: AppBar(
  16.           title: Text(title),
  17.         ),
  18.         body: GridView.count(
  19.           // Create a grid with 2 columns. If you change the scrollDirection to
  20.           // horizontal, this would produce 2 rows.
  21.           crossAxisCount: 2,
  22.           // Generate 100 Widgets that display their index in the List
  23.           children: List.generate(100, (index) {
  24.             return Center(
  25.               child: Text(
  26.                 'Item $index',
  27.                 style: Theme.of(context).textTheme.headline,
  28.               ),
  29.             );
  30.           }),
  31.         ),
  32.       ),
  33.     );
  34.   }
  35. }