قيمة تصل لاحقًا

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

حتى الآن، كان كل شيء في تطبيقاتك يحدث دفعة واحدة: تضغط على زر، فتتغير الشاشة. غالبًا ما تنتظر التطبيقات الحقيقية. فهي تنتظر ردّ الخادم، أو تحميل ملف، أو انتهاء مؤقّت.

تسمّي Dart القيمة التي لم تصبح متاحة بعد Future. وأبسطها هي Future.delayed: فهي تنتظر مدة Duration، ثم تشغّل الدالة التي تمرّرها إليها.

Future.delayed(const Duration(seconds: 2), () {
  setState(() {
    message = 'Done';
  });
});

لا يتجمّد تطبيقك أثناء الانتظار. تواصل الشاشة الرسم، وتظل الأزرار تعمل. وعندما تنقضي الثانيتان، تشغّل Dart الدالة، ويعيد setState رسم الشاشة بالرسالة الجديدة.

التحدي

سهل

يؤدي النقر على Boil water إلى عرض Tea is ready فورًا. يحتاج الماء إلى وقت. اجعل الرسالة تتغير بعد 3 seconds من النقر، باستخدام Future.delayed.

جرّب بنفسك

import 'package:flutter/material.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: TeaScreen(),
    );
  }
}

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

  @override
  State<TeaScreen> createState() => _TeaScreenState();
}

class _TeaScreenState extends State<TeaScreen> {
  String message = 'The water is cold';

  void boil() {
    setState(() {
      message = 'Tea is ready';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: boil, child: const Text('Boil water')),
          ],
        ),
      ),
    );
  }
}