FlutterFlow-プレビューの黄色と黒の謎エラーってどうやって解決する?(Listview Bottom Overflowed pixel)

FlutterFlowのアプリを作っていて、必ず遭遇する、黄色と黒のエラーって出ますよね? 今回は、こちらを解決していきたいと思います。

正式名称は、レイアウトオーバーフローというようで、オーバーフローの問題は、使用可能なスペース (幅、高さ、またはその両方) に収まらないウィジェットをキャンバスに配置したときに発生します。つまり、想定しているウィジェットよりも長いものを表示させようとしている現象ですね。

どうやって解決するのか?

例えば、上記のようなエラーの場合には、Columのscrollableを拡張させれば解決します。

RUNしてみると簡単に解決してますね。

なぜこれで修正されるかということをもう少し詳しくみていきます。
まず、エラー画面をよーーーく見てみると、赤く何か文字が書いてます。

BOTTOM OVERFLOWED BY 178 PIXEL  と書かれてます。
これは、縦に何か表示したいものがあるが、なにかしらの成約により、表示できてないというエラーになります。

今回の場合には、親であるColumnに制約があり、ここを拡張させることで解決をしてます。

また、オーバーフロー発生時には、右のプレビューにオーバーフロー表示ボタンも表示されます。


オーバーフローを防ぐためには、

基本的に、オーバーフローは、高さ、幅、またはパディングに大きな固定値が設定している場合によく発生します。そのため、レスポンス化をすることで、ほとんどの場合回避できるはずです。


公式ページには、さらに詳しい対応方法も記載してあるので、こちらも参考にして下さい。

FlutterFlow でのレイアウト オーバーフローの防止

この記事を書いた人

tsubasatwi( つばさ)

国立工業高専卒業(新居浜工業高等専門学校)
「イベント×IT×営業」のカスタマーサクセスマネージャーとして活躍。セールス→構築管理運用まで全体プロジェクト管理の豊富な経験あり。

・主にITに関するイベント集客/法人営業/開発を担当
・大手通信会社を中心にエンタープライズのIT導入を担当(B2B)

DMMで日本初の NoCodeサロン を運営
「NoCodeCamp プログラミングを使わないIT開発 」
https://lounge.dmm.com/detail/2549/