Chờ với async và await

Thuộc phần Dữ liệu và mạng trong hành trình Flutter của Coddy. Bài học 2 trên 27.

Ứng dụng pha trà nên hiển thị Boiling... trước, rồi hiển thị Tea is ready sau. Khi dùng callback bên trong Future.delayed, bạn khó theo dõi thứ tự hơn. Dart có cách rõ ràng hơn: await.

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

await tạm dừng hàm này cho đến khi future hoàn tất, rồi tiếp tục với dòng tiếp theo. Code được đọc từ trên xuống dưới, theo thứ tự các việc diễn ra.

Cách này có hai quy tắc. Hàm dùng await phải có từ khóa async. Hàm async trả về một Future: Future<void> khi hàm không trả về giá trị nào. Chỉ hàm này tạm dừng. Phần còn lại của ứng dụng vẫn tiếp tục chạy.

Thử thách

Dễ

Viết lại boil bằng async và await:

ngay sau khi chạm, thông báo là Boiling...
3 giây sau, thông báo là Tea is ready

Tự làm thử

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