ListView é un widget básico para amosar listas de elementos desprazables (scroll vertical por defecto).

Úsase para:

• Listas de tarefas, mensaxes, produtos…
• Menús con opcións repetidas
• Pantallas nas que o contido medra en número ou tamaño

📝 Como se emprega un ListView #

Un ListView está composto por:

1. Unha dirección de scroll (vertical por defecto).
2. Un conxunto de elementos ou filas (widgets fillos).
3. Propiedades de comportamento e estilo

Existen tres xeitos principais de crear un ListView. A elección depende de canto contido teñas e se é fixo ou dinámico:

📌 Regra rápida:

• Se a lista cabe comodamente na pantalla → children.
• Se non sabes cantos elementos haberá ou son moitos → builder.
• Se queres unha separación visual repetida → separated.

🧠 ListTile #

Dentro dun ListView, o máis común é usar ListTile, porque xa trae unha estrutura tipo “fila” lista para usar (é como un molde para cada elemento da lista).

Un ListTile pode levar:

• leading → icona/avatar á esquerda
• title → texto principal (o máis importante)
• subtitle → texto secundario (detalles)
• trailing → icona/acción á dereita
• onTap → acción cando o usuario preme na fila

Isto permite crear listas con aspecto profesional con moi pouco código:

ListTile(
  leading: const Icon(Icons.person),
  title: const Text('Uxía Pérez'),
  subtitle: const Text('2º ESO A'),
  trailing: const Icon(Icons.arrow_forward_ios),
  onTap: () => print('Premeuse Uxía'),
)

📌 Importante: Se precisas unha fila máis personalizada, sempre podes substituílo por un Row, Container, ou un widget propio.

🔹 1. ListView #

Cando tes poucos elementos, podes definir a lista de forma directa con children.

ListView(
  children: const [
    ListTile(
      leading: Icon(Icons.check),
      title: Text('Tarefa 1'),
    ),
    ListTile(
      leading: Icon(Icons.check),
      title: Text('Tarefa 2'),
    ),
    ListTile(
      leading: Icon(Icons.check),
      title: Text('Tarefa 3'),
    ),
  ],
)

✅ Vantaxe: rápido e sinxelo.
⚠️ Limitación: se hai moitos elementos, vai consumir memoria porque crea todos de golpe.

🔹 2. ListView.builder #

Cando a lista é longa ou dinámica, emprega ListView.builder.

📌 Con ListView.builder, Flutter constrúe cada fila só cando fai falta (lazy loading).

final tarefas = ['Comprar pan', 'Estudar Flutter', 'Saír correr'];

ListView.builder(
  itemCount: tarefas.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: const Icon(Icons.task_alt),
      title: Text(tarefas[index]),
    );
  },
)

📌 itemCount indica cantos elementos hai.
📌 itemBuilder define como se debuxa cada elemento.

🔹 3. ListView.separated #

Igual ca builder, pero permite engadir un separador entre elementos.

ListView.separated(
  itemCount: tarefas.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: const Icon(Icons.task_alt),
      title: Text(tarefas[index]),
    );
  },
  separatorBuilder: (context, index) => const Divider(),
)

Propiedades máis habituais #

🧪 Exemplo completo: listas de tarefas #

🔗 Ver o código en DartPad