Lo stato di errore di FutureBuilder

Fa parte della sezione Dati e rete del percorso Flutter di Coddy. Lezione 13 di 27.

FutureBuilder intercetta gli errori per te. Quando il suo future genera un errore, non si verifica alcun arresto anomalo: il builder viene eseguito di nuovo con snapshot.hasError impostato su true e snapshot.error contiene ciò che ha generato l'errore.

In questo modo ogni schermata di caricamento ha tre stati, che il builder gestisce tutti:

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

Errore, dati e, in caso contrario, caricamento ancora in corso. Un builder che conosce solo i dati mostra lo spinner all'infinito quando la chiamata non va a buon fine, perché non ci sono mai dati.

Inserisci ogni controllo prima del return che lo nasconderebbe. Se il return dello spinner per "nessun dato" viene prima, la riga dell'errore sottostante non potrà mai essere eseguita.

Per vedere l'errore nell'anteprima, scrivi offline = true; come prima riga di main e premi Run. offline proviene da api.dart: fa fallire ogni chiamata come se il telefono non avesse segnale. Rimuovi la riga prima di premere Check.

Sfida

Medio

Senza connessione, questa schermata continua a caricare all’infinito. Imposta lo stato di errore nel builder: quando snapshot.hasError, mostra Could not load: seguito da snapshot.error, con dimensione 20.

Provalo tu

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