Hoje vou 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, neste artigo 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.

Em seguida, 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 definimos o titulo, o tema e no home definimos o widget ListViewHorizontal que criaremos a seguir.

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

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.

Incluímos 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 modo Debug do VS Code, 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 neste link.