くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Flutter > Flutterでキーボードを表示時にオーバーフローするときの対処法

Flutterでキーボードを表示時にオーバーフローするときの対処法

Flutter

Flutterでキーボードを表示したときに、
BOTTOM OVERFLOWED BY 11 PIXELS
と黒と黄色の背景で警告された。。

Scaffoldをつかっているとき、キーボードを表示すると、
自動的に高さを調整してくれるらしい。

・resizeToAvoidBottomInset property - Scaffold class - material library - Dart API

対処方法

対処方法としては2つあり、

  1. resizeToAvoidBottomInsetをfalseにしてリサイズされないようにする
  2. SingleChildScrollViewなどをつかって、スクロールできるようにする

resizeToAvoidBottomInsetをfalseにする

自動調整をOFFにして、キーボードとかぶるけど、警告されないようにする方法。
キーボードとかぶってても、問題ない場合はこの形でOK。

@override
Widget build(BuildContext context) {

  return Scaffold(
    resizeToAvoidBottomInset: false,
    body: SafeArea(
      child: //...
    ),
  );
}

SingleChildScrollViewなどをつかう方法

入力フォームが下の方にあり、キーボードとかぶると困る場合は、
SingleChildScrollViewで囲んであげればOK。

オーバーフローしてもスクロールできるので、
警告されないようにになる。

@override
Widget build(BuildContext context) {

  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        child: // ...
      ),
    ),
  );
}

以上!!

参考にしたサイトさま