ボタンでデータを再読み込み

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

新しいデータを読み込むには、FutureBuilderに新しいFutureを渡します。画面がそれを使って再構築されるよう、setStateの中で作成します。

IconButton(
  icon: const Icon(Icons.refresh),
  onPressed: () {
    setState(() {
      _tip = fetch('/tip');
    });
  },
)

新しいヒントは2秒後に届きます。読み込み中もsnapshot.hasDataはtrueのままです。新しいデータに置き換わるまで、ビルダーは古いデータを保持します。hasDataを確認するだけでは、古いヒントが画面に残り、アプリが処理中であることを示すものは何も表示されません。

再びスピナーを表示するには、Futureが現在どの状態にあるかを示すsnapshot.connectionStateを確認します。Futureの実行中はConnectionState.waiting、完了するとConnectionState.doneになります。

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
return Text(snapshot.data!);

完了すればデータがあるため、snapshot.data!を安全に使えます。

チャレンジ

中級

次のヒントを読み込む更新ボタンを追加します。

トップバーのactionsにIcons.refreshを指定したIconButtonを配置します。
ボタンを押すと、setState内で_tipに新しいfetch('/tip')を設定します。
新しいヒントの読み込み中はスピナーを表示します。snapshot.connectionStateを確認します。

自分で試してみよう

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: TipScreen(),
    );
  }
}

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

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}