Register page with Validation and Data passing from One page TextField to another page TextField

import "package:firebase/UI_Tasks/Details.dart";
import "package:flutter/gestures.dart";
import "package:flutter/material.dart";

/// Validation Form and Data passing from One page TextField to Another page TextField

void main()
{
runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
const MyApp({super.key});
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: "Validation",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.brown,
),
home: const ValidationDemo(),
);
}
}
class ValidationDemo extends StatefulWidget
{
const ValidationDemo({super.key});
@override
State<ValidationDemo> createState()
{
return ValidationDemoState();
}
}
class ValidationDemoState extends State<ValidationDemo>
{
TextEditingController emailController = new TextEditingController();
TextEditingController usernameController = new TextEditingController();
TextEditingController passwordController = new TextEditingController();

final bool _autoValidate = true;
bool _obscureText = true;

final formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context)
{
return GestureDetector(
onTap: (){
return FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
appBar: AppBar(
title: const Text("Validation"),
centerTitle: true,
),
body: Center(
child: Form(
key: formKey,
autovalidateMode: _autoValidate ? AutovalidateMode.always : AutovalidateMode.disabled,
child: Container(
width: 300.0,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/Lord-Hanuman.jpg"),
radius: 50.0,
),
const SizedBox(height: 20.0),
TextFormField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
autovalidateMode: _autoValidate ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value){
if(value == null || value.isEmpty)
{
return "Please Enter Email";
}
else if(!RegExp(r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))'
r'@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$').hasMatch(value))
{
return "please enter valid email address";
}
return null;
},
decoration: InputDecoration(
hintText: "Enter the email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
suffixIcon: IconButton(
onPressed: (){
emailController.clear();
},
icon: const Icon(Icons.clear),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: usernameController,
autovalidateMode: _autoValidate ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value){
if(value == null || value.isEmpty)
{
return "Please Enter required detail";
}
return null;
},
decoration: InputDecoration(
hintText: "Enter the username",
labelText: "username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
suffixIcon: IconButton(
onPressed: (){ usernameController.clear(); },
icon: const Icon(Icons.clear),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: passwordController,
keyboardType: TextInputType.visiblePassword,
obscureText: _obscureText,
autovalidateMode: _autoValidate ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value){
if(value == null || value.isEmpty)
{
return "please Enter required details";
}
else if(value.length < 5)
{
return "please Enter valid password";
}
return null;
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: () {
setState(() {
_obscureText = !_obscureText;
},);
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off,),
),
hintText: "Enter the password",
labelText: "password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
const SizedBox(height: 30.0),
ElevatedButton(
onPressed: (){
if(emailController.text.toString() == "" ||
usernameController.text.toString() == "" ||
passwordController.text.toString() == "")
{
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("please Fill all the details..."),),
);
showDialog(
context: context,
builder: (BuildContext context){
return AlertDialog(
title: const Text("Fill all details",
style: TextStyle(fontWeight: FontWeight.bold),
),
content: const Text("Please fill all the details"),
actions: [
TextButton(
onPressed: (){
Navigator.pop(context);
},
child: const Text("Ok"),
),
],
);
},
);
}
else if(formKey.currentState!.validate())
{
showDialog(
context: context,
builder: (BuildContext context){
return AlertDialog(
title: const Text("SUBMIT", style: TextStyle(fontWeight: FontWeight.bold),),
content: const Text("Are you sure ?"),
actions: <Widget>[
TextButton(
onPressed: (){
Navigator.pop(context);
},
child: const Text("No"),
),
TextButton(
onPressed: (){
// Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context){
return DetailDemo(
emailController.text.toString(),
usernameController.text.toString(),
passwordController.text.toString()
);
},
),
);
},
child: const Text("Yes"),
),
],
);
}
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Its Continue..."),),
);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
fixedSize: const Size(360.0, 50.0),
),
child: const Text("SUBMIT", style: TextStyle(fontSize: 25.0),),
),
const SizedBox(height: 20.0),
RichText(
text: TextSpan(
children: [
const TextSpan(text: "New User? ", style: TextStyle(color: Colors.black),),
TextSpan(text: "Register",
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
),
recognizer: TapGestureRecognizer()
..onTap = (){ },
),
],
),
),
],
),
),
),
),
),
),
);
}
}

class DetailDemo extends StatefulWidget
{
var email, username, password;
DetailDemo(this.email, this.username, this.password, {super.key});

@override
State<DetailDemo> createState() =>
_DetailDemoState();
}

class _DetailDemoState extends State<DetailDemo> {

TextEditingController text1 = new TextEditingController();

TextEditingController text2 = new TextEditingController();

TextEditingController text3 = new TextEditingController();

final _formKey = GlobalKey<FormState>();

final bool _autoValidation = true;
bool _obscureText = true;

@override
void initState() {
super.initState();
text1.text = widget.email.toString();
text2.text = widget.username.toString();
text3.text = widget.password.toString();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Edit Details"),
centerTitle: true,
),
body: Center(
child: Form(
key: _formKey,
autovalidateMode: _autoValidation ? AutovalidateMode.always : AutovalidateMode.disabled,
child: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: text1 ,
keyboardType: TextInputType.emailAddress,
autovalidateMode: _autoValidation ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value) {
if(value == null || value.isEmpty)
{
return "please fill the details";
}
else if(!RegExp(r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))'
r'@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$').hasMatch(value))
{
return "please enter valid email address";
}
return null;
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: (){
text1.clear();
},
icon: const Icon(Icons.clear),
),
labelText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: text2,
keyboardType: TextInputType.name,
validator: (value) {
if(value == null || value.isEmpty)
{
return "please Enter required details";
}
return null;
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: (){
text2.clear();
},
icon: const Icon(Icons.clear),
),
labelText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: text3,
keyboardType: TextInputType.visiblePassword,
obscureText: _obscureText,
validator: (value) {
if(value == null || value.isEmpty)
{
return "please enter required details";
}
else if(value.length < 5)
{
return "please enter valid password";
}
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: (){
setState(() {
_obscureText = !_obscureText;
},);
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off),
),
labelText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
),
),
const SizedBox(height: 30.0),
ElevatedButton(
onPressed: (){
if(text1.text.toString() == "" || text2.text.toString() == ""||
text3.text.toString() == "")
{
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("Fill all details",
style: TextStyle(fontWeight: FontWeight.bold),
),
content: const Text("Please fill all details"),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("Ok"),
),
],
);
},
);
}
else if(_formKey.currentState!.validate())
{
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("SAVE DETAILS", style: TextStyle(fontWeight: FontWeight.bold),),
content: const Text("Are You Sure ?"),
actions: <Widget>[
TextButton(
onPressed: (){
Navigator.pop(context);
},
child: const Text("No"),
),
TextButton(
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ValidationDemo();
},
),
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Data Saved..."),),
);
},
child: const Text("Yes"),
),
],
);
},
);
}
},
style: ElevatedButton.styleFrom(
fixedSize: const Size(350.0, 50.0),
backgroundColor: Colors.black,
),
child: const Text("SAVE", style: TextStyle(fontSize: 25.0),),
),
],
),
),
),
),
);
}
}

/// Demo of RegExp for Email Validation
RegExp isValidEmail() {
return RegExp(r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))'
r'@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$');
}

Comments

Popular posts from this blog

Second GET API Calling with Bloc simple Example in Flutter

Stack Container Scrollable Card widget UI with Custom Widget

Pagination with Bloc Pattern in Flutter