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

端までスクロールしたときの反応 Overscroll Effects

一覧の端を越えて引っ張ったときの反応。中身が伸びる(新しい Android)、光る(古い Android)、跳ね返る(iOS)の3種類。

別名
オーバースクロール端の反応スクロールの跳ね返りストレッチグローバウンスOverscroll IndicatorBounce
動き
伸びる光る跳ね返る
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

「これ以上はありません」を伝える小さな反応で、OS ごとに違います。デモで3つを並べて見比べられます。

Flutter の既定は、Android では Material 3 なら伸びる(StretchingOverscrollIndicator)、

Material 2 なら光る(GlowingOverscrollIndicator)、iOS と macOS は跳ね返る(BouncingScrollPhysics)です。

アプリ全体で OS に関係なく同じ反応にしたいときは、ScrollBehavior を継承して

getScrollPhysics と buildOverscrollIndicator を上書きし、MaterialApp の scrollBehavior に渡します。

こんなときに

  • どの OS でも同じ手触りにそろえたい(ゲームや独自デザインのアプリ)

避けたい場面

  • 特に理由がないのに OS の既定を変える(ふだん使っているアプリと違って違和感が出る)

最小コード

class AlwaysBounce extends MaterialScrollBehavior {
  const AlwaysBounce();

  @override
  ScrollPhysics getScrollPhysics(BuildContext context) =>
      const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics());

  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) =>
      child; // 伸びる・光るを出さない
}

MaterialApp(scrollBehavior: const AlwaysBounce(), ...)

使うウィジェット

StretchingOverscrollIndicatorGlowingOverscrollIndicatorBouncingScrollPhysicsScrollBehavior

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

触ってみる ↗
ジェスチャー 引っ張って更新Pull to Refresh

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

下に引っ張る