משיכה לרענון

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

בטלפון, אנשים מושכים רשימה כלפי מטה כדי לטעון אותה מחדש. סמן טעינה מסתובב מופיע מלמעלה, והנתונים מתעדכנים. הרכיב של Flutter שמיועד לכך הוא RefreshIndicator:

RefreshIndicator(
  onRefresh: refresh,
  child: ListView(
    children: [ ... ],
  ),
)

onRefresh היא פונקציה שמחזירה Future. סמן הטעינה שמופיע במשיכה נשאר עד שהעתיד הזה מסתיים, לכן יש להשתמש ב-await כדי להמתין לנתונים החדשים בתוכה:

Future<void> refresh() async {
  setState(() {
    _tip = fetch('/tip');
  });
  await _tip;
}

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

אתגר

בינוני

גרום לטיפ להיטען מחדש כשמושכים את המסך כלפי מטה:

הוסף שיטת refresh שמגדירה _tip חדש בתוך setState וממתינה לו
עטוף את גוף המסך ב-RefreshIndicator עם onRefresh: refresh
שים בתוכו את FutureBuilder בתוך ListView

בתצוגה המקדימה, גרור את המסך כלפי מטה בעזרת העכבר.

נסו בעצמכם

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