Table of Contents
How to make a form using Text Field Widget in Flutter
It’s time to learn how to make a form using Textfield and other widgets in Flutter. It’s an exciting process let’s start.
We use different widgets to make a form. For example, Text Field Widget:
Text field Widget
The text field widget is one of the most used widgets in Flutter. It has many properties like decoration, hint text, label text, border, etc. using which we can make our text attractive. For example, an outline border is used to add an attractive border.
Icons in form
You must have seen icons in online forms. Similarly, we can also add these icons to our form. For this purpose, in decoration, we will add property like icons.person. It is not a difficult task and we will learn this art while applying the same in our work. The Prefix icon can also be set which comes first. We can also set the suffix icon which is at the end of the text field. Icon colors can also be added with color customization. Colors will be set as Colors.red form. We can also do text styling in label style.
How to remember all widgets and their properties
It is not necessary to cram all these widgets. We just need to understand them and then make templates to use them in the future. We will learn how to make live templates in the upcoming classes.
Adding different features in a Form
We can add different features in the form as per our needs and requirements. A prefix text like Mr or Ms. can also be added. It has very less use but as we are learning we can use it. Text input action is used at the end like done. We can set the max line for a text field like 4 lines etc as well. Maximum length can also be set for not receiving any incorrect data, especially in phone numbers. We can even change cursor color and height too. It all depends upon our requirements and demands.
Setting Keyboard type
Setting keyboard type is very important in the context of forms. In this process, we allow users to use a specific keyboard as per requirements while entering a field. For example, in the name field, users do not need numbers and in phone numbers do not require alphabets. For this purpose, we define keyboard variations for each text field such as number, email (which will be with @ sign), etc.
A practical example of a Flutter Form Textfield Widget
Now after discussing all the above points, we are going to illustrate them in our work with the following example:-
import 'package:flutter/material.dart';
void main() {
runApp(MyStatelessWidget());
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Stateless Widget"),
),
body: Material(
child: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: TextField(
textAlign: TextAlign.left,
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.name,
textInputAction: TextInputAction.done,
maxLines: 1,
maxLength: 30,
cursorColor: Colors.cyanAccent,
cursorHeight: 10,
cursorWidth: 4,
decoration: InputDecoration(
hintText: "Enter Name",
hintStyle: TextStyle(
color: Colors.green,
fontSize: 25,
),
labelText: "Name",
labelStyle: TextStyle(
fontSize: 20,
color: Colors.pink,
),
border: OutlineInputBorder(),
icon: Icon(Icons.person),
prefixIcon: Icon(Icons.person_2_outlined),
suffixIcon: Icon(Icons.person_4_rounded),
iconColor: Colors.red,
prefixText: "Ms. ",
),
),
),
),
),
),
);
}
}
Column widget
In the above example, we have just created a single field “name”. We use a column widget to add multiple fields. For example:
import 'package:flutter/material.dart';
void main() {
runApp(MyStatelessWidget());
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Stateless Widget"),
),
body: Material(
child: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
textAlign: TextAlign.left,
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.name,
textInputAction: TextInputAction.go,
decoration: InputDecoration(
hintText: "Enter Name",
labelText: "Name",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person_2_outlined),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
textAlign: TextAlign.left,
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.go,
decoration: InputDecoration(
hintText: "Enter Email",
labelText: "Email",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.email),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
textAlign: TextAlign.left,
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.go,
decoration: InputDecoration(
hintText: "Enter Phone",
labelText: "Phone",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.phone),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
textAlign: TextAlign.left,
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.go,
decoration: InputDecoration(
hintText: "Enter Address",
labelText: "Address",
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.location_city),
),
),
),
ElevatedButton(onPressed: (){}, child: Text("Submit"))
],
)
),
),
),
);
}
}
In the end, we have made a submit button that we have already learned in previous classes. Practice it to be a master in it.
Task: Make a Flutter Form Textfiled widget in Flutlab