Flutter TextField

TextField is a flutter widget which allows the user to input text from the keyboard. The default code of TextField is as follows:

TextField()


You can retrieve text entered in TextField using TextEditingController or onChanged() method.

1) TextEditingController
Attach the TextEditingController to the widget and listen to the text changes.

TextEditingController controller \= TextEditingController();   
TextField(   
  controller: controller,   
)   

Add listener to listen to text changes,

controller.addListener(() {     
// Do something here     
});   

To get and set value to TextField,

print(controller.text);     
controller.text = 'DroidBiz';     

Other callbacks called when user clicks Done button in iOS

onEditingComplete: (){},     
onSubmitted: (value){},   

2) onChanged() method
The second way to retrieve value from TextField is to use the onChanged() method.

String value \= "";   
TextField(   
  controller: controller,   
  onEditingComplete: (){},   
  onSubmitted: (value){},   
  onChanged: (newValue) {   
     value \= newValue;   
   },   
)   

Focus in TextField

1) autofocus in TextField
To set focus on TextField by default, set autofocus true like below:

TextField( autofocus: true, )   

2) Custom focus changes in TextField
Attach FocusNode to TextField if you want to change focus on demand.

Example:

FocusNode nodeOne \= FocusNode();   
    FocusNode nodeTwo \= FocusNode();   
    TextField(   
     focusNode: nodeOne,   
    ),   
    TextField(   
     focusNode: nodeTwo,   
    ),   
    RaisedButton(   
     onPressed: () {   
       FocusScope.of(context).requestFocus(nodeTwo);   
     },   
     child: Text("Next"),   
    ),   

In the above example, when you click on Next button focus changes to the second TextField.

Properties:

keyboardType: It sets keyboard type to TextField.
autocorrect: It enables or disables autocorrect to TextField. Setting autocorrect false will disable suggestions also.
textAlign: This property will adjust text inside TextField.

TextField(     
textAlign: TextAlign.center     
)   

This will align text at the center inside TextField.

style: This property is used to apply style to the text inside TextField.
cursorColor: It is used to change the color of the cursor.
cursorWidth: It is used to change the width of the cursor.
cursorRadius: It is used to change the radius of the cursor corners.
maxLength: It is used to control the maximum number of characters that can be written inside TextField.
maxLines: Default value is 1. Sometimes we need TextField to be expanded when one line finishes. Set maxLines null so TextField will get expanded and content will go in the next line. If you set maxLines 2 then it will expand to two lines.
obscureText: Set obscureText to true to make text obscure. It is useful for password textfield. decoration: You can add decoration also like hint, label, hint style, icon, border etc
labelText: It shows label text in TextField. Label floats over the text field when the user starts typing.
It shows hint text inside TextField. Hint disappear when the user starts writing. icon: you can set the icon to the TextField.
helperText: You can add a persisting note to the TextField which will be shown below. You can use decoration: null or InputDecoration.collapsed to remove default underline.
Outline border: You can give outline border using below code,

TextField(   
     decoration: InputDecoration(   
       border: OutlineInputBorder()   
     )   
    ),   

enabled: Set enabled false to make TextField non editable.

Example:

TextEditingController controller = TextEditingController();

TextField(   
 controller: controller,   
 obscureText: true,   
 decoration: InputDecoration(   
   hintText: "Password",   
   border: OutlineInputBorder()   
 ),   
)