Mobile

20 mai, 2019

Flutter: lista básica com ListView – Parte 01

100 visualizações
Publicidade

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.