[Flutter]CupertinoTextFieldにフォーカス(focus)を合わせるには？

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

CupertinoTextFieldにボタンなどを使ってフォーカスを合わせる方法を紹介します。

方法
使用例

方法

CupertinoTextFieldにボタンなどを使ってフォーカスを合わせるには、FocusNodeを使います。

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

final _focusNode = FocusNode();

~~~~~~

CupertinoTextField(
  focusNode: _focusNode,
),

そして、ボタンなどの処理で、FocusNodeのrequestFocusメソッドを呼び出します。

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

FocusNodeのrequestFocusが呼び出されると、CupertinoTextFieldにフォーカスが合います。

使用例

以下は、使用例です。

  final _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: [
              CupertinoTextField(
                focusNode: _focusNode,
              ),
              ElevatedButton(
                onPressed: () {
                  _focusNode.requestFocus();
                },
                child: Text('Focus'),
              )
            ],
          ),
        ),
      ),
    );
  }