【Flutter】ボタンや画面タップでキーボードを閉じる方法を解説

今回は、Flutterの「TextField」Widgetを用いた際に表示されるキーボードを外部ボタンをタップすることで閉じる方法を解説させていただきます。

キーボードを外部動作で閉じたい場面は結構あるかと思いますので、そういった状況にいる方々の参考になれば幸いです。

TextFieldを用いてキーボードを表示
ボタンを表示
キーボードをボタンタップで閉じる方法
キーボードが表示されていない箇所をタップして閉じる方法
おわりに

TextFieldを用いてキーボードを表示

まずは「TextField」Widgetを用いてキーボードを画面上に表示してみましょう。

今回はデモアプリにある「_MyHomePageState」クラスのbuildメソッドの内容を修正していきます。

下記コードのようにbodyの内容を修正します。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('pRyogram'),),
    body: Center(
      child: TextField(), //こちらを追加
    ),
  );
}

これで入力欄を表示できているかと思います。

ボタンを表示

ボタンを表示していきます。

「TextFiled」Widgetの下にキーボードを閉じるためのボタンを用意していきます。

今回は「ElevatedButton」Widgetを使用してボタンを表示していきます。

まずはタップされるとタップを検知とprintされるようにしてみます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('pRyogram'),),
    body: Center(
      child: Column(
        children: [
          TextField(),
          ElevatedButton( //こちらを追加
            onPressed: () {
              print('タップを検知');
            },
            child: const Text('キーボードを閉じる')
          )
        ],
      ),
    ),
  );
}

これでボタンをタップするとコンソールに「タップを検知」と出力されるようになります。

キーボードをボタンタップで閉じる方法

開いているキーボードを閉じるには「FocusScope.of(context).unfocus()」こちらのメソッドを使用します。

前項で作成した「ElevatedButton」Widgetのボタンタップ時の処理を修正していきます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('pRyogram'),),
    body: Center(
      child: Column(
        children: [
          TextField(),
          ElevatedButton(
            onPressed: () {
              FocusScope.of(context).unfocus(); //こちらを追加
            },
            child: const Text('キーボードを閉じる')
          )
        ],
      ),
    ),
  );
}

これによりボタンをタップした際にキーボードを閉じることができるようになっています。

キーボードが表示されていない箇所をタップして閉じる方法

最後におまけとして、ボタンではなくキーボードが表示されていない画面領域をタップすることでキーボードを閉じる方法を解説します。

この時も前項と同様の「FocusScope.of(context).unfocus()」メソッドを用いて実装しますが、画面の表示領域をタップできるようにする必要があります。

今回は、以下のように「Scaffold」Widgetに対して「GestureDetector」Widgetを実装することで実現していきます。

@override
Widget build(BuildContext context) {
  return GestureDetector( //こちらを追加
    onTap: () {
      FocusScope.of(context).unfocus();
    },
    child: Scaffold(
      appBar: AppBar(title: Text('pRyogram'),),
      body: Center(
        child: TextField(),
      ),
    ),
  );
}

これにてキーボードが表示されていない画面領域をタップ可能にし、そのタップでキーボードを閉じることができるようになっています。