Flutter - Lista básica com ListView - II

Hoje vamos continuar a apresentar o widget ListView do Flutter para criar listas básicas com poucos elementos.

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

Continuando a primeira parte do artigo hoje vamos criar uma lista horizontal usando o widget ListView do Flutter.

Criando uma lista horizontal com ListView

Vamos usar o construtor ListView padrão que é perfeito para criar listas que contêm apenas alguns itens, e, desta vez vamos criar uma lista que rola horizontalmente.

Para fazer isso vamos usar a propriedade scrollDirection que define o eixo ao longo do qual a lista rola. O valor padrão é Axis.vertical.

A seguir a estrutura básica do código usado para criar uma lista com cores que rola horizontalmente:

ListView(
  // Aqui definimos a rolagem horizontal.
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(
      width: 160.0,
      color: Colors.red,
    ),
    Container(
      width: 160.0,
      color: Colors.blue,
    ),
    Container(
      width: 160.0,
      color: Colors.green,
    ),
    Container(
      width: 160.0,
      color: Colors.yellow,
    ),
    Container(
      width: 160.0,
      color: Colors.orange,
    ),
  ],
)

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_lista 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 Horizontal';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160.0,
                color: Colors.red,
              ),
              Container(
                width: 160.0,
                color: Colors.blue,
              ),
              Container(
                width: 160.0,
                color: Colors.green,
              ),
              Container(
                width: 160.0,
                color: Colors.yellow,
              ),
              Container(
                width: 160.0,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  

Estamos definindo um Container cujo filho é um ListView com scrollDirection igual a Axis.Horizontal e no ListView definimos como filhos (children) cinco widgets Container onde definimos a largura(width) e a cor.

Ao lado temos a figura com o resultado obtido na execução.

Vejamos outro exemplo onde agora vamos exibir strings em uma lista horizontal.

Crie outro projeto Flutter chamado flutter_lista_horizontal;

Vamos abrir o arquivo main.dart e aproveitar a definição da classe MyApp alterando o seu código e removendo o restante do código.

O código do arquivo main.dart deve ficar assim:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ListView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListViewHorizontal(),
    );
  }
}

Usamos o MaterialApp e definimo o titulo, o tema e no home definimos o widget ListViewHorizontal que iremos criar a seguir.

Ainda no arquivo main.dart inclua a seguir o código do widget ListViewHorizontal conforme mostrato a seguir:

class ListViewHorizontal extends StatelessWidget {
  final List<String> _alfabeto = [
    "A","B","C","D","E","F","G","H","I","J","K",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Exemplo de ListView Horizontal'),
      ),
      body: Center(
        child: ListView(
          padding: EdgeInsets.all(10.0),
          scrollDirection: Axis.horizontal,
          children: _alfabeto
              .map((data) => CircleAvatar(
                    minRadius: 50.0,
                    backgroundColor: Colors.red,
                    child: Text(data,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 19.0,
                        )),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

A widget ListViewHorizontal estende StatelessWidget e define um Scaffold com AppBar.

Inicialmente definimos uma lista de strings chamada _alfabeto com algumas strings.

Usamos a widget Center para centralizar a exibição e definimos como seu filho um ListView.

Incluimos um widget padding onde definimos um preenchimento e definimos o scroll horizontal.

Definimos a lista de strings _alfabeto como filhos da ListView e usamos o método map da lista (list.map) que  retorna um novo Iterable com elementos que são criados chamando f em cada elemento deste Iterable em ordem de iteração.

Aqui estamos aplicando o widget CircleAvatar que é um círculo que representa um usuário sendo normalmente usado com a imagem de perfil de um usuário ou, na ausência de tal imagem, as iniciais do usuário. Neste widget definimos o raio, a cor e um texto como filho com fonte e cor definidas.

Para executar, no VS Code, no modo Debug, pressione F5.

Na janela de comandos (cmd), posicione-se na pasta do projeto e digite o comando:  Flutter run

Abaixo vemos o resultado obtido:

No próxima parte do artigo veremos como criar um ListView para exibir um grande número de itens.

Pegue o código do arquivo main.dart aqui :  main_lista_horizontal.zip

"E, quanto fizerdes por palavras ou por obras, fazei tudo em nome do Senhor Jesus, dando por ele graças a Deus Pai."
Colossenses 3:17

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