TextField in flutter as Editable

Issue

final TextEditingController _namecontroller = TextEditingController(text: 'Jeya Singh');
bool isEditable = false;

Row(
  children: [
    SizedBox(
      width: width(context) * 0.8,
        child: Column(
          children: [
            TextField(
              controller: _namecontroller,
              enabled: isEditable,
              decoration: InputDecoration(
                border: const UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: purple,
                  ),
                ),
                labelText: 'Name',
                labelStyle: const TextStyle(
                fontWeight: FontWeight.w600,
              ),
              suffixIcon: IconButton(
                iconSize: 16,
                onPressed: () {
                  setState(() {
                    isEditable = true;
                  });
                },
              icon: const FaIcon(FontAwesomeIcons.pen),
            ),
          ),
          style: const TextStyle(
            fontWeight: FontWeight.bold,
            color: textBlack,
          ),
        ),
      ],
    ),
  ),
],
)

It was working sometime before, But suddenly its not working and i can set the underline border for textField but, i cant visually see that it was working,

The Thig that I was trying to create was an editable TextField, when pressing the suffixIcon else it should be in just text format.

Solution

You are also disabling the suffix icon by making the Texfield's enabled value to false.

Remove the Iconbutton from Textfield and place it next to Textfield

like this:

Row(
  children: [
    SizedBox(
      width: width(context) * 0.8,
        child: Column(
          children: [
            TextField(
              controller: _namecontroller,
              enabled: isEditable,
              decoration: InputDecoration(
                border: const UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: purple,
                  ),
                ),
                labelText: 'Name',
                labelStyle: const TextStyle(
                fontWeight: FontWeight.w600,
              ),
            
          ),
          style: const TextStyle(
            fontWeight: FontWeight.bold,
            color: textBlack,
          ),
        ),
      ],
    ),
  ),
 IconButton(
   iconSize: 16,
    onPressed: () {
       setState(() {
                    isEditable = true;
                  });
                },
              icon: const FaIcon(FontAwesomeIcons.pen),
            ),
],
)

Answered By - Sahil Hariyani