[Flutter]TextFormFieldにボタンでフォーカスするには？

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

TextFormFieldにボタンでフォーカスする方法を紹介します。

方法
使用例

方法

TextFormFieldにボタンでフォーカスするには、FocusNodeを使います。

まず、FocusNodeの変数を用意し、TextFormFieldの引数「focusNode」に指定します。

FocusNode _focusNode = FocusNode();

~~~省力~~~

TextFormField(
  focusNode: _focusNode,
),

そして、フォーカスさせるボタンのタップ処理で、FocusNodeのrequestFocus()メソッドを呼び出します。

ElevatedButton(
  onPressed: () {
    _focusNode.requestFocus();
  },
  child: Text('Focus'),
)

requestFocusが呼ばれると、TextFormFieldにフォーカスされます。

これでTextFormFieldにボタンでフォーカスすることが出来るようになります。

使用例

以下は、使用例です。

  FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                focusNode: _focusNode,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              ElevatedButton(
                onPressed: () {
                  _focusNode.requestFocus();
                },
                child: Text('Focus'),
              )
            ],
          ),
        ),
      ),
    );
  }