How To Rebuild Dialog Widget On Changing Bool Variable State?

im trying to submit form on Dialog and i have a DateTimePicker button and need to make a validation on it also before submitting , what i want to do is showing a text error in case no date picked by changing my own variable "isValid" to false but the UI is not updating , i have to close the dialog and reopen it to see the error text even though i wrapped my column with a StatefulBuilder

my dialog photo here

here is my code

StatefulBuilder(builder: (context, StateSetter setState) {
                return isValid == false
                    ? Column(
                        children: [
                          ElevatedButton(
                              onPressed: () {
                                 DateTimePicker(context)
                                    .then((value) => setState(() {
                                          _appointmentDateTime = value;
                                        }));
                              },
                              child: Text(getTimeDate())),
                          Text(
                            'error',
                            style: TextStyle(
                                color: Colors.red, fontSize: 10),
                          ),
                        ],
                      )
                    : Column(
                        children: [
                          ElevatedButton(
                              onPressed: () {
                                DateTimePicker(context)
                                    .then((value) => setState(() {
                                          _appointmentDateTime = value;
                                        }));
                              },
                              child: Text(getTimeDate())),
                        ],
                      );
              })

Validating form + toggling the isValid Value is working fine

OutlinedButton(
                    onPressed: () async {
                      if (_formKey.currentState.validate() &&
                          _appointmentDateTime != null) {
                        String date = DateFormat('yyyy-MM-dd hh:mm')
                            .format(_appointmentDateTime);
                        var appointment = Appointment(
                            patientName: widget.patient.name,
                            date: date,
                            hospital: _hospitalController.text,
                        await FirebaseApi.addPatientAppointment(
                            widget.patient.id, appointment);
                        print('Appointment Created ');
                        _formKey.currentState.reset();
                        setState(() {
                          translator = null;
                          _appointmentDateTime = null;
                        });
                        Navigator.pop(context);
                      } 

                            else {
                            setState(() {
                              isValid = !isValid;
                            });
                          }
                        },
                        child: Text('Add Appointment')),

It can get confusing when writing the code like this when dealing with Dialogs. The setState you are using in the OutlinedButton is not the same as the setState used in the StatefulBuilder. You need to enclose your OutlinedButton inside the StatefulBuilder too. If you ever use a StatefulBuilder inside a stateful widget, it is better to use a different name like e.g setDialogState.

It is even better to create a separate stateful widget class just for your Dialog contents and pass the formKey and anything else than using a StatefulBuilder in this case to avoid confusion.