Zenn
🚒

Flutterでキーボードを出した際、BOTTOM OVERFLOWED BY * PIXELSが発生した場合の対処方法

2020/10/15に公開
Flutter
Dart
tech

内容

標題通り、Flutterでキーボードを出した際に、BOTTOM OVERFLOWED BY * PIXELS と警告が出た時の対象方法です。

こんなエラーです。黒と黄色の斜線部分にBOTTOM OVERFLOWED BY 35 PIXELSと表示されています。

対処方法

素直にレイアウト調整するか、
ScaffoldにresizeToAvoidBottomInset: falseを追加する。

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

resizeToAvoidBottomInset: false追加後BOTTOM OVERFLOWED BY * PIXELSが消えました。（赤でエラーになっている部分は本内容には関係ありません）

resizeToAvoidBottomPaddingでも同様のことはできましたが、v1.1.9からDeprecatedになっているのでresizeToAvoidBottomInsetを使いましょう。

抜粋

  @Deprecated(
    'Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears. '
    'This feature was deprecated after v1.1.9.'
  )
  final bool resizeToAvoidBottomPadding;

レイアウト調整をするのが素直な修正方法になると思いますが、
対処方法について引き出しを増やすという意味でresizeToAvoidBottomInset: falseでの対応を記載しております。

参考

https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html
https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomPadding.html

Discussion