こんにちは、株式会社Pentagonでアプリ開発をしている山田です。
https://pentagon.tokyo
今日は、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 というメソッドが実装されていました。
この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],これにより、数値のみしか入力出来なくなります。
