[Flutter]フォームに送信ボタンを追加するには？

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

フォームに送信ボタンを追加する方法を紹介します。

方法

フォームに送信ボタンを追加するには、まず「GlobalKey」を用意します。

final _formKey = GlobalKey<FormState>();

次に、Formウェジェットに、用意したGlobalKeyを設定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Form(
        key: _formKey,
        child: Column(),
      ),
    );
  }

最後に、送信ボタンを追加します。

Formの送信ボタンのタップ処理には、「GlobalKey」を使ったバリデーションと呼ばれる処理をします。（バリデーションは送信が有効か無効かを検証することです）

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
    //送信の処理
      print('送信');
    }
  },
  child: Text('送信'),
)

「_formKey.currentState!.validate()」がバリデーションの処理にあたります。

この処理を細かく説明すると、まず「_formKey.currentState()」でフォームの状態を取得します。

そして、フォームの状態を取得したら、今度は「validate()」を呼び出します。

この「validate」は、フォームの送信が有効かを検証します。

そして、有効ならば「true」、無効ならば「false」を返します。

これがバリデーションの処理です。

フォームのボタンには、この処理を追加し、有効と無効で処理を切り替える必要があります。

使用例

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              validator: (value) {
                if (value == null || value.length < 5) {
                  return 'Please enter some Text'; //無効
                } else {
                  print('OK');
                  return null; //有効
                }
              },
            ),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  print('送信');
                }
              },
              child: Text('送信'),
            )
          ],
        ),
      ),
    );
  }

まとめ

フォームに送信ボタンを追加するには、まず「GlobalKey」をFormに指定します。

そして、GlobalKeyのcurretnStateメソッドとvalidateメソッドを使って、バリーデーション処理をします。

バリデーション処理をしてから送信処理などを行います。