Сделайте текст редактируемым после нажатия кнопки

Question

Кто-нибудь знает, как сделать текст редактируемым после нажатия кнопки? Я хочу, чтобы он был редактируемым, только когда пользователь нажимает кнопку. Ниже приведен результат, который мне нужен.

Если я хочу отредактировать текст «Праздничный отпуск», то мне нужно нажать кнопку редактирования.

Answer 1

Я думаю, что это поможет вам

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

Answer 2

Я думаю, что это должно делать то, что вы хотите.

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

Answer 3

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

на ваш выбор этот текст go исчезнет, ​​как только пользователь начнет печатать, хотя