asyncとawaitで待つ

CoddyのFlutterジャーニー「データとネットワーク」セクションの一部。レッスン 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 は、futureが完了するまでこの関数を一時停止し、その後、次の行に進みます。コードは、処理が実行される順に上から下へ読めます。

これには2つのルールがあります。await を使う関数には async を付けます。async 関数は Future を返します。何も返さない場合は Future<void> です。一時停止するのはこの関数だけです。アプリの残りの部分は動き続けます。

チャレンジ

簡単

async と await を使って boil を書き換えましょう。

タップした直後、メッセージは 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')),
          ],
        ),
      ),
    );
  }
}