[Flutter]TextFormFieldがフォーカスされた時に処理をするには？

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

TextFormFieldがフォーカスされた時に処理をする方法を紹介します。

方法
使用例

方法

TextFormFieldがフォーカスされた時に処理をするには、Focusウェジェットを使います。

まず、TextFormFieldをFocusでラップします。

次に、Focusの引数「onFocusChange」に「(hasFocus) {}」を指定します。

そして、関数内で引数がtrueの条件分岐をし、そこでフォーカスされた時の処理を指定します。

Focus(
  child: TextFormField(
    decoration: InputDecoration(
      border: OutlineInputBorder(),
    ),
  ),
  onFocusChange: (hasFocus) {
    if (hasFocus) {
      //フォーカスされた時の処理
    }
  },
),

使用例

以下は、使用例です。

  final _editController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Focus(
            child: TextFormField(
              controller: _editController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
            ),
            onFocusChange: (hasFocus) {
              if (hasFocus) {
                _editController.clear();
              }
            },
          ),
        ),
      ),
    );
  }