[Flutter]画面のタップでキーボードを閉じるには？

Flutter

2021.10.182021.10.19

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

画面をタップすることで、キーボードを閉じれるようにする方法を紹介します。

方法
使用例
まとめ

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

画面のタップをキーボードで閉じれるようにするには、まず画面全体のウェジェットを「GestureDetector」でラップします。

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Scaffold(
        ・・・
      ),
    );
  }

そして、GestureDetectorの引数「onTap」で、「FocusScope.of(context).unfocus()」を呼び出します。

GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        ・・・
      ),
    )

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

使用例

  @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: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }