---
title: 📋 Listas desprazables
description: "## 📋 Unha lista que permite desprazarse `ListView` organiza os elementos nunha lista vertical con desprazamento. Colocámola, por exemplo, no `body` do `Scaffold`. `ListTile` representa unha fila habitual: pode levar unha icona en `leading`, un texto en `title`, outro en…"
url: "https://www.drodicio.com/docs/flutter/tema-2-os-fundamentos-de-flutter-widgets/listview/"
updated: "2026-10-12"
category: Tema 2. Os fundamentos de Flutter. Widgets.
---

# 📋 Listas desprazables

## 📋 Unha lista que permite desprazarse

`ListView` organiza os elementos nunha lista vertical con desprazamento. Colocámola, por exemplo, no `body` do `Scaffold`.

`ListTile` representa unha fila habitual: pode levar unha icona en `leading`, un texto en `title`, outro en `subtitle` e un widget á dereita en `trailing`.

## 📝 Poucos elementos: `ListView`

```dart
ListView(
  children: const [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Xurxo'),
      subtitle: Text('2º DAM'), // Información secundaria.
    ),
    ListTile(leading: Icon(Icons.person), title: Text('Iria'), subtitle: Text('2º DAM')),
    ListTile(leading: Icon(Icons.person), title: Text('Iago'), subtitle: Text('2º DAM')),
    ListTile(leading: Icon(Icons.person), title: Text('Anxo'), subtitle: Text('2º DAM')),
  ],
)
```

Nesta variante proporcionamos xa a lista de widgets. Para moitos elementos, é preferible crealos a medida que fan falta.

![Lista de alumnos con ListView e ListTile](https://www.drodicio.com/wp-content/uploads/2026/10/listview_2.png)
Lista de alumnos con ListView e ListTile

## 🏗️ Crear filas con `ListView.builder`

O callback `itemBuilder` recibe o contexto e o índice da fila, empezando en cero. **Debe devolver o widget desa fila.** Flutter chámao cando necesita construíla, non necesariamente para toda a lista de golpe nin unha única vez.

Fragmento dentro de `build`, antes de devolver o `Scaffold`:

```dart
final alumnos = ['Xurxo', 'Roi', 'Iria', 'Anxo'];
```

No `body`:

```dart
ListView.builder(
  itemCount: alumnos.length, // Número de filas.
  itemBuilder: (context, indice) {
    return ListTile(
      leading: const Icon(Icons.person),
      title: Text(alumnos[indice]), // Consultamos o dato desa posición.
      subtitle: const Text('2º DAM'),
    );
  },
)
```

![Construír as filas a partir dos datos con ListView.builder](https://www.drodicio.com/wp-content/uploads/2026/10/listview_builder.png)
Construír as filas a partir dos datos con ListView.builder

## ➖ Separar as filas: `ListView.separated`

Funciona igual, pero engade outro callback, `separatorBuilder`, que devolve o widget situado entre dúas filas.

```dart
ListView.separated(
  itemCount: alumnos.length,
  itemBuilder: (context, indice) {
    return ListTile(
      leading: const Icon(Icons.person),
      title: Text(alumnos[indice]),
      subtitle: const Text('2º DAM'),
    );
  },
  separatorBuilder: (context, indice) {
    return const Divider(); // Liña entre filas, non despois da última.
  },
)
```

![Engadir divisores entre filas con ListView.separated](https://www.drodicio.com/wp-content/uploads/2026/10/listview_separated.png)
Engadir divisores entre filas con ListView.separated

## 🧪 Un título fixo e unha lista desprazable

Se metemos unha lista nunha `Column`, temos que darlle unha altura limitada. Neste exemplo, `Expanded` dálle a altura restante baixo o título.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=1556a76dfa7d27aea0d6f12dc73623c9`](https://dartpad.dev/?id=1556a76dfa7d27aea0d6f12dc73623c9).

[https://dartpad.dev/embed-inline.html?id=1556a76dfa7d27aea0d6f12dc73623c9](https://dartpad.dev/embed-inline.html?id=1556a76dfa7d27aea0d6f12dc73623c9)

| Parámetro | Para que serve? |
| --- | --- |
| `padding` | Espazo arredor do contido da lista. |
| `scrollDirection` | Dirección do desprazamento; por defecto é vertical. |
| `itemCount` | Número de elementos en `builder` e `separated`. |
| `itemBuilder` | Función que constrúe cada fila en `builder` e `separated`. |

`shrinkWrap: true` axusta o tamaño da lista ao contido, pero pode supoñer máis traballo de cálculo. Non é a solución por defecto para unha lista dentro dunha `Column`: comeza con `Expanded` cando queiras ocupar a altura restante.

![Título fixo e lista desprazable dentro de Expanded](https://www.drodicio.com/wp-content/uploads/2026/10/listview_expander.png)
Título fixo e lista desprazable dentro de Expanded

> 📚 Consulta:
>
>
>
> - [ListView → `https://api.flutter.dev/flutter/widgets/ListView-class.html`](https://api.flutter.dev/flutter/widgets/ListView-class.html).