Hoje veremos como apresentar uma lista de dados usando o widget ListView do Flutter.
Exibir uma lista de dados é uma das tarefas básicas em aplicativos para celulares, e o Flutter inclui o Widget ListView, que torna muito fácil realizar essa tarefa.
Se você não conhece o Flutter, veja o meu artigo abaixo:
O Widget ListView é uma lista rolável de widgets organizados linearmente, sendo um dos widgets de rolagem mais usados.
Ele exibe seus filhos um após o outro na direção da rolagem, sendo que no eixo cruzado, os filhos são obrigados a preencher o ListView.
Se não for nulo, o itemExtent força os filhos a ter a determinada extensão na direção de rolagem. A especificação de um itemExtent é mais eficiente do que permitir que os filhos determinem sua própria extensão, pois o mecanismo de rolagem pode usar o conhecimento prévio da extensão dos filhos para economizar trabalho, por exemplo, quando a posição de rolagem muda drasticamente.
Existem quatro opções para construir um ListView:
- 1. O construtor padrão recebe uma List<Widget> explícita de filhos. Esse construtor é apropriado para exibições de lista com um pequeno número de filhos, pois a construção da Lista requer trabalho para cada filho que possa ser exibido na lista, em vez de apenas os filhos que estão realmente visíveis.
- 2. O construtor ListView.builder usa um IndexedWidgetBuilder, que cria os filhos sob demanda. Esse construtor é apropriado para exibições de lista com um número grande (ou infinito) de filhos, porque o construtor é chamado apenas para aqueles filhos que estão realmente visíveis.
- 3. O construtor ListView.separated usa dois IndexedWidgetBuilders: o itemBuilder cria itens filhos sob demanda, e o separatorBuilder também cria filhos separadores que aparecem entre os itens filhos. Esse construtor é apropriado para exibições de lista com um número fixo de filhos.
- 4. O construtor ListView.custom usa um SliverChildDelegate, que permite personalizar aspectos adicionais do modelo filho. Por exemplo, um SliverChildDelegate pode controlar o algoritmo usado para estimar o tamanho de filhos que não estão realmente visíveis.
Criando um ListView padrão
Vamos usar o construtor ListView padrão, que é perfeito para criar listas que contêm apenas alguns itens. Usaremos também o Widget ListTile integrado para dar aos nossos itens uma estrutura visual.
A seguir, a estrutura básica do código usado para criar uma lista com três itens:
ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Mapa'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Fone'),
),
],
);
Um ListTile contém de uma a três linhas de texto, opcionalmente flanqueadas por ícones ou outros widgets, como caixas de seleção. Os ícones ou outros widgets para um ListTile são definidos usando os parâmetros leading e trailing.
Criando o projeto Flutter
No Visual Studio Code, pressione Ctrl + Shift + P para abrir a paleta de comandos, e em seguida selecione a opção Fluter:New Project.
A seguir, informe o nome do projeto: flutter_lista1 e pressione Enter.
Na janela de diálogo a seguir, selecione a pasta onde o projeto vai ser salvo e clique em Select a folder to create the project in.
O Flutter vai criar um projeto padrão, onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.
Abra o arquivo main.dart e substitua o código gerado por padrão pelo código abaixo:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Lista Básica';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Mapa'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Álbum'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Fone'),
),
],
),
),
);
}
}
O construtor padrão ListView funciona bem para listas pequenas. Se quisermos trabalhar com listas que contenham o grande número de itens, é melhor usar o construtor ListView.builder.
Estamos usando o widget Scaffold que implementa a estrutura de layout visual de Material Design (MaterialApp), definindo um appBar e um body.
No body, definimos o ListView usando como filhos (chilren) o widget ListTile com um ícone e um texto.
Para executar, no modo debug do VS Code, pressione F5, ou na janela de comandos (cmd), posicione-se na pasta do projeto e digite o comando Flutter run
.
A figura acima mostra o resultado obtido.
No próxima parte do artigo veremos como criar um ListView Horizontal.