FutureBuilderを使ってみよう

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

ほとんどの画面は、ボタンを押さなくても、開いた瞬間にデータを読み込みます。Flutterには、futureを表示するためのウィジェットがあります。それがFutureBuilderです。futureを渡すと、futureの状態が変わるたびに画面を再構築します。

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshotは、現時点でfutureがどのような状態かを表します。答えが届く前は、snapshot.hasDataはfalseなので、読み込み中のインジケーターが表示されます。答えが届くと、builderが再び実行され、snapshot.dataに文字列が格納されます。

snapshot.dataの型はString?です。最初はデータがないため、文字列またはnullになります。その後ろにある!は、「確認済みで、nullではない」という意味です。hasDataの後にだけ使いましょう。nullに対して使うと、アプリがクラッシュします。

starterでは、画面を開いたときに実行されるinitState内で、すでにfutureを一度作成しています。lateは、その変数が使用される前に、そこで値を設定することをDartに伝えます。次のレッスンでは、なぜそこに置くのかを説明します。

チャレンジ

中級

アプリは initState でメッセージを読み込みますが、表示していません。プレースホルダーの Text を、_message 用の FutureBuilder<String> に置き換えてください。

読み込み中は CircularProgressIndicator
メッセージが届いたら、サイズ 24 で表示

自分で試してみよう

import 'package:flutter/material.dart';

import 'api.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: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}