本エントリでは「A RenderFlex overflowed by ... pixels on the bottom」エラーの対処方法について説明する。

エラーについて

原因

画面に表示しているウィジェットが、表示するスペースが確保できなくなった為。

よくあるケースとしてはTextFormFieldなどで入力フォームを用意し、フォームを選択してキーボードが表示された際に発生する。

発生例

本エラーが発生することが多いケースは、TextFormFieldなどのインプット系ウィジェットを使用した際に発生する。

例えば以下のようなフォームを作成したとする。

バツで締められた部分はPlaceholderウィジェット。ここでフォームを選択すると以下のようなエラーが表示される。

上記画像ではTextFormFieldの上下にPlaceholderを配置している。フォームを選択するとキーボードが表示されるが、Placeholderに被ってしまいエラーが表示されている。

対処方法

対処方法は主に2種類ある。

resizeToAvoidBottomInset: false
SingleChildScrollViewでラップ

以下では「発生例」の章で示したUIをベースに、対処方法を説明する。

説明用コード（対処前）

resizeToAvoidBottomInset: false

ScaffoldウィジェットにresizeToAvoidBottomInset: falseを追記する。このresizeToAvoidBottomInsetをfalseにすることでFlutterがScaffoldウィジェットのサイズなどを自動で調整することを防ぐ。設定した際の画面UIは以下。