המתנה עם async ו־await

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

אפליקציית התה אמורה להציג קודם Boiling... ולאחר מכן Tea is ready. כשמשתמשים בפונקציית callback בתוך Future.delayed, קשה להבין את סדר הפעולות. ל-Dart יש דרך ברורה יותר: await.

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

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

יש לכך שני כללים. פונקציה שמשתמשת ב-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')),
          ],
        ),
      ),
    );
  }
}