إعادة تحميل البيانات بزر

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

لتحميل بيانات جديدة، امنح FutureBuilder مستقبلًا جديدًا. أنشئه داخل setState، لكي يُعاد بناء الشاشة باستخدامه:

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

تصل النصيحة الجديدة بعد ثانيتين. وأثناء تحميلها، تظل 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();
              },
            ),
        ),
      ),
    );
  }
}