FlutterのTextFieldでバリデーション

BLoCパターンでログインフォームにメールアドレスのバリデーションを実装しました。

UI側

return StreamBuilder<String>(
  stream: _bloc.email,
  builder: (_, AsyncSnapshot<String> snapshot) {
    return TextField(
      onChanged: _bloc.changeEmail,
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: FieldLabelConstant.email,
        errorText: snapshot.error,
      ),
    );
  },
);

BLoC側

final BehaviorSubject<String> _email = BehaviorSubject<String>();
Observable<String> get email => _email.stream.transform(_validateEmail);
Function(String) get changeEmail => _email.sink.add;

BLoC側のバリデーション処理

final StreamTransformer<String, String> _validateEmail =
     StreamTransformer<String, String>.fromHandlers(
         handleData: (String email, EventSink<String> sink) {
   if (email.contains('@')) {
     sink.add(email);
   } else {
     sink.addError('');
   }
 });

結果

メールアドレス欄に文字を入力したらバリデーションをかけることが出来ます。入力して直ぐにエラーメッセージを出すのは嫌だと言う方は、submitの段階でバリデーションにかければ同等の処理を行えます。

※初期値が入っているものに関してはこの方法だと対処出来ないので下記の記事を参考にしてください。

現在執筆中!!すぐにかきあげます。

全てはポテトのために