【Flutter】Formのvalidation checkの方法

今日は、Formのvalidation checkについて学んだので簡単にまとめたいと思います。

■【前提条件1】validator を使うには、Form widgetで囲む必要がある。

入力した数値をチェックする際に、Form widget で包含する必要があります。

■【前提条件2】Global key を定義する。

このGlobal keyは、要素を一意に識別する為のものです。そして、他のオブジェクトを結びつける為のものでもあります。

上記の前提条件を記載すると、以下のようなコードになります。

import 'package:flutter/material.dart';

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

class MyCustomFormState extends State<MyCustomForm> {
　// 前提条件2
 final _formKey = GlobalKey<FormState>();

 @override
 Widget build(BuildContext context) {
   // 前提条件1
   return Form(
     key: _formKey,
     child: Column(
       children: <Widget>[
        // ここにコードを書いていきます。
       ],
     ),
   );
 }
}

■値が空か否かのチェック方法

ここでは、TextFormFieldに書かれた値が空か否かのチェックをしています。

TextFormField(
 validator: (value) {
   if (value == null || value.isEmpty) {
     return '値が空です。';
   }
   return null;
 },
),

■文字列が30文字以内をチェックする方法

ここでは、入力した日本語が30文字以内か否かをチェックしています。

TextFormField(
 validator: (value) {
   if (value.length > 30) {
     return '30文字以内で記入してください。';
   }
   return null;
 },
),

■値が30以内かをチェックする方法

ここでは、入力した値が30以内か否かをチェックしています。

TextFormField(
 validator: (value) {
   if (int.parse(value) >  30) {
     return '値を30以内で記入してください。';
   }
   return null;
 },
),

Q1. C#で用いられている、.nullOrEmptyでチェック出来ないの？

※この.isNullOrBlank()はdeprecatedとなっておりました。isBlank()を代わりにご使用ください。

GetX パッケージ内に、 isBlank というメソッドが実装されていました。

get | Flutter Package

jonataslaw/getx

このGetXは簡単に説明すると、主に状態管理やルート管理を行ってくれるパッケージです。現在弊社で開発中のアプリにも用いられています。

コードを見てみますと、以下のように実装されています。

 static bool? isBlank(dynamic value) {
   return _isEmpty(value);
 }

もしこのメソッドをvalidationで使用するなら、以下の様に記述します。

 validator: (value) {
     if (value.isBlank!) {
        return 'テキストを入力してください。';
     }
        return null;
 },

Q2. if (int.parse(value) > 30) { でvalueが数字でない場合クラッシュしないの？

はい。クラッシュします。

なので、もし数値だけ入力させたい場合は、入力の際にはキーボードを数値のみにする。

keyboardType: TextInputType.number

もしくは、ReqExpで数値のパターンを持っておき、check時に使用する。というパターンです。

 RegExp exp = new RegExp(r'[0-9]');
 
 //一部省略
  validator: (value) {
    if (!exp.hasMatch(value!)) {
       return '数値を入力してください。';
    } else if (int.parse(value) > 30) {
       return '値を30以内で記入してください。';
    }
       return null;
    },

しかし、上記だとコピペなどでも文字列を入力するとクラッシュします。
その為、以下のimputFormattersを追記して下さい。

 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],

これにより、数値のみしか入力出来なくなります。

#Flutter