[flutter]要素の一部として使っていたListViewがうまく表示されなかった話。

今回、ListViewをとある画面の構成要素として使っていたときに発生したエラー。

BottomNaivigationBarの裏側に伸びてしまい、表示領域を超えてしまっていたのです。

原因

今回はScaffoldのbodyに指定していたColumnの中に、ListViewをサイズ指定なしに配置していたことが原因でした。
Columnは子要素のサイズに従って縦幅が伸びていきますが、ListViewは親要素によって定められたサイズまでは伸び、それ以降は内部にスクロール可能な領域を展開します。
今回この両者の性質によって永遠とListViewのサイズが縦に伸びた事が原因でした。

対処法としてはListViewの高さをContainerで決めてしまう等考えれらますが、今回はColumn内に配置することをやめました。

まとめ

そもそも、今回のような複雑な組み合わせを行なってしまう画面設計が良くないですね。アプリの画面構成はシンプルなのが一番ですし、さまざまなWidgetを組み合わせた画面はバグが隠れてしまいます。謎なUIに関するエラーが発生してしまう場合は、画面設計から見直してみましょう。