タグ: GlobalKey

テキストフィールドにユーザが情報を入力することが必要な場面がapp(アプリケーション・サービス)にはあります。例えば、メールアドレスとパスワードのセットを用いて、ユーザーにログインしてもらう必要がある場合です。

appを安全で利用しやすいものにするために、ユーザーから提供されたデータが有効なデータかを確認する必要があります。もしユーザーが正しいデータをフォームに入力した場合、処理を進めます。不正なデータでサブミットしようとした場合、エラーメッセージを表示して、何が問題かをユーザーに示す必要があります。

このサンプルでは、一つのテキストフィールドを持つフォームにバリデーションを追加する方法を以下のステップで学んでいきます。

 

1. GlobalKeyを用いてFormを生成する。
2. TextFormFieldをバリデーションロジックと共に追加する。
3. バリデーションとサブミットを行うためのボタンを設置する。

---

1.GlobalKeyを用いてFormを生成する。

まずFormを生成します。Formウィジェットは複数のフォームフィールドをグループ化しバリデートするためのコンテナとしての役割を持ちます。

フォームを生成する時、GlobalKeyを用意します。このGlobalKeyによりそれぞれのフォームを一意(ユニーク)に識別します。そしてこの後のステップでバリデートできるようになります。

// カスタムフォームウィジェットを定義します。

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// MyCustomFormウィジェットに対応するStateクラスを定義します。
// このクラスがフォームに関するデータを保持します。
class MyCustomFormState extends State<MyCustomForm> {
  // フォームウィジェットを一意(ユニーク)に識別するし、
  // フォームのバリデーションを可能にするためにglobal keyを生成します。 
  //
  

…