🧱 Cuadrículas con GridView

GridView permite organizar varios widgets nunha cuadrícula, é dicir, distribuídos en filas e columnas. Ademais, incorpora desprazamento (scroll) automaticamente cando os elementos non caben na pantalla.

A diferenza de ListView, que normalmente coloca os elementos un debaixo doutro, GridView permite mostrar varios elementos en cada fila.

É útil, por exemplo, para mostrar tarxetas, fotografías, produtos ou opcións dun menú.

Unha das formas máis sinxelas é GridView.count. Podes colocar este fragmento no body dun Scaffold:

GridView.count(
  crossAxisCount: 2, // Número de columnas.
  children: [
    for (final nome in ['Toni', 'Janeiro', 'Julia', 'Lucas'])
      Card(
        child: Center(
          child: Text(nome),
        ),
      ),
  ],
)

🏗️ Crear elementos con GridView.builder

Do mesmo xeito que en ListView.builder, podemos empregar GridView.builder para crear os elementos a medida que se necesitan.

Dentro de build, antes do return, declara os datos:

final nomes = ['Toni', 'Janeiro', 'Julia', 'Lucas'];

No body do Scaffold:

GridView.builder(
  itemCount: nomes.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // Número de columnas.
  ),
  itemBuilder: (context, indice) {
    return Card(
      child: Center(
        child: Text(nomes[indice]),
      ),
    );
  },
)

Neste caso:

• itemCount indica cantos elementos terá a cuadrícula.
• gridDelegate define como se distribúen os elementos; neste exemplo, en dúas columnas.
• itemBuilder constrúe cada elemento utilizando o seu índice.

O resultado visual é o mesmo que no exemplo anterior, pero GridView.builder é máis adecuado cando traballamos con listas grandes, nas que interesa construír os elementos segundo fan falta.

📚 Consulta:

• GridView → https://api.flutter.dev/flutter/widgets/GridView-class.html.

Nunha Column, envolve a cuadrícula en Expanded, igual que unha ListView, para darlle unha altura limitada. Para listas e cuadrículas grandes, os construtores builder crean os elementos segundo fan falta.