Flutter: Renderizando Listas Dinâmicas com o Widget DataTable

Introdução ao DataTable no Flutter para Listas

Apresentar dados de forma tabular é uma necessidade comum em muitas aplicações, desde painéis administrativos a listas de produtos. No universo do Flutter, o widget DataTable surge como uma solução robusta e nativa para essa tarefa. Embora poderoso, renderizar dados dinâmicos, especialmente provenientes de uma lista (como uma List<Map<String, dynamic>> obtida de uma API), pode parecer desafiador inicialmente. Este artigo explora como exibir eficientemente uma lista de dados utilizando o DataTable no Flutter, focando na clareza e na estrutura correta.

Estrutura Fundamental do DataTable

O widget DataTable organiza os dados em colunas e linhas, semelhante a uma planilha ou tabela HTML. Seus principais componentes são:

• columns: Recebe uma lista de widgets DataColumn. Cada DataColumn define o cabeçalho de uma coluna, geralmente contendo um widget Text para exibir o título.
• rows: Recebe uma lista de widgets DataRow. Cada DataRow representa uma linha na tabela e contém uma lista de widgets DataCell, correspondendo aos dados de cada coluna para aquela linha específica.

A chave para exibir uma lista dinâmica é gerar essas DataRows programaticamente a partir dos seus dados.

Preparando Seus Dados em Dart

Frequentemente, os dados que você deseja exibir em uma tabela vêm de fontes externas, como APIs REST, e são estruturados como uma lista de mapas em Dart. Um formato comum é List<Map<String, dynamic>>, onde cada mapa representa uma linha e as chaves do mapa correspondem às colunas.

Exemplo de estrutura de dados:

List<Map<String, dynamic>> meusDados = [
  {'id': 1, 'nome': 'Produto A', 'preco': 19.99},
  {'id': 2, 'nome': 'Produto B', 'preco': 25.50},
  {'id': 3, 'nome': 'Produto C', 'preco': 12.00},
];

Implementando a Renderização da Lista no DataTable

Definindo as Colunas (DataColumn)

Primeiro, defina as colunas da sua tabela. Os rótulos (labels) das DataColumn devem corresponder à natureza dos dados que você exibirá. Baseado no exemplo acima, as colunas seriam 'ID', 'Nome' e 'Preço'.

columns: const [
  DataColumn(label: Text('ID')),
  DataColumn(label: Text('Nome')),
  DataColumn(label: Text('Preço')),
],

Gerando as Linhas Dinamicamente (DataRow) a partir da Lista

Este é o núcleo da renderização dinâmica. Você precisa iterar sobre sua lista de dados (meusDados, no exemplo) e, para cada item (mapa) na lista, criar uma DataRow. A propriedade cells de cada DataRow receberá uma lista de DataCell, onde cada célula conterá o valor correspondente do mapa.

A maneira mais idiomática em Dart para fazer isso é usar o método .map() na lista:

rows: meusDados.map(
  (item) => DataRow(
    cells: [
      DataCell(Text(item['id'].toString())),
      DataCell(Text(item['nome'].toString())),
      DataCell(Text(item['preco'].toString())),
    ],
  ),
).toList(), // Não esqueça de converter o resultado para uma Lista

Dentro de cada DataCell, acessamos o valor correspondente no mapa (item['id'], item['nome'], item['preco']) e o exibimos, geralmente dentro de um widget Text. É importante converter os valores para String, se necessário (como no caso de 'id' e 'preco').

Considerações sobre Estado

Se a lista de dados puder mudar ao longo do tempo (por exemplo, ser carregada de uma API ou atualizada pelo usuário), é crucial que o widget que contém o DataTable seja um StatefulWidget. As alterações na lista de dados devem ser feitas dentro de um `setState(() { ... })` para que o Flutter reconstrua a interface do usuário e o DataTable reflita os novos dados.

Benefícios e Casos de Uso do DataTable com Listas

Utilizar o DataTable para renderizar listas oferece uma apresentação clara e organizada, ideal para:

• Exibir listas de usuários ou clientes.
• Mostrar catálogos de produtos com detalhes.
• Apresentar relatórios simples ou logs.
• Qualquer cenário onde dados estruturados precisam ser visualizados em formato de tabela.

Ele fornece uma base sólida que pode ser personalizada com recursos adicionais como ordenação, paginação ou seleção de linhas, dependendo das necessidades da aplicação.

Conclusão

Renderizar uma lista dinâmica de dados em um DataTable no Flutter é uma tarefa direta quando se compreende a estrutura básica do widget e como mapear os dados da lista para DataRows e DataCells. Ao definir corretamente as DataColumns e gerar as DataRows a partir da sua fonte de dados (como uma List<Map<String, dynamic>>), você pode criar interfaces tabulares informativas e eficazes para seus usuários Flutter.