How to Supply an Initial value to TextField Widget in Flutter?

Hello Guys How are you all? Hope You all are fine. When we are using TextField in our flutter app some time we need to give it an initial value. So today Here I come with a tutorial on supply an initial value to TextField Widget In Flutter?

Without Wasting your Time Lets start this tutorial.

How to Supply an Initial value to TextField Widget in Flutter?

Question : How to supply an initial value to TextField Widget in flutter ?

Answer : To give initial value to TextField you have to make controller of TextEditingController and then we can give TextEditingController.text to initial value. Checkout Below all step.

Solution 1 : Using Controller TextEditingController

  1. Just Make the Controller the same Like Below.
  2. TextEditingController _controller = new TextEditingController();
  3. give _controller initial value exact like below.
  4. _controller.text = ‘your initial text’;
  5. And then assign controller to your TextFormField as like below.
  6. controller: _controller,

My Full Code Here

TextEditingController _controller = new TextEditingController();


_controller.text = 'your initial text';

final your_text_name = TextFormField(
      autofocus: false,
      controller: _controller,
      decoration: InputDecoration(
        hintText: 'Value',
      ),
    );

Solution 2 : Using initialValue Property.

You can directly use initialValue like below.

          child: TextFormField(
            decoration: new InputDecoration(
              hintText: 'Last Name',
              border: new OutlineInputBorder(
                borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0),
                ),
              ),
            ),
            autofocus: false,
            initialValue: 'Initial Value Text',
          ),

Here Is Output

How to Supply an Initial value to TextField Widget in Flutter?, Initial value to TextField Widget in Flutter, initial value to textfield widget, supply an initial value to TextField
,
How to Supply an Initial value to TextField Widget in Flutter?, Initial value to TextField Widget in Flutter, initial value to textfield widget, supply an initial value to TextField

Solution 3 : Using Direct Controller to TextField.

You can Direct Use Controller in Your TextField Exact Like Below.

TextField(
   controller: TextEditingController(text: "Initial Text here"),
)

Summery

So it’s all About All possible Methods. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

Leave a Comment