تعرّف على FutureBuilder

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

تُحمِّل معظم الشاشات بياناتها لحظة فتحها، من دون زر. لدى Flutter عنصر واجهة مستخدم لعرض نتيجة مستقبلية: FutureBuilder. مرِّر إليه النتيجة المستقبلية، وسيُعيد بناء الشاشة في كل مرة تتغير فيها حالة النتيجة المستقبلية.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

يمثّل snapshot حالة النتيجة المستقبلية في الوقت الحالي. قبل وصول الإجابة، تكون قيمة snapshot.hasData هي false، لذا يظهر مؤشر التحميل. وعندما تصل الإجابة، تُنفَّذ دالة البناء مجددًا، وتحتوي snapshot.data على السلسلة النصية.

نوع snapshot.data هو String?: إما سلسلة نصية أو null، لأنه لا توجد بيانات في البداية. تعني ! التي تليها: «تحققتُ من أن القيمة ليست null». استخدمها فقط بعد hasData: فإذا كانت القيمة null، فسيتعطل التطبيق.

ينشئ المشروع التمهيدي النتيجة المستقبلية مرة واحدة بالفعل، في initState، التي تُنفَّذ عند فتح الشاشة. تخبر late Dart أن المتغير سيحصل على قيمته هناك، قبل استخدامه. يوضح الدرس التالي سبب وجوده هناك.

التحدي

متوسط

يحمّل التطبيق الرسالة في initState لكنه لا يعرضها أبدًا. استبدل العنصر النائب Text بـ FutureBuilder<String> لـ _message:

مؤشر CircularProgressIndicator أثناء التحميل
الرسالة بحجم 24 عند وصولها

جرّب بنفسك

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: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}