Puxe para atualizar

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

No celular, as pessoas puxam uma lista para baixo para recarregá-la. Um indicador giratório aparece no topo, e os dados são atualizados. O widget do Flutter para isso é RefreshIndicator:

RefreshIndicator(
  onRefresh: refresh,
  child: ListView(
    children: [ ... ],
  ),
)

onRefresh é uma função que retorna um Future. O indicador giratório permanece visível até que essa tarefa assíncrona seja concluída, então use await para aguardar os novos dados dentro dela:

Future<void> refresh() async {
  setState(() {
    _tip = fetch('/tip');
  });
  await _tip;
}

O gesto de puxar só funciona em algo que possa ser rolado. Coloque o conteúdo em um ListView, mesmo quando houver apenas um item: sempre é possível puxar um ListView. O indicador giratório já informa que o app está trabalhando, então o construtor pode manter a dica antiga com uma verificação de hasData.

Desafio

Médio

Faça a dica carregar novamente ao puxar a tela para baixo:

adicione um método refresh que define um novo _tip em setState e aguarda sua conclusão
envolva o corpo em um RefreshIndicator com onRefresh: refresh
coloque o FutureBuilder em uma ListView dentro dele

Na prévia, arraste a tela para baixo com o mouse.

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