Flutterでバリデーションをかける

初めましてblueです。

現在、ITベンチャー企業でWEBキャンペーンシステムの運用並びに要件定義、ECサイトの開発を行なっています。

今回はFlutterでバリデーションをかける方法について記事にしてみました！

使用するメソッド

Form class - widgets library - Dart API

GlobalKey class - widgets library - Dart API

実装コード

final _formKey = GlobalKey<FormState>();

GlobalKey:フォームを一意に識別するためのキー

Form(
     key: _formKey,
     )

Formウィジェットを作成。
先程の_formKeyを設定しています。

TextFormField(
           validator: (value) {
             if (value == null || value.isEmpty) {
               return 'テキストを入力してください';
             }
           },
         ),

TextFormField内でvalidatorを使用し、入力の内容についてバリデーションをかける。
入力内容がない場合、テキストを返します。

if (_formKey.currentState!.validate()) {
                 ScaffoldMessenger.of(context).showSnackBar(
                   const SnackBar(content: Text('送信完了')),
                 );
               }

_formKey.currentState!.validate()でバリデーションチェックしています。
成功した時はメッセージを表示。

全体コード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   const appTitle = 'フォームのバリデーション';

   return MaterialApp(
     title: appTitle,
     home: Scaffold(
       appBar: AppBar(
         title: const Text(appTitle),
       ),
       body: const MyCustomForm(),
     ),
   );
 }
}

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

 @override
 MyCustomFormState createState() {
   return MyCustomFormState();
 }
}

class MyCustomFormState extends State<MyCustomForm> {
 final _formKey = GlobalKey<FormState>();

 @override
 Widget build(BuildContext context) {
   return Form(
     key: _formKey,
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         TextFormField(
           validator: (value) {
             if (value == null || value.isEmpty) {
               return 'テキストを入力してください';
             }
           },
         ),
         Padding(
           padding: const EdgeInsets.symmetric(vertical: 16.0),
           child: ElevatedButton(
             onPressed: () {
               if (_formKey.currentState!.validate()) {
                 ScaffoldMessenger.of(context).showSnackBar(
                   const SnackBar(content: Text('送信完了')),
                 );
               }
             },
             child: const Text('送信'),
           ),
         ),
       ],
     ),
   );
 }
}

実装画像