[Dúvida] Como usar o FutureBuilder para exibir dados assíncronos no Flutter?

Oii, estudante. Tudo bem?

O FutureBuilder é um widget do Flutter que constrói seu conteúdo com base no estado de um Future. Ele é útil para lidar com operações assíncronas, como buscar dados de uma API ou acessar um banco de dados.

Exemplo de Uso do FutureBuilder

Vamos criar um exemplo que busca dados de uma API fictícia e exibe os resultados em um ListView.

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Exemplo de FutureBuilder'),
        ),
        body: Center(
          child: DataFetcher(),
        ),
      ),
    );
  }
}

class DataFetcher extends StatelessWidget {
  // Simula uma operação assíncrona, como buscar dados de uma API
  Future<List<String>> fetchData() async {
    await Future.delayed(Duration(seconds: 2)); // Simula um atraso
    return ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<String>>(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // Exibe um indicador de carregamento enquanto os dados estão sendo buscados
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          // Exibe uma mensagem de erro se ocorrer algum problema
          return Text('Erro: ${snapshot.error}');
        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
          // Exibe uma mensagem se não houver dados
          return Text('Nenhum dado encontrado');
        } else {
          // Exibe os dados em um ListView
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data![index]),
              );
            },
          );
        }
      },
    );
  }
}

Explicação

1. Criação de um Future: A função fetchData simula uma operação assíncrona que busca dados. Ela simplesmente retorna uma lista de strings após um atraso de 2 segundos para simular a latência da rede.

2. Uso do FutureBuilder: O FutureBuilder leva dois parâmetros principais:

   • future: O Future que está sendo aguardado.
   • builder: Uma função que constrói o widget com base no estado do Future.

3. Estados do FutureBuilder: Dentro do builder, o estado do Future é verificado usando snapshot.connectionState:

   • ConnectionState.waiting: Enquanto o Future está em andamento, um CircularProgressIndicator é exibido.
   • snapshot.hasError: Se ocorrer um erro durante a operação, uma mensagem de erro é exibida.
   • snapshot.hasData: Quando os dados são retornados com sucesso, eles são exibidos em um ListView.

4. ListView.builder: Se os dados são recebidos com sucesso, um ListView.builder é usado para exibir a lista de itens. O itemBuilder cria um ListTile para cada item na lista.

Com esse padrão, você pode lidar facilmente com operações assíncronas no Flutter, garantindo que seu aplicativo permaneça responsivo e forneça feedback apropriado ao usuário durante o carregamento dos dados.

Espero ter ajudado.

Um abraço e bons estudos.