[Flutter]TextFieldでキーボードを表示するボタンを実装する方法

Flutter

2021.10.17

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

TextFieldでキーボードを表示するボタンを実装する方法を紹介します。

方法
使用例
まとめ

方法

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

キーボードを表示するボタンを実装するには、FocusNodeとFocusScopeを使います。

まず、FocusNodeのインスタンスを持つ変数を用意します。

var focusNode = FocusNode();

次にこの変数を使用するテキストフィールドに設定します。

                TextField(
                  focusNode: focusNode,
                )

最後にボタンを用意し、ボタンのタップ処理で「FocusScope.of(context).requestFocus(focusNode)」を呼び出します。（focusNodeはTextFieldに設定した変数）

             ElevatedButton(
                onPressed: () => FocusScope.of(context).requestFocus(focusNode),
                child: Text('Show Keyboard'),
              )

これでTextFieldでキーボードを表示するボタンを実装することが出来ます。

使用例

  var focusNode = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                focusNode: focusNode,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () => FocusScope.of(context).requestFocus(focusNode),
              child: Text('Show Keyboard'),
            )
          ],
        ),
      ),
    );
  }