Flutter stream validation with combined entries for password matching

As flutter developers already know, one of the main characteristics of flutter are the Streams and Future. For streaming and reactive programing nothing better than RXDart. RX have been battle tested in almost all modern programing language. In flutter RXDart above version 0.23.x have changed it’s Observable class to work with same nomenclature of Flutter Streams, therefore all the methods already available in flutter were adapted to work in harmony as an abstraction layer. To help refactor the older RxDart codes they have created a tool rxdart_codemod for automatically migration.

Want to read this story later? Save it in Journal.

Without further ado, let’s get start showing what will be done in this tutorial.

The main advantage of stream validation reside in the possibility to warn the user when he is typing in TextField without the need to rebuild the page with setState(()=>{}). When the user is typing in TextField the method onChange will notify the Stream that will transform the result into a validation method. The validation will sink the input when it pass thought the rule, otherwise will add an error.

if (value.length == 0) {
sink.addError('Enter the e-mail');
} else if (!value.contains('@')) {
sink.addError('The e-mail is invalid!');
}

After the error was sinked into the stream it can be used to show in the errorText of TextField decoration

StreamBuilder<Object>(
  stream: _blocRegistration.email$,
  builder: (context, snapshot) {
  return TextField(
    controller: _controllerEmail,
    onChanged: (value) {
      _blocRegistration.setEmail(value);  
    },
    decoration: InputDecoration(
    errorText: snapshot.error )
  )
);

Follow bellow all the files needed to display the sample above.

The flutter main class: main.dart:

Here is the form that will use the bloc (business logic component). This page is directly called by main.dart: form.dart

The Bloc class that will mix with Validate class.

And finally the Validate class that will validate the text inputs.

Click here for the complete project on github

That’s it :D

📝 Save this story in Journal.