Make the text editable after press the button

Question

Is anyone know how to make the text editable after I press the button? I want it to be editable only when the user clicks the button. Below is the result that I needed.

If I want to edit the text "Festive Leave", then I need to click the edit button.

Solution

I think this should do what you want.

TextEditingController _controller =
      TextEditingController(text: "Festive Leave");
  bool _isEnable = false;
//These are initialize at the top


Row(
            children: <Widget>[
              Container(
                width: 100,
                child: TextField(
                  controller: _controller,
                  enabled: _isEnable,
                ),
              ),
              IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () {
                    setState(() {
                      _isEnable = true;
                    });
                  })
            ],
          ),