Stan błędu w FutureBuilder

Część sekcji Dane i sieć ścieżki Flutter w Coddy. Lekcja 13 z 27.

FutureBuilder przechwytuje błędy. Gdy jego future zgłosi wyjątek, nic się nie zawiesza: builder uruchamia się ponownie z snapshot.hasError ustawionym na true, a snapshot.error przechowuje to, co zostało zgłoszone.

Każdy ekran ładowania ma dzięki temu trzy stany, a builder obsługuje każdy z nich:

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

Błąd, dane, a w pozostałych przypadkach — wciąż trwa ładowanie. Builder, który obsługuje tylko dane, wyświetla spinner bez końca, gdy wywołanie się nie powiedzie, ponieważ nie pojawią się żadne dane.

Umieść każde sprawdzenie przed instrukcją return, która mogłaby je pominąć. Jeśli return spinnera dla sytuacji „brak danych” pojawi się jako pierwszy, linia obsługi błędu poniżej nigdy się nie wykona.

Aby zobaczyć błąd w podglądzie, wpisz offline = true; jako pierwszą linię w main i naciśnij Run. offline pochodzi z api.dart: powoduje, że każde wywołanie kończy się niepowodzeniem, tak jakby telefon nie miał zasięgu. Usuń tę linię, zanim naciśniesz Check.

Wyzwanie

Średni

Bez połączenia ten ekran kręci się bez końca. Ustaw stan błędu buildera: gdy snapshot.hasError, pokaż Could not load: , a po nim snapshot.error, w rozmiarze 20.

Spróbuj swoich sił

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