[Flutter] キーボード制御

入力欄以外タップでキーボードを閉じたい

以下のコードでキーボードが閉じる。

FocusScope.of(context).unfocus()

実際にコーディングする場合は、以下のように、タップしたらキーボードを閉じたい領域をGestureDetectorのchildに設定し、onTap()に上記コードを実装することが多そう。

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: タップでキーボード閉じたいWidget
)

私は画面全体に設定したいことが多いので、よくchildにScaffoldを設定している。

そうすれば、AppBarの部分までタッチ判定が効くので、ユーザビリティも向上すると思う。（↓こんな感じ）

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () => FocusScope.of(context).unfocus(),
    child: Scaffold(～省略～)
  );
}

（小ワザ）タップでキーボードを閉じたくない領域がある場合の対処法

先述したキーボードを閉じる実装を入れていると、入力欄の付近などをタップ時に、少し指がずれたらキーボードが閉じてしまい、イライラするUIになることがある。

その場合、タップでキーボードを閉じたくないWidgetに対してGestureDetectorを配置し、onTap()の処理を空で設定することで解決する。

GestureDetector(
  onTap: () {},
  child: タップでキーボードを閉じたくないWidget
)

こうすることで、この範囲のWidgetはタップ時のイベントを消化するため、キーボードを閉じる処理まで到達しない。

TextField, TextFormField がある画面に遷移時、キーボード表示したい

autofocus属性にtrueを設定する。

TextFormField(
  autofocus: showKeyboard,
  ～省略～
}

autofocus属性の詳細は、公式サイトへ。

以上、参考になれば幸いです( ˘ω˘)ｽﾔｧ