Flutter: A guide to the TextField

Flutter TextField tutorial

TextField in flutter is a widget that helps you to get user inputs from the keyboard. It is similar to the input type “text” in HTML. In this article, we go through various arguments used in a TextField. Let’s create a basic TextField:

new TextField()

Basic TextField

Autofocus: Setting autofocus to true will automatically focus the TextField when the user enters the context. For that:

autofocus: true

Change the color of the cursor:

cursorColor: Colors.amber,

Cursor color change to amber

Adjust the Styles: You can adjust the styles of the text written into the TextField using style argument in TextField.

style: TextStyle(height: 2.0),//increases the height of cursor

TextField with more cursor height

Increase the width of the Cursor:

cursorWidth: 5.0

cursor width increased

Add Decorations: You can add decorations such as hint, icons, etc. The whole topic of decorations is out of the scope of this article, but let’s see a basic TextField when applied decoration:

decoration: InputDecoration(
  hintText: "Hint text sample",
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(5.0),
    borderSide: BorderSide(
      color: Colors.amber,
      style: BorderStyle.solid,
    ),
  ),
),

Enable or disable the TextField:

enabled:true,//dafult, makes the textfield interactive
enabled:false//make the textfield non editable

The controller has features like clearing the whole TextField, assigning a listener that will recognize the activities happening in the TextField, etc.

TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
...
...
  child:new TextField(
    controller: _controller,
    onSubmitted: (text) => print(_controller.text),
  ),
...
...

Adding a Listener instead of using onChanged:

_controller.addListener((){
    print(_controller.text);
});

onChanged, onSubmitted and onEditingComplete: These are used to listen for when a change in TextField happens or the user presses the next button on the keyboard, respectively.

onSubmitted and onEditingComplete works almost the same way:

onSubmitted: (text)=>print(text),
onChanged: (text)=>print(text),
onEditingComplete: (){
  print("Complete");
},

maxLines and minLines: These are used to specify the noumber of lines the TextField is going to occupy:

maxLines: 5,
minLines: 3,

It will have 3 lines by default. As more text is entered, the number of lines increases up to the maximum you set (in this case, 5).

Setting the maximum length of the TextField:

maxLength: 500,//setting maximum length of the textfield
maxLengthEnforced: true,//prevent the user from further typing
// when maxLength is reached

keyboardType: This is used to change the keyboard types, like text(default), number, phone, etc.

keyboardType: TextInputType.number,//keyboard with numbers only 
// will appear to the screen

obscureText: Used to hide text, like passwords.

obscureText: true,

strutStyle: When used with a vertical layout, it is used to establish a predictable layout. If null, the strut used will inherit values from the style argument. When no style is passed, the theme’s TextStyle will be used to generate strutStyle instead. We can disable the strut-based vertical alignment and allow dynamic vertical layout based on the glyphs typed, use StrutStyle.disabled.

onTap: The standard onTap callback used to recognize the user’s tap:

onTap: (){
  print("Pressed-textfield");
},
//prints Pressed-textfield each time the user press the textfield

textAlign: Aligns the cursor in different places on the TextField. This can be either center, start, left, end, right, justify or custom values.

textAlign: TextAlign.center,
//will place the cursor on the center of the textfield on the first line

readOnly: We can make the text read-only or not. If this is set to true, then the TextField will not be editable; it is similar to disabling the TextField. But it will still give the callbacks such as onTap, etc.

Make the cursor invisible: We can make the cursor invisible with showCursor:

showCursor: false,

textCapitalization: This causes the keyboard to capitalize all the characters, only the first character of each sentence or the first character of every word.

textCapitalization: TextCapitalization.characters,
//set up the keyboard so that each characters are capital.
//This can be changed by user by the capitalization toggle button in //keyboard

textDirection: Changes the alignment of the cursor to left or right. Eg:

textDirection: TextDirection.rtl,

textInputAction: Changes the keyboard’s new line button to next, search, new line, send, etc. Eg:

textInputAction: TextInputAction.next,

toolbarOptions: Adds or removes toolbar options such as cut, copy, paste, selectAll.

toolbarOptions: ToolbarOptions(
  cut: true,
  copy: false,
  selectAll: true,
  paste: false,
),

There are more arguments to cover, but these are the some of the important ones you may have to use usually. I hope you enjoyed the article!