Flutter: Basic Login Screen

How to show/hide password in TextFormField?

UI-Login Form

A Basic login involves either username, Email sometimes both with a password. Here, We going to learn the following:

1. Validate Email
2. Show Error, warning, hint to TextField.
3. Obscure Password.
4. Update the state based on user interaction.
5. Complete Code Gist.

Validate Email: To achieve this, We can simply use regex “^[a-zA-Z0–9.a-zA-Z0–9.!#$%&’*+-/=?^_`{|}~]+@[a-zA-Z0–9]+\.[a-zA-Z]+”. There are many other regexes for email validation and any of them can be used.

//
bool isValidEmail() {
   if ((_email == null) || (_email.length == 0)) {
         //if user did not typed aything in email box we will not show error       
         return true; 
   }
   return RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(_email);
}

Show Error, warning, hint to TextField: To do this we can simply use InputDecoration of TextField like following:

decoration: InputDecoration(
       labelText: "Email",
       hintText: 'Enter your password',
       errorText: isValidEmail() ? null : "Invalid Email Address"
)