Flutter Text Field Widget
Text Field in Flutter is a very important widget of a flutter from which we can collect input from the user, this is the EditText field for Android.
Users can enter text either from the hardware keyboard or onscreen keyboard.
TextFiled onChanged callback gives us what has been changed in the input field and we can do validation according to that value.
onSubmitted callback is used to get value when we are done with entering text.
Basic Syntax: You can make a simple TextFiled using the below Syntax.
TextField()
Properties
Let’s understand the most important properties of TextFiled Widget.
Decoration
Decoration properties allow you to design TextField widget. With the help of this property, you can set icon, hover color, border Radius, labelText, hint, etc. see below code of lines for understanding this property.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter User Name', prefixIcon: Icon(Icons.account_circle), labelText: 'User Name',), )
TextAlign
This property helps you to align the text in TextField Widget. You can do it either on left, right, or center as you want. Check the below code for this property.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, prefixIcon: Icon(Icons.account_circle), labelText: 'Enter User Name',), textAlign: TextAlign.center, )
ObscureText
If you want to make your textfield as a password field so you can use this property and make this property’s value true. Check the below syntax for this.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter Password',), labelText: 'Password',), textAlign: TextAlign.left, obscureText: true, )
keyboardType
This property is used for input type, like which keyboard you want to open when the cursor goes on the text field, number, text, datetime, url, etc. Check the below code for this property.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter Your Number', prefixIcon: Icon(Icons.phone), labelText: 'Your Number',), textAlign: TextAlign.left, keyboardType: TextInputType.number, )
Style
With the help of this property, you can set the style of the text. You can define TextStyle using this property, like fontSize, fontWeight, fontFamily, color, wordSpacing, backgroundColor, height, background, etc. understand it through the below code snippet.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter Your Username', prefixIcon: Icon(Icons.account_circle), labelText: 'Username',), textAlign: TextAlign.left, keyboardType: TextInputType.text, style: TextStyle( color: Colors.black, fontSize: 12.0, fontStyle: FontStyle.italic), )
minLines
With the help of this property, you can set minimum lines of the text widget. Check the below code for this.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter Your Username', prefixIcon: Icon(Icons.account_circle), labelText: 'Username',), textAlign: TextAlign.left, keyboardType: TextInputType.text, minLines: 1, style: TextStyle( color: Colors.black, fontSize: 12.0, fontStyle: FontStyle.italic), )
maxLines
You can set maximum lines for the text field with the help of this widget. Check the below code.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter Your Username', prefixIcon: Icon(Icons.account_circle), labelText: 'Username',), textAlign: TextAlign.left, keyboardType: TextInputType.text, minLines: 1, maxLines: 1, style: TextStyle( color: Colors.black, fontSize: 12.0, fontStyle: FontStyle.italic), )
maxLength
The maximum length you can define with this property, suppose you just want an 8 character password field, so you can set maxLength 8, as below code.
TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)),), hoverColor: Colors.blueAccent, hintText: 'Enter Your Username', prefixIcon: Icon(Icons.account_circle), labelText: 'Username',), textAlign: TextAlign.left, keyboardType: TextInputType.text, maxLength: 8, style: TextStyle( color: Colors.black, fontSize: 12.0, fontStyle: FontStyle.italic), )
Controller
This is a very important property of TextField Widget, with the help of the controller you can get input data of TextField on click of any event or anywhere on the page. You need to define the controller as a global variable.
You will understand this property in complete code.
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { TextEditingController _usernameController = new TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Example of TextField', style: TextStyle(fontSize: 15.0), ), ), body: Container( alignment: Alignment.center, padding: EdgeInsets.all(10.0), child: TextField( controller: _usernameController, decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(15)), ), hoverColor: Colors.blueAccent, hintText: 'Enter Your Username', prefixIcon: Icon(Icons.account_circle), labelText: 'Username', ), textAlign: TextAlign.left, keyboardType: TextInputType.text, maxLength: 15, style: TextStyle( color: Colors.black, fontSize: 12.0, fontStyle: FontStyle.italic), onSubmitted: (value) { getData(); }))); } getData() { String strUserName = _usernameController.text; print('Your UserName $strUserName'); } }
Here _usernameController is used to control text field input data. I have also used onSubmitted callback, which is used for getting value when we click on the keyboard.
When you run this example, you will find the print in the console and get the output like the below Image.
Output
I hope this will help you with your project.
Visit https://flutter4u.com/ for getting many advanced-level projects, which may help you for your ongoing project.
For different types of TextFields, You can visit the directly below link.
https://www.flutter4u.com/category/inputfields/textfield/