[Flutter]リストビュー(ListView)をColumnで使えるようにするには？

どうも、ちょげ(@chogetarou)です。

リストビューをColumnウェジェット内で使えるようにする方法を紹介します。

方法

リストビューをColumnウェジェット内で使えるようにする方法は２つあります。

shrinkWrap

１つは、ListViewの引数「shrinkWrap」に「true」を指定する方法です。

ListView(
   shrinkWrap : true,
   children : [
       ・・・・
   ]
)

Expanded

もう１つは、Expandedを使う方法です。

ListViewを「Expanded」の引数「child」に指定します。

Expanded(
  child: ListView(
      children : [
          ・・・
      ]
  ),
),

なぜColumnでは使えない？

そもそも、ListViewはなぜColumnでは使えないのでしょうか。

理由は、どちらのウェジェットも表示するスペースを最大限まで取得しようとするからです。

ListViewが最大限まで表示するスペースを取得しようとして、Columnもそれに応じて最大限まで表示するスペースを取得しようとし、更にListViewが最大限まで表示するスペースを取得しようとして・・・・というように永遠に続くわけです。

そうなると、表示するスペースだけが大きくなり、肝心の中身が表示されなくなります。

これを防ぐのが「shrinkWrap」と「Expanded」です。

「shrinkWrap」に「true」を指定すると、ListViewは必要最低限しか表示するスペースを取得しません。

Expandedの場合も同じです。

まとめ

ListViewをColumn内で使うには、ListViewを必要最低限の表示スペースだけ取得するようにする。

そのために、「shrinkWrap」もしくは「Expanded」を使う。