Hello Flutteristas, it is going to be a shorter blog compared to my other ones. Here we will implement validation in the textField. It will validate text while a user is typing and if our conditions are satisfied, the SUBMIT button will be clickable.
For those who are new to Flutter and have no idea about streams and Rx-Dart, I will suggest them to go through this blog where I have described the basics of Streams and Subjects.
So this is what we want to achieve.
We will discuss the logic part first and then the UI.
Let’s create 2 Streams first and two sinks as we have two fields to validate as per the UI.
Next, we will need two StreamTransformers as we will transform the data in the stream with our logic.
So what is StreamTransformer?
Suppose we are getting some values from a stream, and those values are needed to be transformed based on our condition. Here StreamTransformer comes into play. In this case, we are checking if the input is a valid email address or not. If yes it will pass the values, otherwise, we will add an error to the Stream. To learn more about StreamTransformer, you can go to flutter.dev.
Then we will pass the two transformers in our streams.
Now we need another stream to get the result from the above two streams. If both the conditions are satisfied, this stream will send a boolean true to the button, thus making it clickable.
That’s all for the logic part. Here’s the full business logic.
Coming to the UI part, it’s pretty simple to make. We are just wrapping our widgets with StreamBuilder and passing the streams. Take a look.
and voila! We are done.
