こんにちは。
この半年は勉強して来たFlutterを思いっきり実務で利用できる時間でした。
先日、無事にアプリをリリースできたので、色んな課題を乗り越えながら積み重ねて来たノートをそろそろ整理してアウトプットしようと思います。
どうぞよろしくお願いします。
概要
スマホアプリを作る時は、様々な機種のデバイスサイズ、横モードと縦モード、キーボード登場など、色んな画面サイズに対応しないと行けません。
レスポンスデザインで色んな画面サイズを対応することが一番素敵ですが、画面のWidgetが複雑になればなるほどリソース不足などでそこまで対応しない場合がありますね。
しかし、アプリを公開して不特定多数が利用する場合は何も対応しないと結局UI崩れやOverflowsエラーなどが発生されます。
今回はその対応の中でキーボードを開くことによって対応の話をします。
対応内容
Flutterのデフォルトではキーボードを開くと同じレイヤーで開けるためUIが上に押されます。
簡単なUIではありがたい仕様ですが、Widgetを複雑に配置する場合は問題が出てしまいます。
Expandedなどで相対的にサイズを決めてくれる実装した場合はUI崩れて、固定サイズになった場合はOverflowsエラーが出ます。
適当に例の画面を作りましたが、例えば以下のようなOverflowsエラーが発生されるとします。
レスポンスデザインで対応せず解決するためには2つの対応が必要です。
対応1. キーボードを同じレイヤーではなく上端のレイヤーに乗せる設定をします。
この対応はScaffoldのオプションを調整することで簡単に対応できます。
return Scaffold(
resizeToAvoidBottomInset: false,
対応2. キーボードのレイヤーに隠されるところを表示させます。
上の対応1だけでは、キーボードのレイヤーに下端のところが隠されて使えなくなります。
そのため、画面の最下端にキーボードのサイズ分の空白を入れて、画面がサイズを超えたらスクロールが入るようにします。
もちろん、その空白はキーボードが開いた時だけにします。
body: SafeArea(
child: SingleChildScrollView(
//...省略
SizedBox(
height: MediaQuery.of(context).viewInsets.bottom,
),
上のように対応すると様々なWidgetサイズをレスポンス的に対応せず、簡単に解決できます。
