Basic Register Page With Validation in Flutter

Pandiyan Mani

·

Follow

3 min read

·

Oct 21, 2022

--

Listen

Share

Hi friends , lets see how to design register page with some basic validation like email and password.

Created a file under lib folder as RegisterPage.dart and you can see the code below for reference

import 'package:flutter/material.dart';

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

  @override
  State<RegisterPage> createState() => _RegisterPageState();

}

class _RegisterPageState extends State<RegisterPage> {

  bool validateEmail(String value) {
    bool emailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(value);
    return emailValid;
  }

  @override
  Widget build(BuildContext context) {
    final _formkey = GlobalKey<FormState>();
    var size = MediaQuery.of(context).size;
    return Form(
      key: _formkey,
      child: Scaffold(
        body: SafeArea(
          child: Container(
            padding: EdgeInsets.fromLTRB(40, 0, 40, 0),
            child:Center(
              child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("Welcome To Register Page", style: TextStyle(fontSize: 30,
                          fontStyle: FontStyle.italic,
                          color: Colors.red)),
                      SizedBox(height: 20,),
                      Text("Enter User Personal Details", style: TextStyle(fontSize: 20,
                          fontStyle: FontStyle.italic,
                          color: Colors.black)),
                      SizedBox(height: 20,),
                      TextFormField(validator: (value) {
                        if(value == null || value.isEmpty) {
                          return "Enter User Email ID";
                        } else if(!validateEmail(value)) {
                          return "Invalid Email ID";
                        }
                        return null;
                      },
                        style: TextStyle(fontSize: 20,
                          fontStyle: FontStyle.italic,
                          color: Colors.black) ,
                        decoration: InputDecoration(
                        errorStyle: TextStyle(fontSize: 10,
                            fontStyle: FontStyle.italic,
                            color: Colors.red),
                        labelText: "Enter User Email ID",
                        labelStyle: TextStyle(fontSize: 20,
                            fontStyle: FontStyle.italic,
                            color: Colors.black),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
                      ),),
                      SizedBox(height: 20,),
                      TextFormField(obscureText: true,validator: (value) {
                        if(value == null || value.isEmpty) {
                          return "Enter User Password";
                        } else if(value.length < 6) {
                          return "Password should be greater then 5 digit";
                        }
                        return null;
                      }, style: TextStyle(fontSize: 20,
                          fontStyle: FontStyle.italic,
                          color: Colors.black) ,
                        decoration: InputDecoration(
                            errorStyle: TextStyle(fontSize: 10,
                                fontStyle: FontStyle.italic,
                                color: Colors.red),
                            labelText: "Enter Password",
                            labelStyle: TextStyle(fontSize: 20,
                                fontStyle: FontStyle.italic,
                                color: Colors.black),
                            border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
                        ),),
                      SizedBox(height: 20,),
                      Container(width: size.width,height: 40,
                        child: ElevatedButton(onPressed: (){
                          if(_formkey.currentState!.validate()) {

                          }
                        },
                        child: Text("SIGN IN", style: TextStyle(fontSize: 20,
                            fontStyle: FontStyle.italic,
                            color: Colors.black)),
                        style: ElevatedButton.styleFrom(backgroundColor: Colors.red),),
                      )
                    ],
                  )
              )
            )
          ),
        )
      ),
    );
  }
}

And you can call this page from main.dart as below

import 'package:flutter/material.dart';

import 'RegisterPage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const RegisterPage(),
    );
  }
}

Attached Screen shot for reference with and without validation