Validation Register page
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,
scaffoldBackgroundColor: Colors.grey.shade400,
),
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",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),),
centerTitle: true,
backgroundColor: Colors.indigo,
),
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: 40.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",
labelText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
suffixIcon: IconButton(
onPressed: (){
emailController.clear();
},
icon: const Icon(Icons.clear, color: Colors.black,),
),
),
),
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(11.0),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
suffixIcon: IconButton(
onPressed: (){ usernameController.clear(); },
icon: const Icon(Icons.clear, color: Colors.black),
),
),
),
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,
color: Colors.black,),
),
hintText: "Enter the password",
labelText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
),
),
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...",
style: TextStyle(fontWeight: FontWeight.bold),),),
);
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", style: TextStyle(fontWeight: FontWeight.bold),),
),
],
);
},
);
}
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",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),
),
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",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),
),
],
);
}
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Its Continue...",
style: TextStyle(fontWeight: FontWeight.bold),),),
);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
fixedSize: const Size(360.0, 50.0),
),
child: const Text("SUBMIT",
style: TextStyle(fontSize: 25.0, color: Colors.white, fontWeight: FontWeight.bold),),
),
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",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),
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, color: Colors.black),
),
labelText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: text2,
keyboardType: TextInputType.name,
autovalidateMode: _autoValidation ? AutovalidateMode.always : AutovalidateMode.disabled,
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, color: Colors.black,),
),
labelText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: text3,
keyboardType: TextInputType.visiblePassword,
obscureText: _obscureText,
autovalidateMode: _autoValidation ? 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";
}
},
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: (){
setState(() {
_obscureText = !_obscureText;
},);
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off,
color: Colors.black),
),
labelText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0),
borderSide: BorderSide(
color: Colors.brown,
width: 2,
),
),
),
),
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",
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),
),
],
);
},
);
}
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", style: TextStyle(fontWeight: FontWeight.bold),),
),
TextButton(
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ValidationDemo();
},
),
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Data Saved...",
style: TextStyle(fontWeight: FontWeight.bold),),),
);
},
child: const Text("Yes", style: TextStyle(fontWeight: FontWeight.bold),),
),
],
);
},
);
}
},
style: ElevatedButton.styleFrom(
fixedSize: const Size(350.0, 50.0),
backgroundColor: Colors.black,
),
child: const Text("SAVE",
style: TextStyle(fontSize: 25.0, color: Colors.white, fontWeight: FontWeight.bold),),
),
],
),
),
),
),
);
}
}
/// 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
Post a Comment