زر للمحاولة مجددًا

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

تعود الاتصالات. لا تترك شاشة الخطأ الجيدة الشخص عالقًا؛ بل توضّح ما حدث وتتيح له المحاولة مرة أخرى.

المحاولة مرة أخرى تعني إعادة التحميل: أنشئ مستقبلاً جديدًا في setState، تمامًا كما يفعل زر التحديث.

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

هناك تفصيل واحد. أثناء تشغيل المستقبل الجديد، تحتفظ اللقطة بالخطأ الأخير، كما تحتفظ بالبيانات القديمة: تظل hasError بقيمة true حتى وصول الإجابة الجديدة. لعرض مؤشر التحميل أثناء المحاولة الثانية، تحقّق أولًا من snapshot.connectionState:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // الخطأ والزر
}
return Text(snapshot.data!);

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

التحدي

متوسط

أضف طريقة للخروج من حالة الخطأ:

أضف زر حاول مرة أخرى أسفل نص الخطأ
يؤدي الضغط عليه إلى تعيين fetch('/message') جديد داخل setState
يظهر مؤشر التحميل أثناء إعادة المحاولة: تحقّق أولًا من ConnectionState.waiting في الدالة البانية

جرّب بنفسك

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