【Flutter】（簡単）バリデーションを実装する手順

はじめに

今回は自分がよく忘れてしまうflutterでのバリデーションの手順を自分用に記録していきたいと思います。

ステップ１ TextFormFieldを作る

validation_example.dart

Column(
    children : [
        TextFormField(),
    ],
)

ステップ２　Formで囲んでkeyを割り当てる

validation_example.dart

final _formKey = GlobalKey<FormState>(); //keyを定義

 @override
  Widget build(BuildContext context) {
                    .
                    .
                    .
  Form(
    key : _formKey, //keyを割り当てる
      child : Column(
        children : [
          TextFormField(),
      ],
    )
  ),

ステップ３ バリデーションを実装する

validation_example.dart

Form(
  key : _formKey, //keyを割り当てる
    child : Column(
      children : [
        TextFormField(
          // バリデーションの実装ーーーーーーーーーーーーーーーー
          validator: (value) {
             if (value == null || value.isEmpty) {
               return '何か文字を入力してください'; 
             }
             return null;
           },
           // バリデーションの実装ーーーーーーーーーーーーーーーー
      ),
    ],
  )
),

ステップ４ バリデーションメソッドを呼び出して、バリデーションをかける

今回は決定ボタンを押した際に、フォームに入力した文字をprintで出力したいと思います。

validation_example.dart

Form(
  key : _formKey, //keyを割り当てる
    child : Column(
      children : [
        TextFormField(
          // テキストフォームに入力された値（value）をtextという変数に代入する
          onChanged: (value) {
            text = value;
          },
            // バリデーションの実装ーーーーーーーーーーーーーーーー
            validator: (value) {
               if (value == null || value.isEmpty) {
                 return '何か文字を入力してください'; 
               }
               return null;
             },
             // バリデーションの実装ーーーーーーーーーーーーーーーー
       ),
       // フォームとボタンの間に空白をつける
       SizedBox(
          height: 30.0,
       ),
       //決定ボタン
       ElevatedButton(
          child: Text('決定'),
            onPressed: () {
              // バリデーションメソッドを用いてバリデーションをかける↓
              if (_formKey.currentState!.validate()) { 
                 print(text);
              }
            },
       ),
    ],
  )
),

最後に

今回は自分がよく手順を忘れるバリデーションの実装の仕方を自分が見返すようにまとめました。
もしに役に立ったならいいねおねがいします！