טעינה מחדש של נתונים באמצעות כפתור

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

כדי לטעון נתונים עדכניים, יש לתת ל־FutureBuilder עתיד חדש. יוצרים אותו בתוך setState, כדי שהמסך ייבנה מחדש איתו:

IconButton(
  icon: const Icon(Icons.refresh),
  onPressed: () {
    setState(() {
      _tip = fetch('/tip');
    });
  },
)

הטיפ החדש מגיע כעבור 2 שניות. בזמן שהוא נטען, snapshot.hasData נשאר true: הבונה ממשיך להציג את הנתונים הישנים עד שהנתונים החדשים מחליפים אותם. בבדיקה של hasData, הטיפ הישן נשאר על המסך, ולא מופיע שום סימן לכך שהאפליקציה פועלת.

כדי להציג שוב את מחוון הטעינה, בודקים את snapshot.connectionState, שמציין באיזה מצב נמצא העתיד כרגע. הערך הוא ConnectionState.waiting כל עוד העתיד מתבצע, ו־ConnectionState.done כשהוא הסתיים:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
return Text(snapshot.data!);

לאחר שהוא מסתיים, הנתונים זמינים, ולכן השימוש ב־snapshot.data! בטוח.

אתגר

בינוני

הוסיפו כפתור רענון שטוען את הרמז הבא:

IconButton עם Icons.refresh ב-actions של הסרגל העליון
לחיצה עליו מגדירה את _tip לערך חדש של fetch('/tip') בתוך setState
הסמן המסתובב מוצג בזמן טעינת הרמז החדש: בדקו את snapshot.connectionState

נסו בעצמכם

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

class TipScreen extends StatefulWidget {
  const TipScreen({super.key});

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}