Menunggu dengan async dan await

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 2 dari 27.

Aplikasi teh harus menampilkan Boiling... terlebih dahulu, lalu Tea is ready. Dengan callback di dalam Future.delayed, urutannya sulit dibaca. Dart punya cara yang lebih jelas: await.

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

await menjeda fungsi ini sampai future selesai, lalu melanjutkan ke baris berikutnya. Kode dibaca dari atas ke bawah, sesuai urutan kejadian.

Ada dua aturan yang menyertainya. Fungsi yang menggunakan await diberi tanda async. Fungsi async mengembalikan Future: Future<void> jika tidak mengembalikan apa pun. Hanya fungsi ini yang dijeda. Bagian lain aplikasi tetap berjalan.

Tantangan

Mudah

Tulis ulang boil dengan async dan await:

tepat setelah tombol diketuk, pesannya adalah Boiling...
3 detik kemudian, pesannya adalah Tea is ready

Coba sendiri

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