Flutter - Lista básica com ListView - I

Hoje veremos como podemos 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 esta tarefa.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

O Widget ListView é uma lista rolável de widgets organizados linearmente, sendo um dos widget de rolagem mais usado.

Ele exibe seus filhos um após o outro na direção da rolagem; sendo que no eixo cruzado, os filhos são obrigadas 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 3 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 tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project



A seguir informe o nome do projeto : flutter_lista1 e tecle 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), defindindo um appBar e um body. No body definimos o ListView usando como filhos(chilren) o widget ListTile com um ícone eum texto.

Para executar, no VS Code, no modo Debug, 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.

"Todas as coisas são puras para os puros, mas nada é puro para os contaminados e infiéis; antes o seu entendimento e consciência estão contaminados.
Confessam que conhecem a Deus, mas negam-no com as obras, sendo abomináveis, e desobedientes, e reprovados para toda a boa obra."
Tito 1:15,16

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti