引っ張って更新

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

スマートフォンでは、リストを下に引っ張って再読み込みします。スピナーが上から現れ、データが更新されます。Flutterでは、これに使うウィジェットはRefreshIndicatorです。

RefreshIndicator(
  onRefresh: refresh,
  child: ListView(
    children: [ ... ],
  ),
)

onRefreshはFutureを返す関数です。プル操作のスピナーはそのFutureが完了するまで表示されるため、その中で新しいデータをawaitします。

Future<void> refresh() async {
  setState(() {
    _tip = fetch('/tip');
  });
  await _tip;
}

プル操作はスクロールできるものに対してのみ機能します。コンテンツが1つだけの場合でも、ListViewに入れましょう。ListViewなら常にプル操作ができます。プル操作のスピナーがアプリの処理中であることをすでに示すため、ビルダーではhasDataチェックを使って古いヒントを表示したままにできます。

チャレンジ

中級

画面を下に引っ張ったときに、ヒントが再読み込みされるようにします。

refreshメソッドを追加します。このメソッドでは、setState内で新しい_tipを設定し、それを待機します。
本文をonRefresh: refreshを指定したRefreshIndicatorで囲みます。
その中のListViewにFutureBuilderを入れます。

プレビューで、マウスを使って画面を下にドラッグします。

自分で試してみよう

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