---
title: 🧱 Cuadrículas
description: "## 🧱 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…"
url: "https://www.drodicio.com/docs/flutter/tema-2-os-fundamentos-de-flutter-widgets/cuadriculas/"
updated: "2026-10-12"
category: Tema 2. Os fundamentos de Flutter. Widgets.
---

# 🧱 Cuadrículas

## 🧱 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`:

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

![Profesorado distribuído en dúas columnas con GridView.count](https://www.drodicio.com/wp-content/uploads/2026/10/gridview-scaled.png)
Profesorado distribuído en dúas columnas con GridView.count

### 🏗️ 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:

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

No `body` do `Scaffold`:

```dart
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**.

![Construír unha cuadrícula a partir dos datos con GridView.builder](https://www.drodicio.com/wp-content/uploads/2026/10/gridview_builder.png)
Construír unha cuadrícula a partir dos datos con GridView.builder

> 📚 Consulta:
>
>
>
> - [GridView → `https://api.flutter.dev/flutter/widgets/GridView-class.html`](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.