【Flutter】SpacerやExpandedをListView内に組み込むには？

概要

どうも、@daiki1003です！

お久しぶりです！

今回は、ListView内にどうやってSpacerやExpandedなどのウィジェットを
配置するのかを解説していきたいと思います。

結論

先に結論から言うと、残念ながらListView内に上記ウィジェットは入れることができません！(どーん)

代わりに、CustomScrollViewを使いましょう。

サンプルコードです。(main.dartに貼り付けてそのまま比較できます)

Before

After

解説

目的を達成するだけなら、上記のサンプルだけで良いですね笑
が、それだけだと少し味気ないので解説や補足をしていきたいと思います。

SliverFillRemaining

SliverFillRemaining class - widgets library - Dart API

API docs for the SliverFillRemaining class from the widgets library, for the Dart programming language.

api.flutter.dev

これを使うことで、画面の残りの領域を占有するウィジェットを作成することができます。

hasScrollBody

SliverFillRemainingはhasScrollBodyというプロパティを持っています。
デフォルトではtrueです。

これは、英語の意味通り「スクロール可能なコンテンツを保持しているかどうか」です。

上記公式ページのサンプルでhasScrollBody: falseを付けたり外したりして実行してスクロールすることで
わかっていただけるかなと思います。

falseにすることで、画面全体から黄色部分を除いた範囲がSliverFillRemainingの描画範囲となります。
これはスクロールできません。

一方で、trueにすることで、青色部分が画面全体を覆い尽くすまでスクロールすることが可能になります。

最後に

いかがでしたでしょうか？
簡単ではありましたが、SliverFillRemainingについて解説をしました。

余白を埋める様なUIを作成する際は、CustomScrollViewを使うように心がけていきましょう💪

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい！」
「この辺分からなかったから質問したい！」

そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました！
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです！
@daiki1003