8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Flutterでキーボードを出すとレイアウトが変わってしまう現象修正

Last updated at Posted at 2019-11-12

#結論
ScaffoldのresizeToAvoidBottomInsetプロパティをfalseにすると直る

#現象
まず、こういう構造の画面を作った
・ScaffoldのbodyにStackを配置
・GoogleMapの上にTextFieldとRaisedButton等を置いている。
default.png

さて、問題の現象だがTextFieldをタップした際、
キーボードの上昇に合わせて表示領域が変わってしまった。
画面下部のRaisedButtonが分かりやすいと思う。
GoogleMapもリビルドが走って微妙に表示が変わっている。
wtf.png

こういう仕様もありだとは思うが、自分はそうしたくない。
レイアウトを崩さずに何とかする方法はないか、という点で結論に行き当たった。
デフォルトだと true らしいので false にするとこうなる。
ok.png

##補記
別解としては、SingleChildScrollViewを使う手法もあるらしい。
今回のパターンで言えば
Scaffold>SingleChildScrollView>Stack という入れ子にする感じか。
キーボード入力中に画面をスクロール操作したい時は、こっちでも良さそう

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?