Click button Show/hide TextField

Question

I want to hide/show TextField. If TextField show, Text hide... I've code like bellow. But it not working and no any error...

Bellow is my reference code

AlertDialog alert = AlertDialog(
    title: Container(
        color: Color.fromARGB(255, 8, 8, 8),
        child: Text('Submit',
            textAlign: TextAlign.center,
            style: TextStyle(color: Color.fromARGB(255, 250, 251, 250))),
        padding: const EdgeInsets.all(17),
            margin: const EdgeInsets.all(0),
    ),
    titlePadding: const EdgeInsets.all(0),
        content: Container(
            child: Column(mainAxisSize: MainAxisSize.min, children: [
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                        ElevatedButton(
                            onPressed: () {
                                setState(() {
                                    isRevert = !isRevert;
                                });
                                print(isRevert);
                            },
                            child: Text('Show Comment'),
                            style: ElevatedButton.styleFrom(
                                primary: Colors.grey.shade100,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(12),
                                ),
                            ),
                        ),
                        Text("*please click here to write comment."),
                    ],
                ),
                Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                        !isRevert ?
                        Text("Would you like to submit?") :
                        Container(
                            padding: EdgeInsets.all(0),
                            child: Column(
                                children: [
                                    TextField(
                                        decoration: new InputDecoration(
                                            border: OutlineInputBorder(),
                                        ),
                                        controller: TextEditingController(text: "test comment"),
                                        textAlign: TextAlign.left,
                                        maxLines: 6,
                                        style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
                                    ),
                                ],
                            ),
                        ),
                    ],
                ),
            ])),
        actions: [
            yesButton,
            noButton,
        ],
);

Answer 1

Check this code

class AAA extends StatefulWidget {
  const AAA({Key? key}) : super(key: key);

  @override
  State<AAA> createState() => _AAAState();
}

class _AAAState extends State<AAA> {
  bool isRevert = false;
  @override
  Widget build(BuildContext context) {
    return Container(
        child: AlertDialog(
      title: Container(
        color: const Color.fromARGB(255, 8, 8, 8),
        child: const Text('Submit',
            textAlign: TextAlign.center,
            style: TextStyle(color: Color.fromARGB(255, 250, 251, 250))),
        padding: const EdgeInsets.all(17),
        margin: const EdgeInsets.all(0),
      ),
      titlePadding: const EdgeInsets.all(0),
      content: Container(
          child: Column(mainAxisSize: MainAxisSize.min, children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isRevert = !isRevert;
                });
                print(isRevert);
              },
              child: const Text('Show Comment'),
              style: ElevatedButton.styleFrom(
                primary: Colors.grey.shade100,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            isRevert
                ? SizedBox.shrink()
                : Expanded(child: Text("*please click here to write comment.")),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            !isRevert
                ? const Text("Would you like to submit?")
                : Container(
                    padding: const EdgeInsets.all(0),
                    child: Column(
                      children: [
                        TextField(
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                          ),
                          controller:
                              TextEditingController(text: "test comment"),
                          textAlign: TextAlign.left,
                          maxLines: 6,
                          style: const TextStyle(
                              fontSize: 15, fontWeight: FontWeight.normal),
                        ),
                      ],
                    ),
                  ),
          ],
        ),
      ])),
      actions: [
          yesButton,
          noButton,
      ],
    ));
  }
}

Answer 2

Try below code and Wrap your AlertDialog inside StatefulBuilder

bool isRevert = false;
  void _showDecline() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            return AlertDialog(
              title: new Text("Decline Appointment Request"),
              content: Container(
                  child: Column(mainAxisSize: MainAxisSize.min, children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () => setState(() => isRevert = !isRevert),
                      child: Text('Show Comment'),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: isRevert ? Colors.grey : Colors.blue,//this will depend on you if you want to button color onclick
                        primary: Colors.grey.shade100,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                    ),
                    Text("*please click here to write comment."),
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    !isRevert
                        ? Text("Would you like to submit?")
                        : Container(
                            padding: EdgeInsets.all(0),
                            child: Column(
                              children: [
                                TextField(
                                  decoration: new InputDecoration(
                                    border: OutlineInputBorder(),
                                  ),
                                  controller: TextEditingController(
                                      text: "test comment"),
                                  textAlign: TextAlign.left,
                                  maxLines: 6,
                                  style: TextStyle(
                                      fontSize: 15,
                                      fontWeight: FontWeight.normal),
                                ),
                              ],
                            ),
                          ),
                  ],
                ),
              ])),
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                new TextButton(
                  child: new Text("Close"),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        );
      },
    );
  }

Result before button click->

Result after button click->