Creación de listas desplazables con ListView
Muestre colecciones desplazables de forma eficiente en Flutter mediante ListView, ListView.builder y separadores de elementos.
Creación de listas desplazables con ListView es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Why ListView?
Most apps show lists: messages, products, feeds. A ListView arranges its children in a scrollable column, handling overflow automatically when content exceeds the screen.
A Simple ListView
Pass a fixed set of children. Good for short, known lists.
ListView(
children: [
Text("Apple"),
Text("Banana"),
Text("Cherry"),
],
)ListTile for Rows
ListTile is a ready-made row with leading icon, title, subtitle, and trailing widget, perfect for menus and settings.
ListTile(
leading: Icon(Icons.person),
title: Text("Ada Lovelace"),
subtitle: Text("Mathematician"),
trailing: Icon(Icons.chevron_right),
)The Problem with Long Lists
A plain ListView builds every child up front. For hundreds of items this wastes memory and slows startup. We need lazy building.
ListView.builder
ListView.builder creates items on demand as they scroll into view, so only visible rows exist in memory.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)itemCount and itemBuilder
itemCount tells Flutter how many rows exist; itemBuilder is called with each index to build that row. Omitting itemCount makes an infinite list.
Adding Separators
ListView.separated inserts a divider widget between items, keeping spacing consistent.
ListView.separated(
itemCount: items.length,
itemBuilder: (c, i) => ListTile(title: Text(items[i])),
separatorBuilder: (c, i) => Divider(),
)Horizontal Lists
Set scrollDirection: Axis.horizontal to scroll sideways, useful for carousels and chip rows.
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: tags.length,
itemBuilder: (c, i) => Chip(label: Text(tags[i])),
)Lists Inside Columns
A ListView wants unbounded height, which conflicts with a Column. Wrap it in Expanded to give it the remaining space.
Column(
children: [
Text("Header"),
Expanded(
child: ListView.builder(...),
),
],
)Handling Taps
Make rows interactive with onTap on a ListTile or by wrapping items in GestureDetector/InkWell.
ListTile(
title: Text(items[index]),
onTap: () => print("Tapped " + items[index]),
)Putting It Together
Use ListView.builder for performance, ListTile for clean rows, separated for dividers, and wrap in Expanded inside columns.
Quick Check
Test your understanding of Flutter lists.
Recap
You built scrollable lists:
ListViewfor short fixed listsListView.builderfor efficient long listsListTilerows andseparateddividers- Wrap in
Expandedinside aColumn
Aprende Dart con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 88
Preguntas frecuentes
¿La lección «Creación de listas desplazables con ListView» es gratis?
Sí — el texto completo de «Creación de listas desplazables con ListView» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de listas desplazables con ListView»?
Muestre colecciones desplazables de forma eficiente en Flutter mediante ListView, ListView.builder y separadores de elementos. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Flutter Mobile Development?
No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Creación de listas desplazables con ListView»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?
Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Widgets Stateless frente a Stateful
- Widgets básicos de diseño
- Elementos interactivos de la interfaz
- Creación de listas desplazables con ListView