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

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

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

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

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

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

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

Scaffold(
  resizeToAvoidBottomInset: false,
  --- 以下略 ---
);

Scaffold(

resizeToAvoidBottomInset: false,

--- 以下略 ---

);

※追記

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

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

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

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

Scaffold(
  body: SingleChildScrollView(
  --- 以下略 ---
  )
);

Scaffold(

body: SingleChildScrollView(

--- 以下略 ---

)

);

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

参考になれば幸いです。

コメントを残すコメントをキャンセル