Make login page design with Flutter 

In this blog, We will design a simple login page, with e-mail and password validation. We will get the final result like the attached image.

Step 1: 

We make an app entry main class. In this class, we have to define app routes.

Step 2: LoginPage Design class

How is form input field validation handled in flutter?

Flutter has validation API, you need to use Form with TextFormField.

Form: Form is a container for FormFields (and its descendants) and other widgets. We also have saved, validate, and reset functions. These facilitate easier validation and manipulation of data inputted in one or multiple FormFields.

Properties
GlobalKey: We pass GlobalKey<FormState> _key in Form as the attribute to access form state to save, validate, and reset.

Autovalidate: We pass bool _validate in Form If true, form fields will validate and update their error text immediately after every change. Otherwise, you must call FormState.validate to validate.

TextFormField: A FormField that contains a TextField. This is a convenience widget that wraps a TextField widget in a FormField.

Step 3:  LoginRequestData class

You need to create a data model class for storing input login input data.

Step 4:  FormValidator class

We created a separate helper class for validating Form fields data.
In FormValidator class, we have defined methods to validate password and email Id.

 

 

 

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close