Registration page Validation demo
/// Below is Data Passing Example
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget
{
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Data passing",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.cyan,
scaffoldBackgroundColor: Colors.grey.shade400,
),
home: PageOne(),
);
}
}
class PageOne extends StatefulWidget
{
PageOne({super.key});
@override
State<PageOne> createState() {
return PageOneState();
}
}
class PageOneState extends State<PageOne>
{
TextEditingController usernameController = new TextEditingController();
TextEditingController emailController = new TextEditingController();
TextEditingController passwordController = new TextEditingController();
TextEditingController confirmpasswordController = new TextEditingController();
final _formKey = GlobalKey<FormState>();
bool _obscureText = true;
final bool _autovalidate = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Data Passing",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: Center(
child: Form(
key: _formKey,
child: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: usernameController,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value) {
if(value == null || value.isEmpty)
{
return "Please Enter the username";
}
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,
),
),
),
),
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 the Email Address";
}
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: (){},
icon: const Icon(Icons.email, color: Colors.black),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: passwordController,
obscureText: _obscureText,
keyboardType: TextInputType.visiblePassword,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value) {
if(value == null || value.isEmpty)
{
return "Please Enter value password";
}
else if(value.length < 5)
{
return "Please Enter valid password";
}
return null;
},
decoration: InputDecoration(
hintText: "Enter the password...",
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,
),
),
suffixIcon: IconButton(
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off,
color: Colors.black,
),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: confirmpasswordController,
obscureText: _obscureText,
keyboardType: TextInputType.visiblePassword,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
validator: (value) {
if(value == null || value.isEmpty)
{
return "Please Enter the password";
}
else if(value.length < 5)
{
return "Please Enter valid password";
}
return null;
},
decoration: InputDecoration(
hintText: "Enter the confirm password",
labelText: "confirm 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,
),
),
suffixIcon: IconButton(
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off,
color: Colors.black,
),
),
),
),
const SizedBox(height: 40.0),
ElevatedButton(
onPressed: () {
if(usernameController.text.toString() == "" ||
emailController.text.toString() == "" ||
passwordController.text.toString() == "" ||
confirmpasswordController.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 the details in the form"),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("Ok", style: TextStyle(fontWeight: FontWeight.bold),),
),
],
);
},
);
}
else if(_formKey.currentState!.validate())
{
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text("Are You Sure ?",
style: TextStyle(fontWeight: FontWeight.bold),),
content: const Text("Save all the details"),
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 SecondPage(
usernameController.text.toString(),
emailController.text.toString(),
passwordController.text.toString(),
confirmpasswordController.text.toString(),
);
},
),
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Data processing...",
style: TextStyle(fontWeight: FontWeight.bold),),),
);
},
child: const Text("Yes", style: TextStyle(fontWeight: FontWeight.bold),),
),
],
);
},
);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.brown,
fixedSize: const Size(350.0, 50.0,),
),
child: const Text("SUBMIT",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0,
),
),
),
],
),
),
),
),
);
}
}
class SecondPage extends StatefulWidget
{
var username, email, password, confirmpassword;
SecondPage(this.username, this.email, this.password, this.confirmpassword,{super.key});
@override
State<SecondPage> createState() {
return SecondPageState();
}
}
class SecondPageState extends State<SecondPage>
{
TextEditingController uController = new TextEditingController();
TextEditingController eController = new TextEditingController();
TextEditingController passController = new TextEditingController();
TextEditingController conController = new TextEditingController();
final _formKey = GlobalKey<FormState>();
bool _obscureText = true;
bool _obscureText2 = true;
final bool _autovalidate = true;
final bool _autovalidate2 = true;
///Here, above we make two variables _obscureText and _obscureText2 as well as _autovalidate and
///_autovalidate2 because we can make individual Eye effect for appearing
@override
void initState() {
uController.text = widget.username.toString();
eController.text = widget.email.toString();
passController.text = widget.password.toString();
conController.text = widget.confirmpassword.toString();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Page", style: TextStyle(fontWeight: FontWeight.bold),),
centerTitle: true,
),
body: Center(
child: Form(
key: _formKey,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
child: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: uController,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
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,
),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: eController,
keyboardType: TextInputType.emailAddress,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
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: (){},
icon: const Icon(Icons.email, color: Colors.black,),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: passController,
obscureText: _obscureText,
keyboardType: TextInputType.visiblePassword,
autovalidateMode: _autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
decoration: InputDecoration(
hintText: "Enter the Password",
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,
),
),
suffixIcon: IconButton(
onPressed: () {
setState(() {
_obscureText = !_obscureText;
},);
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off),
),
),
),
const SizedBox(height: 20.0),
TextFormField(
controller: conController,
obscureText: _obscureText2,
keyboardType: TextInputType.visiblePassword,
autovalidateMode: _autovalidate2 ? AutovalidateMode.always : AutovalidateMode.disabled,
decoration: InputDecoration(
hintText: "Enter the confirm password",
labelText: "confirm 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,
),
),
suffixIcon: IconButton(
onPressed: () {
setState(() {
_obscureText2 = !_obscureText2;
});
},
icon: Icon(_obscureText2 ? Icons.visibility : Icons.visibility_off),
),
),
),
const SizedBox(height: 40.0),
ElevatedButton(
onPressed: (){
if(eController.text.toString() == "" ||
uController.text.toString() == "" ||
passController.text.toString() == "" ||
conController.text.toString() == "")
{
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text("Fill all the details",
style: TextStyle(fontWeight: FontWeight.bold),),
content: const Text("Please fill all the details"),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("Ok", style: TextStyle(fontWeight: FontWeight.bold),),
),
],
);
},
);
}
else if(_formKey.currentState!.validate())
{
showDialog(
context: context,
builder: (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 PageOne();
},
),
);
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.brown,
),
child: const Text("SAVE",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.white,
),
),
),
],
),
),
),
),
);
}
}
Comments
Post a Comment