Ricaricare i dati con un pulsante

Fa parte della sezione Dati e rete del percorso Flutter di Coddy. Lezione 8 di 27.

Per caricare dati aggiornati, assegna a FutureBuilder un nuovo future. Crealo in setState, così la schermata viene ricostruita con esso:

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

Il nuovo suggerimento arriva 2 secondi dopo. Mentre viene caricato, snapshot.hasData rimane true: il builder mantiene i dati precedenti finché non vengono sostituiti da quelli nuovi. Con un controllo su hasData, il vecchio suggerimento rimane sullo schermo e non viene mostrato che l’app è in caricamento.

Per mostrare di nuovo l’indicatore di caricamento, controlla snapshot.connectionState, che indica a che punto è il future. Vale ConnectionState.waiting mentre un future è in esecuzione e ConnectionState.done quando è terminato:

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

Una volta terminato, i dati sono disponibili, quindi snapshot.data! è sicuro.

Sfida

Medio

Aggiungi un pulsante di aggiornamento che carica il suggerimento successivo:

un IconButton con Icons.refresh nelle actions della barra superiore
premendolo, imposta _tip su un nuovo fetch('/tip') in setState
lo spinner viene mostrato mentre si carica il nuovo suggerimento: controlla snapshot.connectionState

Provalo tu

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