もう一度試すボタン

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

接続は戻ります。優れたエラー画面はユーザーを行き詰まらせません。何が起きたのかを伝え、もう一度試す方法を提示します。

もう一度試すことは再読み込みです。更新ボタンと同じように、setState の中で新しい future を作ります。

void tryAgain() {
  setState(() {
    _message = fetch('/message');
  });
}

一点だけ注意があります。新しい future が実行されている間、スナップショットには以前のデータが保持されるのと同じように、最後のエラーが保持されます。新しい結果が届くまで hasError は true のままです。2回目の試行中にスピナーを表示するには、まず snapshot.connectionState を確認します。

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // エラーとボタン
}
return Text(snapshot.data!);

プレビューで失敗を確認するには、main の最初の行に offline = true; と記述して、Run を押します。offline は api.dart にあります。スマートフォンの電波が届かないかのように、すべての呼び出しを失敗させます。Check を押す前に、この行を削除してください。

チャレンジ

中級

エラー状態から抜け出せるようにします。

エラーテキストの下に、再試行ボタンを追加します
ボタンを押すと、setState内で新しいfetch('/message')を設定します
再試行中はスピナーを表示します。ビルダー内ではまずConnectionState.waitingを確認します

自分で試してみよう

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.hasError) {
              return Text(
                'Could not load: ${snapshot.error}',
                style: const TextStyle(fontSize: 20),
              );
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}