Eine Erneut-versuchen-Schaltfläche

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

Verbindungen kommen zurück. Ein guter Fehlerbildschirm lässt die Person nicht im Stich: Er sagt, was passiert ist, und bietet eine Möglichkeit, es erneut zu versuchen.

Erneut zu versuchen bedeutet, neu zu laden: Erstelle in setState ein neues Future, genauso wie bei einer Aktualisierungsschaltfläche.

void tryAgain() {
  setState(() {
    _message = fetch('/message');
  });
}

Ein Detail. Während das neue Future ausgeführt wird, behält der Snapshot den letzten Fehler, so wie er alte Daten behält: hasError bleibt true, bis die neue Antwort eintrifft. Um beim zweiten Versuch den Ladeindikator anzuzeigen, prüfe zuerst snapshot.connectionState:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // der Fehler und die Schaltfläche
}
return Text(snapshot.data!);

Um den Fehler in der Vorschau zu sehen, schreibe offline = true; als erste Zeile von main und drücke auf „Run“. offline stammt aus api.dart: Es lässt jeden Aufruf fehlschlagen, als hätte das Telefon keinen Empfang. Entferne die Zeile, bevor du auf „Check“ drückst.

Aufgabe

Mittel

Gib dem Fehlerzustand einen Ausweg:

Füge unter dem Fehlertext eine Schaltfläche Erneut versuchen hinzu
Beim Drücken wird in setState ein neuer Aufruf von fetch('/message') gesetzt
Während des erneuten Versuchs wird der Spinner angezeigt: Prüfe im Builder zuerst ConnectionState.waiting

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.hasError) {
              return Text(
                'Could not load: ${snapshot.error}',
                style: const TextStyle(fontSize: 20),
              );
            }
            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