TextFormField widget is used to take input from the user in flutter. This is a simple and easy user input widget in flutter.
We can perform any operation on that user input data using TextFormField. You can use that user input, can send and show that input. You can store it into a TextEditingController type object.
How To Create TextFormField In Flutter
To create a TextFormField in Flutter, Flutter provides a TextFormField() widget. You can style it according to your needs. A simple and without any style underline TextFormField is below.
TextFormField( controller: userInput, ),
How to Handle Input Data In TextFormField In Flutter Using Controller
To handle user input in TextFormField, create an object of TextEditingController class. Create a TextEditingController object like below and assign it to the controller property of TextFormField. Its object will hold the input data.
TextEditingController userInput = TextEditingController();
Style Input Text in TextFormField In Flutter
To give the style of user input text like fontSize, textColor, fontWeight and many other styles. Use the style component inside the TextFormField as below. There are many input text style properties that you can use to style. Some of them are below.
style: TextStyle( fontSize: 24, color: Colors.blue, fontWeight: FontWeight.w600, ),
Decoration of TextFormField in Flutter
Use the decoration component inside the text form field as below. You can give hint text, label and border using the decoration property in flutter. You can also create error text, fill color. To use the icon left in the TextFormField use prefixIcon() property. To create an icon to the right side use the suffixIcon() property inside it. You can style following properties:
- Border
- Hint
- Lable
- Error text
- Prefix icon
- Suffix icon
- Focus border
- Fill color
- more..
Creating Border Of TextFormField In Flutter
To make the border of TextFormField, use the border property inside it as below.
border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.0), ),
Example of Decoration Properties
Example of all the above decoration properties.
decoration: InputDecoration(
focusColor: Colors.white,
//add prefix icon
prefixIcon: Icon(
Icons.person_outline_rounded,
color: Colors.grey,
),
errorText: "Error",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.blue, width: 1.0),
borderRadius: BorderRadius.circular(10.0),
),
fillColor: Colors.grey,
hintText: "Email/Mobile",
//make hint text
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: "verdana_regular",
fontWeight: FontWeight.w400,
),
//create lable
labelText: 'Email/Mobile',
//lable style
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: "verdana_regular",
fontWeight: FontWeight.w400,
),
),
onChange() method In TextFormField
To get instant change user input data in the flutter text form field, onChange() method is used. You setState() inside it as below. The name variable give you the instant changes from TextFormField.
onChanged: (value) {
setState(() {
String name = value;
});
},
How To Use Controller Value in TextFormField
Simply use the TextEditingController object and use .text() to get the input value like below.
userInput.text();
Now you can use the userInput object to get the user input data.
Complete Example Of TextFormField In Flutter
After describing each property I collected and combined together. Following is the full example of TextFormField. You can directly copy and paste it into your projects.
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class DemoClass extends StatefulWidget { @override _DemoClassState createState() => _DemoClassState(); } class _DemoClassState extends State<DemoClass> { TextEditingController userInput = TextEditingController(); String text = ""; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page Demo"), ), body: Container( padding: EdgeInsets.all(10), child: Column( children: [ Center( child: Text( "TextFormField In Flutter", style: TextStyle(fontSize: 24), ), ), Container( margin: EdgeInsets.all(15), child: TextFormField( controller: userInput, style: TextStyle( fontSize: 24, color: Colors.blue, fontWeight: FontWeight.w600, ), onChanged: (value) { setState(() { userInput.text = value.toString(); }); }, decoration: InputDecoration( focusColor: Colors.white, //add prefix icon prefixIcon: Icon( Icons.person_outline_rounded, color: Colors.grey, ), errorText: "Error", border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.0), ), focusedBorder: OutlineInputBorder( borderSide: const BorderSide(color: Colors.blue, width: 1.0), borderRadius: BorderRadius.circular(10.0), ), fillColor: Colors.grey, hintText: "Email/Mobile", //make hint text hintStyle: TextStyle( color: Colors.grey, fontSize: 16, fontFamily: "verdana_regular", fontWeight: FontWeight.w400, ), //create lable labelText: 'Email/Mobile', //lable style labelStyle: TextStyle( color: Colors.grey, fontSize: 16, fontFamily: "verdana_regular", fontWeight: FontWeight.w400, ), ), ), ), Text(userInput.toString()), ], ), ), ); } }
Final Result
Conclusion
In this example we created different types of TextFormField with its style properties. Please comment for any issue.
Thank you for visiting this tutorial on FlutterTPoint.
Please see more Flutter and Android tutorials for developing your skills.
