Recarregue os dados com um botão

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

Para carregar dados atualizados, forneça um novo future ao FutureBuilder. Crie-o em setState, para que a tela seja reconstruída com ele:

IconButton(
  icon: const Icon(Icons.refresh),
  onPressed: () {
    setState(() {
      _tip = fetch('/tip');
    });
  },
)

A nova dica chega 2 segundos depois. Enquanto ela carrega, snapshot.hasData permanece true: o builder mantém os dados antigos até que novos dados os substituam. Com uma verificação de hasData, a dica antiga permanece na tela e nada indica que o app está trabalhando.

Para mostrar o indicador de carregamento novamente, consulte snapshot.connectionState, que indica em que estado o futuro está no momento. Ele é ConnectionState.waiting enquanto um futuro está em execução e ConnectionState.done quando termina:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
return Text(snapshot.data!);

Quando termina, os dados estão disponíveis, então snapshot.data! é seguro.

Desafio

Médio

Adicione um botão de atualização que carrega a próxima dica:

um IconButton com Icons.refresh em actions da barra superior
ao pressioná-lo, _tip recebe um novo fetch('/tip') em setState
o indicador de carregamento aparece enquanto a nova dica carrega: verifique snapshot.connectionState

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: TipScreen(),
    );
  }
}

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

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}