Giá trị đến sau

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

Cho đến nay, mọi thao tác trong ứng dụng của bạn đều diễn ra cùng lúc: chạm vào nút, màn hình thay đổi. Ứng dụng thực tế thường phải chờ. Chúng chờ máy chủ phản hồi, chờ tệp tải xong hoặc chờ hết giờ hẹn.

Dart gọi một giá trị chưa có sẵn là Future. Cách đơn giản nhất là Future.delayed: nó chờ một khoảng thời gian Duration, rồi chạy hàm bạn truyền vào.

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

Ứng dụng không bị đơ trong lúc chờ. Màn hình vẫn tiếp tục hiển thị và các nút vẫn hoạt động. Khi hết 2 giây, Dart chạy hàm và setState vẽ lại màn hình với thông báo mới.

Thử thách

Dễ

Chạm vào Boil water sẽ hiển thị Tea is ready ngay lập tức. Nước cần thời gian để sôi. Hãy dùng Future.delayed để thay đổi thông báo sau khi chạm 3 seconds.

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