Tirer pour actualiser

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

Sur un téléphone, on fait glisser une liste vers le bas pour l’actualiser. Un indicateur de chargement apparaît en haut, et les données sont mises à jour. Le widget Flutter correspondant est RefreshIndicator :

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

onRefresh est une fonction qui renvoie un Future. L’indicateur de chargement reste affiché jusqu’à ce que cette future soit terminée ; il faut donc await les nouvelles données à l’intérieur :

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

Le geste de glissement ne fonctionne que sur un élément défilable. Place le contenu dans un ListView, même s’il ne contient qu’un seul élément : un ListView peut toujours être tiré vers le bas. L’indicateur de chargement signale déjà que l’application travaille ; le constructeur peut donc conserver l’ancienne astuce avec une vérification de hasData.

Défi

Moyen

Fais recharger l’astuce lorsque tu fais glisser l’écran vers le bas :

ajoute une méthode refresh qui définit un nouveau _tip dans setState et l’attend
encapsule le corps dans un RefreshIndicator avec onRefresh: refresh
place le FutureBuilder dans une ListView à l’intérieur

Dans l’aperçu, fais glisser l’écran vers le bas avec la souris.

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