Um botão para tentar novamente

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

As conexões voltam. Uma boa tela de erro não deixa a pessoa sem saída: ela diz o que aconteceu e oferece uma maneira de tentar novamente.

Tentar novamente é recarregar: crie um novo futuro em setState, da mesma forma que um botão de atualizar.

void tryAgain() {
  setState(() {
    _message = fetch('/message');
  });
}

Um detalhe. Enquanto o novo futuro é executado, o snapshot mantém o último erro, assim como mantém os dados antigos: hasError continua true até a nova resposta chegar. Para mostrar o indicador de carregamento durante a segunda tentativa, verifique primeiro snapshot.connectionState:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // o erro e o botão
}
return Text(snapshot.data!);

Para vê-lo falhar na prévia, escreva offline = true; como a primeira linha de main e pressione Executar. offline vem de api.dart: ele faz todas as chamadas falharem como se o telefone estivesse sem sinal. Remova essa linha antes de pressionar Verificar.

Desafio

Médio

Dê uma saída para o estado de erro:

abaixo do texto de erro, adicione um botão Tentar novamente
ao pressioná-lo, defina um novo fetch('/message') em setState
o indicador de carregamento aparece enquanto tenta novamente: verifique primeiro ConnectionState.waiting no builder

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: FutureBuilder<String>(
          future: _message,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text(
                'Could not load: ${snapshot.error}',
                style: const TextStyle(fontSize: 20),
              );
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}