TextField Initial Value in Flutter- Top 3 Ways You Should Know (2023)

The TextField widget is one of the most used and important widgets in Flutter. It allows you to take various kinds of inputs from users. You may be using the TextField widget in a simple form or driving the whole messaging app on it. But sometimes, you may need to add the initial value to Textfield. So in this tutorial, we’ll learn the top 3 ways to add TextField initial value in Flutter.

Here’s what the TextField with an initial value looks like:

Here’s what we’ll cover:

1. Need of Adding Initial Value to TextField
2. Ways to Add TextField Initial Value in Flutter
   1. Using TextEditingController
   2. Providing Direct TextEditingController
   3. Using TextFormField

Need of Adding Initial Value to TextField

There can be several scenarios where you need to add the initial value to TextField based on your app. A common example is messaging app where a user types a message and navigates to somewhere else in the app (without sending a message) and then comes back. In such a situation you should show the unsent message again in the TextField. 

Ways to Add TextField Initial Value in Flutter

The TextField initial value in Flutter can be added in the following three ways:

1. Using TextEditingController
2. Providing Direct TextEditingController
3. Using TextFormField

1. Using TextEditingController

You can add the initial value to TextField by creating a dedicated TextEditingController, setting its text property to the text you want to show, and then assigning the TextEditingController to the actual TextField.

Steps:

Step 1: Create the TextEditingController.

Step 2: Add the actual text to the text property of TextEditingController.

Step 3: Assign the TextEditingController to the TextField.

Code Example:

// Step 1 <- SEE HERE
TextEditingController _controller = new TextEditingController();
@override
void initState() {
  // TODO: implement initState
  super.initState();
  // Step 2 <- SEE HERE
  _controller.text = 'Complete the story from here...';
}
// Step 3 <- SEE HERE
TextField(
  controller: _controller,
  decoration: InputDecoration(labelText: 'Enter Number'),
),

When to Use:

Use this approach when you want to utilize the instance of TextEditingController for other purposes as well. For example, updating/clearing using the same instance of TextEditingController.

Output:

2. Providing Direct TextEditingController

You can also add the initial value to TextField by adding the direct TextEditingController to the TextField and then setting the text parameter to the text you want.

Steps:

Step 1: Inside the TextField widget, add the controller parameter and assign the TextEditingController.

Step 2: Inside the TextEditingController, add the text parameter and add the actual text you want.

Code Example:

TextField(
  controller:
      TextEditingController(text: "Complete the story from here..."), // <-- SEE HERE
  decoration: InputDecoration(labelText: 'Enter Number'),
),

When to Use:

Use this approach when you don’t want to utilize the instance of TextEditingController for other operations such as updating/clearing the text.

Output:

3. Using TextFormField

The TextFormField is different from the TextField widget and it can be used to show the initial text. 

Steps:

Step 1: Add the TextFormField widget.

Step 2: Inside the TextFormField, add the initialValue parameter and write the text that you want to show as prefilled.

Code Example:

TextFormField(
  autofocus: false,
  initialValue: 'Complete the story from here...', // <-- SEE HERE
  decoration: InputDecoration(
    hintText: 'Enter Number',
  ),
),

When to Use:

You should use this approach when you are building a form that requires user input validation.

Output:

Conclusion

In this tutorial, we learned how to add TextField initial value in Flutter with practical examples. We first saw the need for adding the initial value to TextField and then went through the ways to add initial text that includes using the TextEditingController and TextFormField. We also understood when to use which approach. 

Would you like to check other interesting Flutter tutorials?