Flutterでキーボード表示時に画面が隠れないようにする方法｜フォームをスクロールさせるコツ

入力欄が1〜2個だけなら、Scaffoldの標準設定によってキーボード分だけ本文の表示領域が狭くなり、フォーカス中の部品が見える位置へ移動することがあります。Flutter公式APIでは、resizeToAvoidBottomInsetの既定値はtrueで、画面上のキーボードと重ならないように本文をリサイズする動作です。

ただし、入力欄が多いフォームや、縦に長いColumnをそのまま置いた画面では、縮んだ領域に内容が収まらず、下部の部品が見えないことがあります。その場合は、ColumnをSingleChildScrollViewで包み、キーボードが表示されたあとに上下へ移動できるようにします。

自動調整は大切ですが、画面の内容が表示領域より長い場合、スクロールできる仕組みまでは作ってくれません。固定されたColumnのままでは、キーボードを避けるための空間ができても、下にあるボタンまで移動できないためです。

キーボードで画面が隠れる主な原因

`Column`の内容が画面の高さを超えている

Columnは子ウィジェットを上から順番に並べますが、標準では画面を上下に動かす機能を持っていません。入力欄、説明文、ボタンを追加するほど、キーボード表示時に下側がはみ出しやすくなります。

`resizeToAvoidBottomInset`を無効にしている

次のようにfalseを指定すると、キーボードが表示されてもScaffoldの本文を縮めない設定になります。

Scaffold(
  resizeToAvoidBottomInset: false,
  body: ...,
)

この設定が必要な特殊なレイアウトもありますが、通常の入力フォームでは、まずtrueまたは指定なしで動作を確認するのが安全です。

スクロール部品の中に入力欄が入っていない

SingleChildScrollViewを置いていても、TextFieldや送信ボタンがその外側にあると、必要な部品だけをスクロールできません。画面全体を動かしたい場合は、入力欄とボタンを同じスクロール領域に入れます。

基本対策：SingleChildScrollViewでフォームを包む

次の例は、名前とメールアドレスを入力して送信する、縦長になりやすいフォームです。ScaffoldのbodyにSafeAreaを置き、その中へSingleChildScrollViewとColumnを入れています。

import 'package:flutter/material.dart';

class ProfileFormPage extends StatelessWidget {
  const ProfileFormPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('プロフィール入力')),
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Text('必要な情報を入力してください'),
              const SizedBox(height: 24),
              TextField(
                decoration: const InputDecoration(
                  labelText: '名前',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 16),
              TextField(
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  labelText: 'メールアドレス',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: const Text('送信する'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

この構造なら、キーボードで表示領域が狭くなっても、指で上へスクロールして送信ボタンを表示できます。paddingをSingleChildScrollViewに設定しておくと、入力欄が画面端に密着せず、キーボード表示後も操作しやすくなります。

画面がさらに長い場合の組み立て方

入力項目が多い場合は、単にTextFieldを増やすのではなく、次の順番で画面を組み立てると原因を切り分けやすくなります。

1. ScaffoldのresizeToAvoidBottomInsetをtrueにする、または指定を外す
2. bodyの中にSafeAreaを置く
3. SafeAreaの中にSingleChildScrollViewを置く
4. SingleChildScrollViewの中へColumnと入力欄、ボタンをまとめる
5. 実機またはエミュレーターで、最も下にある入力欄をタップしてスクロールを確認する

フォームの入力チェックにFormやTextFormFieldを使う場合も、Formをスクロール領域の中へ置けます。検証処理はキーボード問題とは別の役割なので、画面が隠れる対策と入力チェックを混ぜすぎないようにしましょう。

うまく動かないときの確認ポイント

`ListView`や別のスクロール領域が重なっていないか

SingleChildScrollViewの中に、さらに高さが決まっていないListViewを入れると、レイアウトエラーやスクロールの競合が起きることがあります。長い入力フォームなら、まずはスクロール領域を1つに絞り、必要性が明確な場合だけ内側のリストを追加してください。

`resizeToAvoidBottomInset: false`が親画面に残っていないか

子ウィジェットだけを確認しても、親のScaffoldや共通レイアウトで設定を変更していると、意図した動きにならないことがあります。プロジェクト全体でresizeToAvoidBottomInsetを検索し、フォーム画面に影響する設定を確認します。

キーボードを閉じる操作も用意する

入力が終わったあともキーボードが残ると、ボタンが押しにくい場合があります。画面の空白部分をタップしたらフォーカスを外す設計にすると、確認操作がしやすくなります。

GestureDetector(
  onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
  child: SingleChildScrollView(
    child: ...,
  ),
)

FocusNodeを使って入力先を管理する場合は、StatefulWidgetのinitStateで作成し、disposeで破棄します。buildのたびに新しいFocusNodeを作ると、フォーカスが外れたり管理対象が増えたりする原因になります。

よくある失敗例と改善方法

原因は、ボタンがスクロール領域の外側にある構造です。入力欄とボタンを同じColumnへ入れ、そのColumn全体をSingleChildScrollViewで包みます。

もう一つの失敗は、画面下に固定したボタンをStackなどで重ね、キーボード表示時の余白を考慮しないケースです。固定ボタンが必要なら、キーボードの表示領域をMediaQuery.viewInsetsOf(context).bottomで確認し、その分だけ下側の余白を調整する設計を検討します。単純なフォームなら、固定せずにスクロール領域へ入れる方が保守しやすいでしょう。

まとめ：最初に確認するのは3か所

Flutter キーボード 画面の問題は、まずresizeToAvoidBottomInsetを無効にしていないか確認し、次にフォーム全体をSingleChildScrollViewへ入れます。それでも操作しにくければ、入力欄とボタンの配置、スクロール領域の重複、キーボードを閉じる操作を見直します。

フォームの基本構造をまだ作っていない場合は、Flutterでフォーム入力を実装する方法もあわせて読むと、入力欄の作成と今回のキーボード対策を続けて確認できます。

参考にした公式情報

• Scaffold.resizeToAvoidBottomInset（Flutter API）
• Scaffold class：キーボードとレイアウト（Flutter API）
• Focus and text fields（Flutter公式Cookbook）
• Build a form with validation（Flutter公式Cookbook）