端までスクロールしたときの反応 Overscroll Effects
一覧の端を越えて引っ張ったときの反応。中身が伸びる(新しい Android)、光る(古い Android)、跳ね返る(iOS)の3種類。
本物の 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