個人開発者が勉強がてらまとめているだけのサイトです

引っ張って更新 Pull to Refresh

リストの一番上でさらに下へ引っ張ると、くるくる回る印が出て最新の内容に読み込み直す。

別名
プルリフレッシュ下に引いて更新リフレッシュインジケーターSwipe to Refresh
動き
下に引っ張るくるくる回る離すと読み込み
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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

似ているもの・一緒に見たいもの

触ってみる ↗
ジェスチャー スワイプで削除Swipe to Dismiss

リストの行を横にスワイプすると、下から色付きの背景が現れ、そのまま行が消える。

横にスワイプ