In this tutorial, we are going to learn the two ways to create, and design text fields in a flutter and also two ways to get data from a flutter textfield or a flutter textformfield. The design will be created using flutter textfield() and flutter textformfield() whereas we will get the data from text fields using onChanged text field method and using Controller in textfield as an id to get data of unique textfield.
Watch Youtube tutorial
main.dart
import 'package:flutter/material.dart';
import 'package:stateful_app/form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: '3.2 Flutter Push Pop',
themeMode: ThemeMode.system,
home: MyForm(),
);
}
}
form.dart
import 'package:flutter/material.dart';
import 'package:stateful_app/details.dart';
class MyForm extends StatefulWidget {
const MyForm({Key? key}) : super(key: key);
@override
State<MyForm> createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
final _productController = TextEditingController();
final _productDesController = TextEditingController();
@override
void dispose() {
_productController.dispose();
_productDesController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple.shade300,
title: const Text("Form"),
centerTitle: true),
body: Container(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: [
MyTextField(
myController: _productController,
fieldName: "Product Name",
myIcon: Icons.account_balance,
prefixIconColor: Colors.deepPurple.shade300),
const SizedBox(height: 10.0),
//Use to add space between Textfields
MyTextField(
myController: _productDesController,
fieldName: "Product Description",
prefixIconColor: Colors.deepPurple.shade300),
const SizedBox(height: 20.0),
myBtn(context),
],
),
));
}
//Function that returns OutlinedButton Widget also it pass data to Details Screen
OutlinedButton myBtn(BuildContext context) {
return OutlinedButton(
style: OutlinedButton.styleFrom(minimumSize: const Size(200, 50)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return Details(
productName: _productController.text,
productDescription: _productDesController.text,
);
}),
);
},
child: Text(
"Submit Form".toUpperCase(),
style: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.deepPurple),
),
);
}
}
//Custom STateless WIdget Class that helps re-usability
// You can learn it in Tutorial (2.13) Custom Widget in Flutter
class MyTextField extends StatelessWidget {
MyTextField({
Key? key,
required this.fieldName,
required this.myController,
this.myIcon = Icons.verified_user_outlined,
this.prefixIconColor = Colors.blueAccent,
});
final TextEditingController myController;
String fieldName;
final IconData myIcon;
Color prefixIconColor;
@override
Widget build(BuildContext context) {
return TextFormField(
controller: myController,
decoration: InputDecoration(
labelText: fieldName,
prefixIcon: Icon(myIcon, color: prefixIconColor),
border: const OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurple.shade300),
),
labelStyle: const TextStyle(color: Colors.deepPurple)),
);
}
}
details.dart
import 'package:flutter/material.dart';
class Details extends StatelessWidget {
Details(
{Key? key, required this.productName, required this.productDescription})
: super(key: key);
String productName, productDescription;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
"Details",
),
//Pop and navigate to previous screen
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.arrow_back)),
),
body: Container(
padding: const EdgeInsets.all(4.0),
child: ListView(
children: [
//Dynamic Tile
ListTile(
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, color: Colors.grey.shade300)),
leading: IconButton(
icon: const Icon(Icons.bookmark_added_rounded,
color: Colors.blueAccent),
onPressed: () {},
),
title: Text(
productName,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0),
),
subtitle: Text(productDescription),
trailing: const Icon(
Icons.delete,
color: Colors.grey,
),
),
//Static Tiles for design
ListTile(
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, color: Colors.grey.shade300)),
leading: IconButton(
icon: const Icon(Icons.shopping_bag_outlined,
color: Colors.blueAccent),
onPressed: () {},
),
title: const Text(
"Bag",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
),
subtitle: const Text("Brown Color Bag with straps"),
trailing: const Icon(
Icons.delete,
color: Colors.grey,
),
),
ListTile(
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, color: Colors.grey.shade300)),
leading: IconButton(
icon: const Icon(Icons.chair, color: Colors.blueAccent),
onPressed: () {},
),
title: const Text(
"Chair",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
),
subtitle: const Text("Wooden swinging Chair"),
trailing: const Icon(
Icons.delete,
color: Colors.grey,
),
),
],
),
));
}
}
