Der Fehlerzustand von FutureBuilder

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 13 von 27.

Ein FutureBuilder fängt Fehler für dich ab. Wenn sein Future einen Fehler auslöst, stürzt nichts ab: Der Builder wird erneut ausgeführt, wobei snapshot.hasError auf true gesetzt ist und snapshot.error den ausgelösten Fehler enthält.

Dadurch hat jeder Ladebildschirm drei Zustände, und der Builder behandelt jeden davon:

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

Fehler, Daten und andernfalls weiterhin laden. Ein Builder, der nur Daten kennt, zeigt den Ladekreisel für immer an, wenn der Aufruf fehlschlägt, denn es gibt dann keine Daten.

Führe jede Prüfung vor dem return aus, das sie andernfalls überspringen würde. Wenn das return des Ladekreisels für „keine Daten“ zuerst kommt, kann die Fehlerzeile darunter nie ausgeführt werden.

Damit der Fehler in der Vorschau auftritt, schreibe offline = true; als erste Zeile in main und drücke auf „Run“. offline stammt aus api.dart: Dadurch schlägt jeder Aufruf fehl, als hätte das Telefon kein Signal. Entferne die Zeile, bevor du auf „Check“ drückst.

Aufgabe

Mittel

Ohne Verbindung dreht sich dieser Bildschirm endlos. Gib dem Builder seinen Fehlerzustand: Wenn snapshot.hasError zutrifft, zeige Could not load: gefolgt von snapshot.error in der Größe 20 an.

Probier es selbst

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler