[Flutter] チャイルドウィジェットのサイズと関係なくスクロールする

2023-10-16 hit count image

SingleChildScrollViewウィジェットでチャイルドウィジェットのサイズと関係なく、いつもスクロールができるようにする方法について説明します。

概要

Flutterでリストがあるアプリを開発する時、時々SingleChildScrollViewウィジェットを使います。この時、引っ張って更新(Pull to refresh)のような特定機能を使うため、チャイルドウィジェットのサイズと関係なくいつもスクロールができるようにする必要がある場合があります。

今回のブログポストではSingleChildScrollViewウィジェットでチャイルドウィジェットのサイズと関係なくスクロールできるようにする方法について説明します。

AlwaysScrollableScrollPhysics

SingleChildScrollViewウィジェットはphysicsオプションを持っています。

このオプションを使うと、チャイルドウィジェットと関係なくスクロールの動作をコントロールすることができます。このオプションに次のようにAlwaysScrollableScrollPhysicsを使うとチャイルドウィジェットのサイズと関係なくいつもスクロールができるようにすることができます。

SingleChildScrollView(
  physics: const AlwaysScrollableScrollPhysics(),
  child: ...,
),

SingleChildScrollViewウィジェット以外にもListViewウィジェットようにスクロールができるウィジェットは大体physicsオプションを持っています。

したがって、スクロールの動作を変更する必要がある場合、physicsオプションを調べると助かると思います。

完了

これでSingleChildScrollViewウィジェットでチャイルドウィジェットのサイズと関係なくいつもスクロールできるようにするためphysicsオプションにAlwaysScrollableScrollPhysicsを設定する方法についてみてみました。このオプションを使うと引っ張って更新機能を実装することができます。引っ張って更新の実装が気になる方は以前のブログポストを参考してください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts