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.
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;
});
})
],
),
Row(
children: <Widget>[
Container(
width: 100,
child: TextField(
decoration: InputDecoration(
hintText: "Festive Leave",
hintStyle: TextStyle(color: Colors.black),
),
enabled: _isEnable,
),
),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() {
_isEnable = true;
});
})
],
),
your choice this one the text will go away as soon as the user starts to type though
I think this will help you
class SampleDemo extends StatefulWidget {
@override
_SampleDemoState createState() => _SampleDemoState();
}
class _SampleDemoState extends State<SampleDemo> {
String title = "MyTitle";
bool isEditable=false;
@override
Widget build(BuildContext context) {
return Row(children: [
Expanded(
child: !isEditable
? Text(title)
: TextFormField(
initialValue: title,
textInputAction: TextInputAction.done,
onFieldSubmitted: (value) {
setState(() => {isEditable = false, title = value});
})),
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
setState(() => {
isEditable = true,
});
},
)
]);
}
}