הכירו את 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)),
      ),
    );
  }
}