TextField in flutter as Editable

Question

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.

Answer 1

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),
            ),
],
)