[Flutter]TextFormFieldのフォーカス(focus)が変わった(change)時に処理をするには？

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

TextFormFieldのフォーカスの状態が変わった時に処理をする方法を紹介します。

方法
使用例

方法

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

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

そして、Focusの引数「onFocusChange」に「void (bool) {}」型の関数を指定します。

Focus(
  child: TextFormField( ),
  onFocusChange: (hasFocus) {
    //処理
  },
),

onFocusChangeの関数の引数は、フォーカスされた時はtrue、フォーカスが外れた時はfalseが渡されます。

使用例

以下は、使用例です。

  var _isFocus = false;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _isFocus ? 'Focus Now' : 'Not Focus',
                style: TextStyle(fontSize: 30),
              ),
              Focus(
                child: TextFormField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                ),
                onFocusChange: (hasFocus) {
                  setState(() {
                    if (hasFocus) {
                      _isFocus = true;
                    } else {
                      _isFocus = false;
                    }
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }