Flutter – Design Sample Registration Page

To prevent unauthorized access to personal information, it is a good practice to authenticate users before granting access to websites, mobile applications, and computer applications, then register and then login. In this article, we are going to explain how to build a Registration page user interface. We have used the TextField widget, for user input as First name, last name, email, and Mobile number. A sample video is given below to get an idea about what we are going to do in this article.

Note: Here, flutter-logo.png file is copied into the asset/images folder in this flutter application and written into pubspec.yaml file to get it in our code.

# To add assets to your application, add an assets section, like this:
assets:
– asset/images/

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Main.dart or main() function

First of all import material.dart file.

import 'package:flutter/material.dart';

Then import register.dart file.

import 'package:flutter_application_3/screen/register.dart';

Then execute a main function.

void main() => runApp(MaterialApp)

Then add initialRoute to the register page.

initialRoute: '/',
     routes: {'/': (context) => Register()},

Dart

import 'dart:async';
import 'package:flutter/material.dart';

import 'package:flutter_application_3/screen/register.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: {'/': (context) => Register()},
    ));

Validation:

•  If you want to apply validation, then you can use it by going to pubspec.yaml file and setting its dependency.
   In the below code, we have mentioned the code of validation in register file.
•  If you use validation, you have to use the package with validation in the register file and set the dependency as well.

import 'package:form_field_validator/form_field_validator.dart'; 

Step 3: Second Page Create Register.dart file

• First of all, we create a second-page register.dart file name.
• then import material.dart file.

import 'package:flutter/material.dart';

Note: If you use validation, you have to use the package with validation in the register file and set the dependency as well.

import 'package:form_field_validator/form_field_validator.dart';

• Then we create the stateful widget.
• Set Scaffold’s AppBar property as follows to make a heading for our application.
• For this UI, all widgets are placed inside the Column widget, into the Scaffold body. The first child of Column is the Container widget which holds the Image widget as its child.
• Here, the flutter-logo.png file is copied into the asset/images folder in this flutter application and written into pubspec.yaml file to get it in our code.
• Then, for First name, last name, email, and mobile number use the TextField widget. TextField widget is an input widget that helps you to take input from the user.

Example of email Textfield and use Validation:

 Padding(
         padding: const EdgeInsets.all(8.0),
         child: TextFormField(
            validator: MultiValidator([
                         RequiredValidator(errorText: 'Enter email address'),
                         EmailValidator(
                             errorText: 'Please correct email filled'),
                       ]),
                       decoration: InputDecoration(
                           hintText: 'Email',
                           labelText: 'Email',
                           prefixIcon: Icon(
                             Icons.email,
                             color: Colors.lightBlue,
                           ),
                           errorStyle: TextStyle(fontSize: 18.0),
                           border: OutlineInputBorder(
                               borderSide: BorderSide(color: Colors.red),
                               borderRadius:
                                   BorderRadius.all(Radius.circular(9.0)))),
               ),
         ),

• Here, the Padding widget helps you to give some space all around your TextField widget.
• Here we can wrap the Text widget in the GestureDetector widget which gives us onTap() to navigate. OR create this button same as Forgot Password button to get the OnPressed() event.

Here is the full code to refer to register.dart file:

Dart

import 'package:flutter/material.dart';
import 'package:form_field_validator/form_field_validator.dart';
import 'package:flutter/foundation.dart';

class Register extends StatefulWidget {
  const Register({Key? key}) : super(key: key);

  @override
  State<Register> createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  Map userData = {};
  final _formkey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('register'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Form(
                key: _formkey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(top: 20.0),
                      child: Center(
                        child: Container(
                          width: 200,
                          height: 150,
                          //decoration: BoxDecoration(
                          //borderRadius: BorderRadius.circular(40),
                          //border: Border.all(color: Colors.blueGrey)),
                          child: Image.asset('assets/logo.png'),
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: TextFormField(
                        // validator: ((value) {
                        //   if (value == null || value.isEmpty) {
                        //     return 'please enter some text';
                        //   } else if (value.length < 5) {
                        //     return 'Enter atleast 5 Charecter';
                        //   }

                        //   return null;
                        // }),
                        validator: MultiValidator([
                          RequiredValidator(errorText: 'Enter first named'),
                          MinLengthValidator(3,
                              errorText: 'Minimum 3 charecter filled name'),
                        ]),

                        decoration: InputDecoration(
                            hintText: 'Enter first Name',
                            labelText: 'first named',
                            prefixIcon: Icon(
                              Icons.person,
                              color: Colors.green,
                            ),
                            errorStyle: TextStyle(fontSize: 18.0),
                            border: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(9.0)))),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        validator: MultiValidator([
                          RequiredValidator(errorText: 'Enter last named'),
                          MinLengthValidator(3,
                              errorText:
                                  'Last name should be atleast 3 charater'),
                        ]),
                        decoration: InputDecoration(
                            hintText: 'Enter last Name',
                            labelText: 'Last named',
                            prefixIcon: Icon(
                              Icons.person,
                              color: Colors.grey,
                            ),
                            errorStyle: TextStyle(fontSize: 18.0),
                            border: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(9.0)))),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        validator: MultiValidator([
                          RequiredValidator(errorText: 'Enter email address'),
                          EmailValidator(
                              errorText: 'Please correct email filled'),
                        ]),
                        decoration: InputDecoration(
                            hintText: 'Email',
                            labelText: 'Email',
                            prefixIcon: Icon(
                              Icons.email,
                              color: Colors.lightBlue,
                            ),
                            errorStyle: TextStyle(fontSize: 18.0),
                            border: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(9.0)))),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        validator: MultiValidator([
                          RequiredValidator(errorText: 'Enter mobile number'),
                          PatternValidator(r'(^[0,9]{10}$)',
                              errorText: 'enter vaid mobile number'),
                        ]),
                        decoration: InputDecoration(
                            hintText: 'Mobile',
                            labelText: 'Mobile',
                            prefixIcon: Icon(
                              Icons.phone,
                              color: Colors.grey,
                            ),
                            border: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.red),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(9)))),
                      ),
                    ),
                    Center(
                        child: Padding(
                      padding: const EdgeInsets.all(18.0),
                      child: Container(
                        // margin: EdgeInsets.fromLTRB(200, 20, 50, 0),
                        child: RaisedButton(
                          child: Text(
                            'Register',
                            style: TextStyle(color: Colors.white, fontSize: 22),
                          ),
                          onPressed: () {
                            if (_formkey.currentState!.validate()) {
                              print('form submiitted');
                            }
                          },
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30)),
                          color: Colors.blue,
                        ),

                        width: MediaQuery.of(context).size.width,

                        height: 50,
                      ),
                    )),
                    Center(
                      child: Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Center(
                          child: Text(
                            'Or Sign Up Using',
                            style: TextStyle(fontSize: 18, color: Colors.black),
                          ),
                        ),
                      ),
                    ),
                    Center(
                      child: Padding(
                        padding: EdgeInsets.only(top: 20, left: 90),
                        child: Row(
                          children: [
                            Container(
                                height: 40,
                                width: 40,
                                child: Image.asset(
                                  'assets/google.png',
                                  fit: BoxFit.cover,
                                )),
                            Container(
                              height: 70,
                              width: 70,
                              child: Image.asset(
                                'assets/vishal.png',
                                fit: BoxFit.cover,
                              ),
                            ),
                            Container(
                              height: 40,
                              width: 40,
                              child: Image.asset(
                                'assets/google.png',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Center(
                      child: Container(
                        padding: EdgeInsets.only(top: 60),
                        child: Text(
                          'SIGN IN',
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                      ),
                    )
                  ],
                )),
          ),
        ));
  }
}

Output: