L’état d’erreur de FutureBuilder

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

Un FutureBuilder intercepte les erreurs pour toi. Lorsque son future lève une erreur, rien ne plante : le builder s’exécute à nouveau avec snapshot.hasError défini sur true, et snapshot.error contient ce qui a été levé.

Chaque écran de chargement a donc trois états, et le builder gère chacun d’eux :

if (snapshot.hasError) {
  return Text('Could not load: ${snapshot.error}');
}
if (snapshot.hasData) {
  return Text(snapshot.data!);
}
return const CircularProgressIndicator();

Erreur, données, et sinon toujours en cours de chargement. Un builder qui ne connaît que les données affiche indéfiniment l’indicateur de chargement lorsque l’appel échoue, car il n’y a alors jamais de données.

Place chaque vérification avant le return qui la masquerait. Si le return de l’indicateur de chargement vient en premier pour « aucune donnée », la ligne d’erreur située en dessous ne peut jamais s’exécuter.

Pour voir l’échec dans l’aperçu, écris offline = true; comme première ligne de main, puis appuie sur Run. offline vient de api.dart : cela fait échouer chaque appel comme si le téléphone n’avait pas de signal. Supprime cette ligne avant d’appuyer sur Check.

Défi

Moyen

Sans connexion, cet écran tourne indéfiniment. Donne à l’objet de construction son état d’erreur : lorsque snapshot.hasError, affiche Could not load: suivi de snapshot.error, avec une taille de 20.

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

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

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<String>(
          future: _message,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}