TextField
import "package:flutter/material.dart";
void main() {
runApp(MyDemo(),);
}
class MyDemo extends StatelessWidget {
MyDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Flutter TextField",
theme: ThemeData(
primarySwatch: Colors.lightGreen,
),
home: TextFieldDemo(),
);
}
}
class TextFieldDemo extends StatelessWidget {
TextFieldDemo({super.key});
var email = TextEditingController();
var password = TextEditingController();
var phone = TextEditingController();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
// return FocusScope.of(context).requestFocus(FocusNode());
return FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
drawer: Drawer(
child: ListView(
children: [
UserAccountsDrawerHeader(
accountName: Text("Maximilian Schwarzmuller"),
accountEmail: Text("maximilian6522@gmail.com"),
currentAccountPicture: Icon(Icons.account_circle, size: 85.0,),
),
ListTile(
leading: Icon(Icons.message, color: Colors.black, size: 30.0,),
title: Text("message", style: TextStyle(fontSize: 20.0,),),
onTap: () {
Navigator.pop(context);
},
),
Divider(thickness: 1.0, color: Colors.black,),
ListTile(
leading: Icon(Icons.account_circle, color: Colors.black, size: 30.0,),
title: Text("profile", style: TextStyle(fontSize: 20.0,),),
onTap: () {
Navigator.pop(context);
},
),
Divider(thickness: 1.0, color: Colors.black,),
ListTile(
leading: Icon(Icons.settings, color: Colors.black, size: 30.0,),
title: Text("Settings", style: TextStyle(fontSize: 20.0,),),
onTap: () {
Navigator.pop(context);
},
),
Divider(thickness: 1.0, color: Colors.black,),
ListTile(
leading: Icon(Icons.help_outline, color: Colors.black, size: 30.0,),
title: Text("Help & feedback", style: TextStyle(fontSize: 20.0,),),
onTap: () {
Navigator.pop(context);
},
),
Divider(thickness: 1.0, color: Colors.black,),
ListTile(
leading: Icon(Icons.restore_from_trash, color: Colors.black, size: 30.0,),
title: Text("Trash", style: TextStyle(fontSize: 20.0,),),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
appBar: AppBar(
title: Text("TextField"),
),
body: Container(
decoration: BoxDecoration(
// gradient: LinearGradient(
// colors: [
// Colors.deepPurple,
// // Colors.deepPurple.shade500,
// // Colors.deepPurple.shade400,
// // Colors.deepPurple.shade300,
// Colors.deepPurple.shade200,
// Colors.deepPurple.shade100,
// Colors.deepPurple.shade50,
// ],
// begin: FractionalOffset(1.0, 0.0),
// end: FractionalOffset(1.0, 1.0),
// stops: [0.2, 0.0, 0.0, 0.0],
// ),
gradient: RadialGradient(
colors: [
Colors.brown.shade50,
Colors.brown.shade100,
Colors.brown.shade200,
// Colors.brown.shade300,
// Colors.brown.shade400,
// Colors.brown.shade500,
// Colors.brown,
],
focal: FractionalOffset(0.6,0.6),
),
),
child: Center(
child: SingleChildScrollView(
child: Container(
width: 330,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 50.0,
backgroundColor: Colors.white,
child: Icon(Icons.account_circle, size: 100.0, color: Colors.blueGrey,),
),
SizedBox(height: 20.0,),
TextField(
controller: email,
// enabled: false,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: "Enter Email here...",
labelText: "Email",
labelStyle: TextStyle(color: Colors.grey.shade600,),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11,),
borderSide: BorderSide(
width: 2.0,
color: Colors.blueAccent,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11,),
borderSide: BorderSide(
color: Colors.orangeAccent,
width: 2.0,
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11,),
borderSide: BorderSide(
width: 2.0,
color: Colors.green,
),
),
// suffixText: "Username exists",
// suffixIcon: IconButton(
// icon: Icon(Icons.remove_red_eye, color: Colors.orangeAccent,),
// onPressed: () {},
// ),
prefixIcon: Icon(Icons.email, color: Colors.orangeAccent,),
),
),
SizedBox(height: 30.0,),
TextField(
controller: password,
obscureText: true,
// obscuringCharacter: "*",
// enabled: false,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
hintText: "Enter password here...",
labelText: "password",
labelStyle: TextStyle(color: Colors.grey.shade600,),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.blueAccent,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11,),
borderSide: BorderSide(
color: Colors.orangeAccent,
width: 2.0,
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.green,
),
),
prefixIcon: Icon(Icons.password, color: Colors.orange,),
//For Clickable effect on Icon, "IconButton()" is used(Mandatory)
suffixIcon: IconButton(
icon: Icon(Icons.remove_red_eye, color: Colors.orange,),
onPressed: () {},
),
),
),
SizedBox(height: 30.0,),
TextField(
controller: phone,
// enabled: false,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: "Enter phone no here...",
labelText: "phone no",
labelStyle: TextStyle(color: Colors.grey.shade600,),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.blueAccent,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.orange,
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(11.0,),
borderSide: BorderSide(
width: 2.0,
color: Colors.green,
),
),
prefixIcon: Icon(Icons.phone, color: Colors.orange,),
),
),
SizedBox(height: 40,),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(11.0,),
),
fixedSize: Size(330.0, 60.0,),
),
onPressed: () {
String uEmail = email.text.toString(); //here, "toString()" is redundant
String uPass = password.text;
String uPhoneNo = phone.text.toString();
print("Email : $uEmail, Password : $uPass, Phone No : $uPhoneNo",);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SecondPage(uEmail: uEmail, uPass: uPass, uPhoneNo: uPhoneNo,);
},
),
);
},
child: Text("Login",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 25,),),
),
SizedBox(height: 12.0,),
Text("Or Continue with"),
SizedBox(height: 12.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
fixedSize: Size(120.0, 50.0,),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17.0,),
),
),
child: Text("facebook", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,
fontSize: 20.0,),),
),
SizedBox(width: 70.0,),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
fixedSize: Size(120.0, 50.0,),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17.0,),
),
),
child: Text("Twitter", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,
fontSize: 20.0,),),
),
],
),
SizedBox(height: 50.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Don't have an Account ?",
style: TextStyle(fontSize: 15.0, color: Colors.white,),),
Text(" Sign Up", style: TextStyle(fontSize: 15.0, color: Colors.white, fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,),),
],
),
SizedBox(height: 11.0,),
Text("Forgot Password", style: TextStyle(fontSize: 15.0, color: Colors.white,
decoration: TextDecoration.underline, fontWeight: FontWeight.bold,),),
],
),
),
),
),
),
),
);
}
}
/// Passing TextField Data to another page named "SecondPage" here below
class SecondPage extends StatefulWidget {
var uEmail, uPass, uPhoneNo;
SecondPage({super.key, this.uEmail, this.uPass, this.uPhoneNo,});
@override
State<SecondPage> createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TextField Information"),
),
body: Center(
child: Text("Your Email Address is : ${widget.uEmail}, \n\n"
"Your password is : ${widget.uPass}, \n\n"
"Your Phone number is : ${widget.uPhoneNo},",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,),),
),
);
}
}
Comments
Post a Comment