Criando Listas Roláveis com ListView
Exiba coleções roláveis com eficiência no Flutter usando ListView, ListView.builder e separadores de itens.
Criando Listas Roláveis com ListView é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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
Aprenda Dart com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 22
- Aulas
- 88
Perguntas Frequentes
A aula “Criando Listas Roláveis com ListView” é grátis?
Sim — o texto completo de “Criando Listas Roláveis com ListView” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.
O que vou aprender em “Criando Listas Roláveis com ListView”?
Exiba coleções roláveis com eficiência no Flutter usando ListView, ListView.builder e separadores de itens. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Flutter Mobile Development?
Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Criando Listas Roláveis com ListView”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Flutter Mobile Development?
Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Widgets sem estado versus com estado
- Widgets básicos de layout
- Elementos interativos da interface
- Criando Listas Roláveis com ListView