Flutter TextField Example Tutorial

In this article, we are going to understand how to use different properties of flutter textfield in mobile applications to take input from users. TextField is a widget in flutter to get information from user using keyboard.

In this flutter tutorial, we are going to use different attributes of flutter textfield widget. User can enter text in textfield using hardware keyboard or on-screen keyboard.

Keyboard Type

We can open keyboard for specific requirement using keyboardType property of flutter textfield widget. We can change keyboard type for email, phone, datetime, number etc.

(1) TextInputType.text: Using this property, we can open normal keyboard for flutter textfield.

(2) TextInputType.emailAddress: Normal Keyboard with special character @ is shown to users to enter email address.

(3) TextInputType.datetime: We can display numeric keyboard with special characters “/” and “:” using this attribute.

(4) TextInputType.numberWithOptions: Numeric Keyboard with options to enabled signed and decimal mode is shown to users.

(5) TextInputType.multiline: We can optimize textfield widget for multi-line data.

Text Input Action

We can also customize keyboard button with send, continue or done options using textInputAction property to perform different type of operations.

TextField(
textInputAction: TextInputAction.continueAction,
)

TextField(
textInputAction: TextInputAction.send,
)

TextField Suggestions

We can enable or disable suggestions for flutter textfield widget using autocorrect property.

TextField(
autocorrect: false,
)

TextField Capitalization

We can also capitalize letters in textfield with different options using textCapitalization property.

(1) TextCapitalization.sentences: We can make the first letter of every sentence being capitalized using this attribute.

TextField(
textCapitalization: TextCapitalization.sentences,
)

(2) TextCapitalization.characters: We can capitalize all characters in the textfield with the help of this property.

TextField(
textCapitalization: TextCapitalization.characters,
)

(3) TextCapitalization.word: Using this property, we can capitalize the first letter of each word in textfield.

TextField(
textCapitalization: TextCapitalization.word,
)

Flutter TextField Alignment

We can also change alignment of text inside the textfield using textAlign property. There are different values for this textAlign property: start, end, left, right, center, justify.

TextField(
textAlign: TextAlign.center,
)

Flutter TextField Direction

We can also change direction of textfield left to right or right to left using textDirection attribute.

TextField(
textDirection: TextDirection.rtl,
)

Toolbar Options for TextField

There are different toolbar options in textField such as cut, copy, paste, selectAll. We can add this options by giving value true to each attribute.

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

Hide TextField Cursor

We can also make textfield invisible using showCursor property.

TextField(
showCursor: false,
)

ReadOnly TextField

We can also disable editing feature of textfield by giving value true to readOnly property. We can also tap on textfield despite textfield is only for read.

TextField(
readOnly: true,
)

Disable TextField

We can also make textfield completely disable using enabled property.

TextField(
enabled: false,
)

TextField for Password

We can also hide text in textField using obscureText property. So user can type password without displaying it.

TextField(
obscureText: true,
)

Flutter TextField AutoFocus

We can make automatically focus textfield when user entered the screen using autofocus property.

TextField(
autofocus: true,
)

Flutter TextField Cursor

We can change radius of textfield cursor using cursorRadius property.

TextField(
cursorRadius: Radius.circular(12.0),
)

We can also change width of cursor in textfield with the help of cursorWidth property.

TextField(
cursorWidth: 12.0,
)

We can also change color of cursor of textfield using cursorColor attribute.

TextField(
cursorColor: Colors.red,
)

Flutter TextField Style

We can customize textfield using style property like other widgets. We can change color of textfield. We can change fontsize of textfield. We can also change fontweight of textfield.

TextField(
style: TextStyle(color: Colors.green),
)

Character and Line limit for TextField

We can restrict users to enter characters for certain limit using maxLength Property. Maximum lines for textfield is 1 by default. We can expand textfield by giving number to maxLines property.

TextField(
maxLength: 7,
maxLines: 5,
)

Flutter TextField Decoration

We can customize textfield using decoration property. We can set hint for textfield. We can also set icons in textfield at start and end position in textfield. We can also set static text in textfield like icons at different positions. We can also remove underline of textfield.

We can set hint inside textfield widget using hintText property.

TextField(
controller: controller,
decoration: InputDecoration(hintText: “CodingwithDhrumil”)
)

We can also set label text for textfield. Label Text does not disappear while user enter the text. It floats over the textfield.

TextField(
decoration: InputDecoration(labelText: “CodingwithDhrumil”)
)

We can add icons as prefix icon and suffix icon in textfield widget. Prefix icon displays before the text and suffix icons displays after the text inside textfield.

TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.add),
suffixIcon: Icon(Icons.delete),
)
)

We can also set static prefix or suffix text inside textfield.

TextField(
decoration: InputDecoration(
prefix: Text(“CodingwithDhrumil”)
)
)

HelperText is used to display text at bottom of textfield.

TextField(
decoration: InputDecoration(
helperText: “CodingwithDhrumil”
),
)

We can also remove underline of textfield widget.

TextField(
decoration: InputDecoration.collapsed(hintText: “”)
)

We can also set border around textfield widget.

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

Retrieve value from Flutter TextField

We can get value from textfield using onChanged callback as below.

String getValue = “”;
TextField(
onChanged: (text) {
getValue = text;
},
)

We can also get value from text editing controller as below.

TextEditingController controller = TextEditingController();
TextField(
controller: controller,
)
String getValue = controller.text

TextField Submit Listener

We can also detect when value is submitted in textfield using onSubmitted callback.

TextField(
onSubmitted: (value) {
},
}