【Flutter】スクロール挙動をカスタマイズするphysicsについて

こんにちは、エキサイトでアプリエンジニアをしている岡島です。 今回は、ListViewなどスクロールができるウィジェットのphysicsついてまとめていこうと思います。

Scrollableなウィジェット

Flutterには、スクロール可能なウィジェットがいくつか用意されています。主なものには以下があります:

  • ListView
  • PageView
  • GridView
  • SingleChildScrollView
  • CustomScrollView

これらのウィジェットは、physicsプロパティを持っており、このプロパティを通じてスクロールの挙動をカスタマイズすることができます。

physicsについて

physicsプロパティは、スクロールの動作や効果を制御しています。physicsには以下のような種類があるのでそれぞれの特徴について紹介していきます。

  • AlwaysScrollableScrollPhysics
  • BouncingScrollPhysics
  • ClampingScrollPhysics
  • NeverScrollableScrollPhysics
  • RangeMaintainingScrollPhysics

AlwaysScrollableScrollPhysics

AlwaysScrollableScrollPhysicsは、リストがスクロール可能な要素の数にかかわらず、常にスクロール可能にする設定です。、リスト項目が少なくても、スクロール可能な状態が維持されます。

iOSではBouncingScrollPhysicsの挙動、AndroidではClampingScrollPhysicsの挙動となります。

AlwaysScrollableScrollPhysics class - widgets library - Dart API

デフォルト AlwaysScrollableScrollPhysics

BouncingScrollPhysics

BouncingScrollPhysicsは、iOS風のバウンス効果を持つスクロール動作を提供します。リストの先頭や末尾に到達すると、バウンドするようなスクロールです。

BouncingScrollPhysics class - widgets library - Dart API

iOS Android

ClampingScrollPhysics

ClampingScrollPhysicsはAndroidのスクロール動作に近く、リストの先頭や末尾に到達した際に、バウンドせずにスクロールが停止する挙動です。

ClampingScrollPhysics class - widgets library - Dart API

iOS Android

NeverScrollableScrollPhysics

NeverScrollableScrollPhysicsは、スクロールを完全に無効化します。

NeverScrollableScrollPhysics class - widgets library - Dart API

iOS Android

RangeMaintainingScrollPhysics

RangeMaintainingScrollPhysicsは、スクロール範囲が増減しても、自動的にスクロール位置を調整します。 リストの内容が動的に変化する場合に役に立ちます。

RangeMaintainingScrollPhysics class - widgets library - Dart API

最後に

今回はスクロールができるウィジェットのphysicsについてまとめてみました。状況に応じて使い分けることや組み合わせることで、ユーザー体験の向上につながるかと思います。読んでいただきありがとうございました!