[Flutter]TextFormFieldのフォーカス(unfocus)が外れた時に処理をするには？

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

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

方法
使用例

方法

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

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

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

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

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

使用例

以下は、使用例です。

  final _editController = TextEditingController();

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