後から届く値

CoddyのFlutterジャーニー「データとネットワーク」セクションの一部。レッスン 1/27。

これまで、アプリ内の処理はすべて一度に起きていました。ボタンをタップすると、画面が変わります。実際のアプリでは、何かを待つことがよくあります。サーバーからの応答や、ファイルの読み込み、タイマーの終了を待ちます。

Dartでは、まだ存在しない値をFutureと呼びます。最も簡単なものはFuture.delayedです。Durationの時間だけ待ってから、渡された関数を実行します。

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

待っている間、アプリがフリーズすることはありません。画面は描画され続け、ボタンも引き続き操作できます。2秒が経過すると、Dartが関数を実行し、setStateが新しいメッセージを表示するよう画面を再描画します。

チャレンジ

簡単

Boil waterをタップすると、すぐにTea is readyと表示されます。水を沸かすには時間がかかります。タップしてから3 seconds後にメッセージが変わるように、Future.delayedを使いましょう。

自分で試してみよう

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