Saltar al contenido principal

Crear una lista en cuadrícula

Cómo implementar una lista en cuadrícula.

En algunos casos, es posible que quieras mostrar tus elementos como una cuadrícula en lugar de una lista normal de elementos que van uno detrás de otro. Para esta tarea, usa el widget GridView .

La forma más sencilla de empezar a usar cuadrículas es utilizando el constructor GridView.count(), porque te permite especificar cuántas filas o columnas quieres.

Para visualizar cómo funciona GridView, genera una lista de 100 widgets que muestren su índice en la lista.

dart
GridView.count(
  // Create a grid with 2 columns.
  // If you change the scrollDirection to horizontal,
  // this produces 2 rows.
  crossAxisCount: 2,
  // Generate 100 widgets that display their index in the list.
  children: List.generate(100, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: TextTheme.of(context).headlineSmall,
      ),
    );
  }),
),

Ejemplo interactivo

#