View video tutorial
FLUTTER TextField widget
FLUTTER
This tutorial will show how to use TextField widget in Flutter.
Example
Text widget
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, scaffoldBackgroundColor: Colors.white),
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ButtonStyle style = ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade800,
foregroundColor: Colors.white70,
minimumSize: Size(120, 66),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Appbar Title here"),
),
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
ElevatedButton(
style: style,
child: Text('Sign In'),
onPressed: () {},
)
],
),
);
}
}
Output should look like this.
Example
Text widget
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, scaffoldBackgroundColor: Colors.white),
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ButtonStyle style = ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade800,
foregroundColor: Colors.white70,
minimumSize: Size(120, 66),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Appbar Title here"),
),
body: Container(
child: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
ElevatedButton(
style: style,
child: Text('Sign In'),
onPressed: () {},
)
],
),
),
),
);
}
}
Output should look like this.
Example
Text widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, scaffoldBackgroundColor: Colors.white),
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
TextEditingController nameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
final ButtonStyle style = ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade800,
foregroundColor: Colors.white70,
minimumSize: Size(120, 66),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Appbar Title here"),
),
body: Center(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
controller: nameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
controller: passwordController,
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
ElevatedButton(
style: style,
child: Text('Sign In'),
onPressed: () {
print("Name " +
nameController.text +
"\nPassword " +
passwordController.text);
showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: const Text('AlertDialog Title'),
content: Text("Name: " +
nameController.text +
"\nPassword: " +
passwordController.text),
// content: SingleChildScrollView(
// child: ListBody(
// children: const <Widget>[
// Text('This is a demo alert dialog.'),
// Text('Would you like to approve of this message?'),
// ],
// ),
// ),
actions: <Widget>[
TextButton(
child: const Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
Image.asset(
"assets/a.jpg",
width: 100,
height: 80,
),
],
),
),
);
}
}
Output should look like this.
Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.
For documentation: visit dart documentation. visit flutter documentation.
Try Dart and Flutter Here or Here