Zenn
🦔

Flutterで入力完了後にキーボードを隠したい

2021/06/04に公開
Android
Flutter
iOS
tech

Flutterの勉強でTODOアプリを作成していて、タスクを入力したあとにキーボードを隠す方法について調べたことのメモです。

環境

  • macOS Big Sur 11.3.1
  • Flutter 2.2.0

完成品

  • こんなかんじ

Image from Gyazo

  • GitHub

https://github.com/captain-blue210/flutter_todo_app

ポイント

  • 入力フォームのクラスにFocusNodeを持っておき、onEditingCompleteのタイミングでFocusNodeのunfocus()を呼び出してフォーカスを外すとキーボードが引っ込んでくれる。
class _AddTaskState extends State<AddTask> {
  final addTaskController = TextEditingController();
  late FocusNode addTaskFocusNode;

  @override
  void initState() {
    super.initState();
    addTaskFocusNode = FocusNode();
  }
~~ 省略 ~~
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(10),
        margin: const EdgeInsets.only(bottom: 12),
        child: TextField(
          onEditingComplete: () async {
            if (addTaskController.text.isNotEmpty) {
              await TaskLogic.add(addTaskController.text);
            }
            addTaskController.clear();
            // unfocus()を呼び出して、フォーカスを外す
            addTaskFocusNode.unfocus();
          },
          controller: addTaskController,
          focusNode: addTaskFocusNode,
~~ 省略 ~~

Image from Gyazo

課題

  • 動き自体は実装できたが、FocusNode自体があまり良くわかっていないのでドキュメント読んだり動かして理解を深めたい。
  • また、他のWidgetにフォーカスを移したい場合はどうするのか？を調べてサンプルを作成したい

参考

Discussion