Recharger les données avec un bouton

Fait partie de la section Données et réseau du Journey Flutter de Coddy. Leçon 8 sur 27.

Pour charger des données à jour, donnez un nouvel avenir à FutureBuilder. Créez-le dans setState, afin que l’écran se reconstruise avec celui-ci :

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

La nouvelle astuce arrive 2 secondes plus tard. Pendant son chargement, snapshot.hasData reste à true : le constructeur conserve les anciennes données jusqu’à ce que les nouvelles les remplacent. Avec une vérification de hasData, l’ancienne astuce reste affichée à l’écran et rien n’indique que l’application est en cours d’exécution.

Pour afficher à nouveau l’indicateur de chargement, vérifiez snapshot.connectionState, qui indique où en est l’avenir. Il vaut ConnectionState.waiting pendant qu’un avenir s’exécute et ConnectionState.done lorsqu’il est terminé :

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

Une fois terminé, les données sont disponibles, donc snapshot.data! est sûr.

Défi

Moyen

Ajoute un bouton d’actualisation qui charge le conseil suivant :

un IconButton avec Icons.refresh dans actions de la barre supérieure
lorsqu’on appuie dessus, _tip reçoit un nouveau fetch('/tip') dans setState
le chargement s’affiche pendant le chargement du nouveau conseil : vérifie snapshot.connectionState

Essayez vous-même

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