【Flutter】キーボード表示時のOVERFLOWの解決法

flutter-logo

皆さんこんにちは、r.matsumotoです。

最近実務でFlutterを触っていてキーボード表示時にBOTTOM OVERFLOWED BY * PIXELSというエラーが出たのでそのエラーの原因と解決法を紹介したいと思います。

 

エラーの原因

エラーの原因としてはFlutterがキーボードを表示する際にキーボード分の領域を追加で取るようでその結果画面に収まりきらずOVERFLOWが起こっているようでした。

 

エラーの解決法

①resizeToAvoidBottomInset: falseを追加する

1つめの解決法はScaffoldのresizeToAvoidBottomInsetにfalseを設定する方法です。

こちらをfalseに設定するとキーボードの表示領域を追加で取らず画面の上に被せて表示されます。

TextFieldのInputがキーボードの表示で隠れない場合などは下記の対応で良いと思います。

 

※追記

ScaffoldのresizeToAvoidBottomInsetにfalseを設定しても画面のリサイズが走ってしまう現象に遭遇しました。

ソースを追っていくと親WidgetのCupertinoTabScaffoldのresizeToAvoidBottomInsetがデフォルト値(true)になっていることが原因でした。

resizeToAvoidBottomInsetが効かない場合は親Widgetのプロパティを確認していくと良いかもしれません。

 

②SingleChildScrollViewでラップする

上記対応でTextFieldのInputがキーボードの表示で隠れてしまう場合はSingleChildScrollViewでラップしスクロール出来るように対応します。

 

以上、キーボード表示時のOVERFLOWの解決法でした。

参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です