As we all know flutter is full of widgets we can achieve almost every design in the universe. Flutter is fast enough to do that.
This design is taken from here.
Check out the final output below.
Challenge 1 Identify Field is Valid or Not.
We need to Identify when the input is valid and invalid. For that, we need to extract a validator from the widget so that we can get the error message to identify valid or invalid.
Here InputStatus is an enum for clearance.
At then we need to return the error so that the form can validate when submitting the form.
Challenge 2 Changing Icons based on Input validation.
The most important part of the design is to move the error icon and success icon back and forth.
Focused
Error
Success
For this, we need to identify that the input is valid or invalid. Here comes the second challenge. When it comes to dart we don’t have class spread syntax like in javascript. It is very difficult to make a dynamic widget as a child.
Mainly, for this reason, we cannot use any other form field dynamically. We need to make one as I did for the text form field.
But is very easy to make one for your own project. Check out the custom_text_form_field.dart and change the builder return value to any other widget.
Let’s make it simple as possible so, I decided to use a set state.
Define all the changing variables on top, change the variables when validation changes.
How we know the input is valid or invalid that’s where the validator comes in. We extracted to identify the error.
Challenge 3 Design Part
As you can see the design it is a row widget. two columns, one input box, and tow, stack widget to show error and success icon top of each other.
Check out the full source code here
As I tried almost everything and end up here. If you find any other solution please share it in the comments Thanks for reading
