TextField in Flutter | Input Text Values | Androidmonks

TextField in Flutter | Input Text Values in Android Studio

Applications are not always about showing content to the user, it also requires getting content from them. TextField in Flutter is an important widget as it helps the User enter Text Values. In Android, there is the use of EditText and the values can be entered through that. It can take in any type of Value(Date, Number etc) and the same is true with TextField in Flutter.

In this tutorial, we will see how to create a simple TextField Widget in Flutter and use it to get values from the user. We will also see another Widget called Forms that use the TextField extensively.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

TextField in Flutter – Basics

Using the TextField widget is pretty straight forward. Call the TextField class and the Widget gets rendered on the App. There are however some important requirements to be looked after to make use of the TextField Widget completely. We will look at these requirements in detail below.

Sample TextField Widget,

Scaffold(
  appBar: AppBar(title: Text("AndroidMonks"),),
  body: Column(children: <Widget>[
    TextField()
  ],),
);

Simple Call of the TextField Constructor creates the required Input Field. This creates a simple Editable Text Field like,

TextField
TextField

TextField in Flutter – Understanding Callbacks

The text field calls the onChanged callback whenever the user changes the text in the field. If the user indicates that they are done typing in the field (e.g., by pressing a button on the soft keyboard), the text field calls the onSubmitted callback.

To control the text that is displayed in the text field, use the controller. For example, to set the initial value of the text field, use a controller that already contains some text. The controller can also control the selection and composing region (and to observe changes to the text, selection, and composing region).

By default, a text field has a decoration that draws a divider below the text field. You can use the decoration property to control the decoration, for example by adding a label or an icon. If you set the decoration property to null, the decoration will be removed entirely, including the extra padding introduced by the decoration to save space for the labels.

This can be seen when the TextField is clicked from the above code example also.

TextField – Important Properties

Some of the important Properties of the TextField is listed below.

autocorrect

As the attribute name is self-explanatory, it auto corrects the text that is being entered by the User. Takes in a boolean value, and is set to True by default. To switch the autocorrect feature off, set the attribute to false like given below.

TextField(
  autocorrect: false,
)
autofocus

AutoFocus is another attribute which takes in a Boolean value. It lets the App automatically focus on this Field. If it is set to false, only when the user clicks on it will it be focused.

By default the value is true, and to turn it off set autofocus to false like given below,

TextField(
  autofocus: false,
)
counter

A very important part of the TextField widget is the use of the counter controller The Counter is important as it takes in a value of TextEditingController class. This is important because the controller can perform the adding a listener to it. This will enable the Stateful widget from changing or finding the value that the User is entering.

Even though there are ways to get the value that the user is going to enter, which we will be seeing in the below properties. This way is very conventional and is how the core is constructed.

To understand how the code works, you will have to create a simple Stateful Widget and make use of the Scaffold widget as the State widget for the App.

This is how the app looks like

This is how the final output in the console looks like,

cursorColor

Simple use of cursorColor is to update the color of the blinking cursor on the TextField when the user tries to enter a value.

The attribute takes in the value of the Colors class and can be set to any available colors. Check the below code to understand how the color is set.

TextField(
  cursorColor: Colors.pinkAccent,
)
Setting CursorColor in TextField
Setting CursorColor in TextField
decoration

TextField decoration involves the use of additional Text Decoration like adding icons to the TextField. To achieve this, add the decoration attribute to the Widget. It takes in the value of the InputDecoration class.

Find a code sample below to add decoration to the TextField Class.

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
)
Adding Decoration to the TextField
Adding Decoration to the TextField
enabled

Lets the user know if the TextField is going to take in Values or not. Particularly useful when the user has to input a data but is restricted unless another action is performed.

Example scenario includes filling up a form unless the Name is filled properly, the email cannot be entered.

Enabled takes up a boolean value and can be changed dynamically. When the enabled attribute is set to false, a Grey field appears indicating that the TextField does not take value. Find the code example below.

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  enabled: false,
)
Setting enabled to false
Setting enabled to false
maxLength

Just as the name suggests, this attribute controls the Max Characters allowed in the TextField. This attribute creates a simple character counter to the right bottom corner and shows the character count as the user types.

To see the maxLength attribute in action, find the code below,

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  maxLength: 5,
)

This lets the App look like,

Adding a MaxLength attribute
obscureText

This attribute lets the user hide the text that is being edited. Eg, for passwords, the Text is replaced by bullets. This is possible by setting the obscureText attribute to true.

Sample code example,

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  obscureText: true,
)
obscureText attribute
obscureText attribute
keyboardType

A TextField allows you to customize the type of keyboard that shows up when the TextField is brought into focus. We change the keyboardType property for this.

The types are:

  1. TextInputType.text (Normal complete keyboard)
  2. TextInputType.number (A numerical keyboard)
  3. TextInputType.emailAddress (Normal keyboard with an “@”)
  4. TextInputType.datetime (Numerical keyboard with a “/” and “:”)
  5. TextInputType.multiline (Numerical keyboard with options to enabled signed and decimal mode)

To include the Keyboard type, below is a code sample.

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  keyboardType: TextInputType.datetime,
)

This sets the keyboard input like,

KeyboardInputType
KeyboardInputType
style

This attribute lets the style of the Text to be changed. It takes in the value of TextStyle class and can be modified accordingly.

The sample code to change the text that is being inserted in given below,

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.purpleAccent),
)
style attribute of the TextField
style attribute of the TextField
textInputAction

Changing textInputAction of the TextField lets you change the action button of the keyboard itself.

To understand what this attribute does, you can try the below code example,

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  textInputAction: TextInputAction.next,
)

This leads to the qwerty keyboard which will have the next button instead of the usual Done button.

Note: There are some actions that will not work for Android. Read the docs clearly to understand what the allowed actions are.

Important Callbacks include

onChanged

OnChanged is an important callback that gets fired whenever there is a Text that is being inputted by the user.

The onChanged will record each character that is being pressed in the Application. So, it is important to make use of this only during that scenario. If the requirement is to take the entire word that is entered, you can take a look at the callbacks present below.

Code example for the onChanged is present below,

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  onChanged: (text){
    print(text);
  }
Using onchanged callback
Using onchanged callback

onSubmitted
TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  onSubmitted: (text){
    print(text);
  }

onSubmitted is used, only when the Done button is clicked, the text is being printed in the console. Or the callback fires only when the Submit button is clicked.

TextField(
  decoration: InputDecoration(icon: Icon(Icons.access_alarms)),
  onSubmitted: (text){
    print(text);
  },
)
onSubmitted usage in TextField
onSubmitted usage in TextField
Difference in console output when using the onSubmitted callback
Difference in console output when using the onSubmitted callback

Conclusion

TextField can also be used as part of the Form Widget which creates a quick material design form on the Flutter App. To understand more about this, you can take a look at creating Forms in Flutter blog post.

However, the core part of the TextField includes the 2 different callbacks and how they can be used to get the data from the user. Integration with Firebase creates a very robust system of Data manipulation.

Drop in any comments you have in the comments section below.

“Happy Coding”

Also Read  7 Best Java Books for Beginners | Androidmonks

Leave a Comment

Your email address will not be published. Required fields are marked *