Conheça o FutureBuilder

Parte da seção Dados e rede do Journey de Flutter da Coddy. Lição 6 de 27.

A maioria das telas carrega seus dados assim que são abertas, sem nenhum botão. Flutter tem um widget para mostrar um futuro: FutureBuilder. Você fornece o futuro, e ele reconstrói a tela cada vez que o estado do futuro muda.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

O snapshot mostra como está o futuro neste momento. Antes de a resposta chegar, snapshot.hasData é false, então o indicador de carregamento aparece. Quando ela chega, o builder é executado novamente e snapshot.data contém a string.

snapshot.data tem o tipo String?: uma string ou null, porque não há dados no início. O ! depois dele significa “verifiquei, não é null”. Use-o somente depois de hasData: se for null, o app trava.

O código inicial já cria o futuro uma vez, em initState, que é executado quando a tela é aberta. late informa ao Dart que a variável recebe seu valor ali, antes de ser usada. A próxima lição mostra por que ele fica ali.

Desafio

Médio

O app carrega a mensagem em initState, mas nunca a exibe. Substitua o Text provisório por um FutureBuilder<String> para _message:

um CircularProgressIndicator enquanto carrega
a mensagem, no tamanho 24, quando ela chegar

Experimente você mesmo

import 'package:flutter/material.dart';

import 'api.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}