الانتظار باستخدام async وawait

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

يجب أن يعرض تطبيق الشاي Boiling... أولًا، ثم Tea is ready لاحقًا. عندما تستخدم دالة رد نداء داخل Future.delayed، يصعب قراءة الترتيب. لدى Dart طريقة أوضح: await.

Future<void> boil() async {
  setState(() {
    message = 'Boiling...';
  });
  await Future.delayed(const Duration(seconds: 3));
  setState(() {
    message = 'Tea is ready';
  });
}

توقف await هذه الدالة مؤقتًا إلى أن تنتهي المستقبلية، ثم تتابع تنفيذ السطر التالي. يُقرأ الكود من الأعلى إلى الأسفل، وفق ترتيب حدوث الأشياء.

وتأتي معها قاعدتان. تُعلَّم الدالة التي تستخدم await بالكلمة async. تُرجع دالة async قيمة من النوع Future: أي Future<void> عندما لا تُرجع شيئًا. هذه الدالة وحدها هي التي تتوقف مؤقتًا. أما بقية التطبيق فتستمر في العمل.

التحدي

سهل

أعِد كتابة boil باستخدام async وawait:

مباشرةً بعد النقر، تكون الرسالة Boiling...
بعد 3 ثوانٍ، تصبح Tea is ready

جرّب بنفسك

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() {
    Future.delayed(const Duration(seconds: 3), () {
      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')),
          ],
        ),
      ),
    );
  }
}