引っ張って更新 Pull to Refresh
リストの一番上でさらに下へ引っ張ると、くるくる回る印が出て最新の内容に読み込み直す。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
SNS やメールで当たり前になった「引っ張って更新」です。
ListView を RefreshIndicator で囲み、onRefresh に Future を返す関数を渡すだけで動きます。
中身が少なくて画面いっぱいにならないと引っ張れないので、
physics: AlwaysScrollableScrollPhysics() を付けておくのが定番の対策です。
iOS らしい見た目にしたいときは CupertinoSliverRefreshControl を CustomScrollView に入れます。
こんなときに
- サーバーから取ってくる一覧を、好きなときに最新にしたい
避けたい場面
- 自動で常に最新になる画面(引っ張る意味がない)
最小コード
RefreshIndicator(
onRefresh: () async {
final latest = await api.fetchNews();
setState(() => news = latest);
},
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(), // 中身が少なくても引っ張れる
itemCount: news.length,
itemBuilder: (context, i) => ListTile(title: Text(news[i].title)),
),
)使うウィジェット
RefreshIndicatorCupertinoSliverRefreshControl