[Flutter]キーボードを閉じるボタンを実装するには？

どうも、ちょげ(@chogetarou)です。

キーボードをタップで閉じることの出来るボタンを実装する方法を紹介します。

方法

キーボードを閉じるボタンを実装するには、「FocusScope.of(context).unfocus()」を使います。

このメソッドを呼び出すことで、開いているキーボードを閉じることが出来ます。

「FocusScope.of(context).unfocus()」をボタンの処理に指定すれば、簡単に実装することが出来ます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                FocusScope.of(context).unfocus();
              },
              child: Text('Close Keyboard'),
            )
          ],
        ),
      ),
    );
  }

まとめ

キーボードを閉じるボタンを実装するには、ボタンのタップ処理で「FocusScope.of(context).unfocus()」を呼び出します。

おまけ

画面をタップしたときに画面を閉じたい場合は、GestureDetectorと「FocusScope.of(context).unfocus()」を組み合わせます。

画面全体をGestureDetectorの子ウェジェットにして、引数「onTap」で、「FocusScope.of(context).unfocus()」を呼び出します。

そうすれば、画面をタップすることで、キーボードを閉じれるようになります。

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

以上、おまけでした。