מצב השגיאה של FutureBuilder

חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 13 מתוך 27.

FutureBuilder תופס שגיאות בשבילך. כשה־future שלו זורק שגיאה, שום דבר לא קורס: ה־builder רץ שוב כאשר snapshot.hasError מוגדר ל־true, ו־snapshot.error מכיל את מה שנזרק.

כך לכל מסך טעינה יש שלושה מצבים, וה־builder מטפל בכל אחד מהם:

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

שגיאה, נתונים, ואחרת עדיין בטעינה. builder שמכיר רק נתונים יציג את סמן הטעינה לנצח כשהקריאה נכשלת, כי אין נתונים.

מקם כל בדיקה לפני ה־return שעלול להסתיר אותה. אם ה־return של סמן הטעינה מופיע קודם עבור "אין נתונים", שורת השגיאה שמתחתיו לעולם לא תרוץ.

כדי לראות את הכישלון בתצוגה המקדימה, כתוב offline = true; כשורה הראשונה של main ולחץ על Run. offline מגיע מ־api.dart: הוא גורם לכל קריאה להיכשל כאילו לטלפון אין קליטה. הסר את השורה לפני הלחיצה על Check.

אתגר

בינוני

ללא חיבור, המסך הזה ממשיך להסתובב לנצח. הציגו לבונה את מצב השגיאה שלו: כאשר snapshot.hasError, הציגו את Could not load: ואחריו את snapshot.error, בגודל 20.

נסו בעצמכם

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