[Flutter]TextFormFieldにセーブされた時の処理（onSaved）を設定するには？

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

TextFormFieldにフォームがセーブされた時に呼び出す処理を指定する方法を紹介します。

方法
使用例

方法

TextFormFieldのセーブされた時の処理を設定するには、引数「onSaved」を使います。

具体的には、TextFormFieldに「void (String?){}」型の関数を指定し、関数内でセーブの処理を指定します。

TextFormField(
  onSaved: (String? value) {
    //セーブされた時の処理
  },
),

onSavedの呼ばれるタイミングは、Formのキーのsave()メソッドが使われる時です。

なので、saveメソッドが呼び出されなければ、onSavedは実行されません。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final _formKey = GlobalKey<FormState>();
  final _editingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Form(
          key: _formKey,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextFormField(
                  onSaved: (String? value) {
                    _editingController.clear();
                  },
                  controller: _editingController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                ),
                SizedBox(
                  height: 50,
                ),
                ElevatedButton(
                  onPressed: () => _formKey.currentState?.save(),
                  child: Text('Save'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}