حالة الخطأ في FutureBuilder

جزء من قسم البيانات والشبكة في رحلة Flutter على Coddy. الدرس 13 من 27.

يتولى FutureBuilder التقاط الأخطاء نيابةً عنك. عندما تُصدر المستقبل خطأً، لا يتعطل شيء: يُشغَّل المنشئ مرة أخرى مع ضبط snapshot.hasError على true، ويحتوي snapshot.error على ما أُصدر.

وهذا يمنح كل شاشة تحميل ثلاث حالات، ويتعامل المنشئ مع كل واحدة منها:

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

خطأ، وبيانات، وإلا فالحالة ما تزال قيد التحميل. المنشئ الذي لا يعرف إلا البيانات يعرض مؤشر التحميل إلى الأبد عندما يفشل الاستدعاء، لأنه لا تتوفر أي بيانات.

ضع كل عملية تحقق قبل عبارة return التي ستخفيها. إذا جاءت عبارة return الخاصة بمؤشر التحميل أولًا لحالة «لا توجد بيانات»، فلن يُنفَّذ سطر الخطأ الذي يليها أبدًا.

لمشاهدة الفشل في المعاينة، اكتب offline = true; في السطر الأول من main واضغط «تشغيل». يأتي offline من api.dart: فهو يجعل كل استدعاء يفشل كما لو أن الهاتف لا يلتقط أي إشارة. أزل هذا السطر قبل أن تضغط «تحقّق».

التحدي

متوسط

عند انقطاع الاتصال، تظل هذه الشاشة تدور إلى الأبد. أضف إلى المنشئ حالة الخطأ: عندما تكون 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();
          },
        ),
      ),
    );
  }
}