FutureBuilderのエラー状態

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

FutureBuilderはエラーを捕捉してくれます。そのFutureが例外をスローしても、クラッシュすることはありません。snapshot.hasErrorがtrueに設定されてビルダーが再度実行され、snapshot.errorにはスローされた内容が入ります。

そのため、読み込み画面には3つの状態があり、ビルダーはそれぞれに対応します。

if (snapshot.hasError) {
  return Text('Could not load: ${snapshot.error}');
}
if (snapshot.hasData) {
  return Text(snapshot.data!);
}
return const CircularProgressIndicator();

エラー、データ、そしてそれ以外、つまりまだ読み込み中の状態です。データのことしか考慮しないビルダーでは、呼び出しに失敗するとデータが決して得られないため、スピナーがいつまでも表示されます。

各チェックは、それを隠してしまうreturnより前に置いてください。「データなし」の場合のスピナーのreturnが先に来ると、その下にあるエラーの行は決して実行されません。

プレビューで失敗を確認するには、mainの最初の行にoffline = true;と書いて、Runを押します。offlineはapi.dartにあり、携帯電話が圏外であるかのように、すべての呼び出しを失敗させます。Checkを押す前に、この行を削除してください。

チャレンジ

中級

接続がないと、この画面はいつまでも読み込み中のままです。ビルダーにエラー状態を追加しましょう。snapshot.hasError の場合は、Could not load: の後に snapshot.error を表示し、サイズを 20 にします。

自分で試してみよう

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: FutureBuilder<String>(
          future: _message,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}