TextFormField
import 'package:celloip/splash_screen_2.dart';
import "package:flutter/material.dart";
// import "package:form_field_validator/form_field_validator.dart";
import 'package:intl_phone_field/intl_phone_field.dart';
// import "package:intl_phone_field/countries.dart";
void main() {
runApp(AppDemo(),);
}
class AppDemo extends StatelessWidget {
AppDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "TextFormField in Flutter",
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
// home: TextFormFieldDemo(),
home: SplashOther(),
);
}
}
class TextFormFieldDemo extends StatefulWidget {
TextFormFieldDemo({super.key});
@override
State<TextFormFieldDemo> createState() {
return TextFormFieldDemoState();
}
}
class TextFormFieldDemoState extends State<TextFormFieldDemo> {
var email = TextEditingController();
var pass = TextEditingController();
var phone = TextEditingController();
bool _obscureText = true;
bool _autoValidate = true;
final _formKey = GlobalKey<FormState>();
@override
void dispose() {
email.dispose();
pass.dispose();
phone.dispose();
super.dispose();
}
clearText() {
email.clear();
pass.clear();
phone.clear();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
appBar: AppBar(
title: Text("TextFormField"),
),
body: Center(
child: Container(
width: 330,
child: Form(
key: _formKey,
autovalidateMode: _autoValidate ? AutovalidateMode.always : AutovalidateMode.disabled,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
controller: email,
// validator: MultiValidator([
// RequiredValidator(errorText: "Required"),
// EmailValidator(errorText: "not valid"),
// ],),
validator: (value) {
if(value == null || value.isEmpty) {
return "Please Enter Email Address...";
} else if(!value.contains("@")) {
return "Please Enter Valid Email Address...";
}
return null;
},
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: "Enter Email here...",
labelText: "Email",
labelStyle: TextStyle(color: Colors.blue,),
border : OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.orange,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.brown,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.blue,
),
),
prefixIcon: Icon(Icons.email, color: Colors.blue,),
suffixIcon: IconButton(
icon: Icon(Icons.clear,),
onPressed: () {
email.clear();
}
),
),
),
SizedBox(height: 10.0,),
TextFormField(
controller: pass,
obscureText: _obscureText,
//maxLength: 5,
/// 1st way validation
// validator: MultiValidator([
// RequiredValidator(errorText: "Required",),
// MinLengthValidator(6, errorText: "More than 6 required",),
// ],),
/// 2nd way validation
validator: (value) {
if(value == null || value.isEmpty) {
return "Please Enter password here...";
} else if(value.length < 5) {
return "password should be at least 5 character";
}
return null;
},
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
//counterText: " ", //hide the number of password digits,Ex:(0/5)
hintText: "Enter password here...",
labelText: "password",
labelStyle: TextStyle(color: Colors.blue,),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.brown,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.brown,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.blue,
),
),
prefixIcon: Icon(Icons.password, color: Colors.blue,),
suffixIcon: IconButton(
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off, color: Colors.blue,),
),
),
),
SizedBox(height: 10.0,),
TextFormField(
controller: phone,
maxLength: 10,
/// 1st way validation
// validator: MultiValidator([
// RequiredValidator(errorText: "Required",),
// MinLengthValidator(10, errorText: "Minimum 10 is required",),
// MaxLengthValidator(10, errorText: "Maximum 10 is enough",),
// ],),
/// 2nd way validation
validator: (value) {
if(value == null || value.isEmpty) {
return "Please Enter phone no here...";
} else if(value.length < 10 || value.length > 10) {
return "Please Enter Valid phone no...";
}
return null;
},
keyboardType: TextInputType.phone,
decoration: InputDecoration(
// counterText: " ", //hide the number of phoneNO digits,Ex:(0/10)
hintText: "Please Enter phone no here...",
labelText: "Phone No",
labelStyle: TextStyle(color: Colors.blue,),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.brown,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.brown,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.blue,
),
),
prefixIcon: Icon(Icons.phone, color: Colors.blue,),
suffixIcon: IconButton(
icon: Icon(Icons.clear,),
onPressed: () {
phone.clear();
}
),
),
),
SizedBox(height: 30.0,),
IntlPhoneField(
// controller: phone,
decoration: InputDecoration(
hintText: "Please Enter phone number...",
labelText: "phone No",
border: OutlineInputBorder(
borderSide: BorderSide(),
),
),
),
SizedBox(height: 25.0,),
Row(
children: [
ElevatedButton(
onPressed: () {
if(_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Processing Data..."),),
);
var uremail = email.text.toString();
var urpass = pass.text.toString();
var urphone = phone.text.toString();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return NextPage(uremail: uremail, urpass: urpass, urphone: urphone,);
},
),
);
} else {
setState(() {
_autoValidate = true;
},);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0,),
),
fixedSize: Size(130.0, 60.0,),
),
child: Text("Login", style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold,),),
),
SizedBox(width: 70.0,),
ElevatedButton(
onPressed: () {
clearText();
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
fixedSize: Size(130.0, 60.0,),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0,),
),
),
child: Text("Reset", style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold,),),
),
],
),
],
),
),
),
),
),
);
}
}
class NextPage extends StatefulWidget {
var uremail, urpass, urphone;
NextPage({super.key, this.uremail, this.urpass, this.urphone,});
@override
State<NextPage> createState() {
return NextPageState();
}
}
class NextPageState extends State<NextPage> {
// var uremail, urpass, urphone;
//
// NextPageState({this.uremail, this.urpass, this.urphone,});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TextFormField Data"),
),
body: Container(
child: Center(
child: Text("Your Email is : ${widget.uremail}, \n\n"
"Your password is : ${widget.urpass}, \n\n"
"Your phone no is : ${widget.urphone}, \n\n",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0,),
),
),
),
);
}
}
Comments
Post a Comment