Flutter: AlertDialog Content not updating after using setstate

Question

I have an alert dialog box and i am giving user option to select date-time once user select it i would like to show it on the dialog box. This is the code for Date-Time Picker.

 void initState() {
    super.initState();
     
    pickeddate = DateTime.now();
    pickedtime = TimeOfDay.now();

}

_pickedDate() async {
    rescheduleddate = await showDatePicker(
      context: context,
      firstDate: DateTime.now().add(new Duration(days: 1)), //.day + 1),
      lastDate: DateTime.now().add(new Duration(days: 7)), //day + 10),
      initialDate: DateTime.now().add(new Duration(days: 1)), //day + 1),
    );

    if (rescheduleddate != null) {
      print(rescheduleddate);
      setState(() {
        pickeddate = rescheduleddate;
      });
    }
    //_openPopup(context);
  }

  _pickedTime() async {
    rescheduledtime =
        await showTimePicker(context: context, initialTime: pickedtime);
    if (rescheduledtime != null) {
      setState(() {
        pickedtime = rescheduledtime;
      });
    }
    //_openPopup(context);
  }

This is the alert dialog box.

 _openPopup(context, bookingid) {
        Alert(
            context: context,
            title: "Reschedule",
            content: Column(
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    Icons.calendar_today,
                    color: Colors.purple,
                  ),
                  title: Text(
                      "${pickeddate.day}-${pickeddate.month}-${pickeddate.year}"),
                  trailing: Icon(Icons.keyboard_arrow_down),
                  onTap: () {
                    // Navigator.of(context).pop();
                    _pickedDate();
    
                    // Navigator.of(context).pop();
                    //_openPopup(context);
                  },
                ),
                ListTile(
                  leading: Icon(
                    Icons.lock_clock,
                    color: Colors.purple,
                  ),
                  title: Text("${pickedtime.hour}:${pickedtime.minute}"),
                  trailing: Icon(Icons.keyboard_arrow_down),
                  onTap: () {
                    //Navigator.of(context).pop();
                    _pickedTime();
    
                    // _openPopup(context);
                  },
                ),
              ],
            ),
            buttons: [
              DialogButton(
                onPressed: () {
                  if (pickeddate.day != DateTime.now().day) {
                   print(pickeddate); 
                     
                     
                  } else {
                    print(pickeddate);
                    _showSnackBar(
                        context,
                        'Please select date and Time for reschedule.',
                        Colors.redAccent);
                  }
    
                //  Navigator.pop(context);
                },
                child: Text(
                  "Reschedule",
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              )
            ]).show();
      }

The above code is using one plugin rFlutter.

I tried one more solution which is without any plugin.

_showDialog() async {
    await showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        return new CupertinoAlertDialog(
          title: new Text('Please select'),
          actions: <Widget>[
            new CupertinoDialogAction(
              isDestructiveAction: true,
              onPressed: () {
                Navigator.of(context).pop('Cancel');
              },
              child: new Text('Cancel'),
            ),
            new CupertinoDialogAction(
              isDestructiveAction: true,
              onPressed: () {
                Navigator.of(context).pop('Accept');
              },
              child: new Text('Accept'),
            ),
          ],
          content: new SingleChildScrollView(
            child: new Material(
              child: //_buildList(),
                  Column(
                children: <Widget>[
                  ListTile(
                    leading: Icon(
                      Icons.calendar_today,
                      color: Colors.purple,
                    ),
                    title: Text(
                        "${pickeddate.day}-${pickeddate.month}-${pickeddate.year}"),
                    trailing: Icon(Icons.keyboard_arrow_down),
                    onTap: () {
                      //Navigator.of(context).pop();
                      _pickedDate();

                      // Navigator.of(context).pop();
                      //_openPopup(context);
                    },
                  ),
                  ListTile(
                    leading: Icon(
                      Icons.lock_clock,
                      color: Colors.purple,
                    ),
                    title: Text("${pickedtime.hour}:${pickedtime.minute}"),
                    trailing: Icon(Icons.keyboard_arrow_down),
                    onTap: () {
                      // Navigator.of(context).pop();
                      _pickedTime();

                      // _openPopup(context);
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      },
      barrierDismissible: false,
    );
  }

Answer 1

You need to use stateful builder like as this code.

showDialog(
  context: context,
  builder: (BuildContext context) {
    int selectedRadio = 0; // Declare your variable outside the builder
    return AlertDialog( 
      content: StatefulBuilder(  // You need this, notice the parameters below:
        builder: (BuildContext context, StateSetter setState) {
          return Column(  // Then, the content of your dialog.
            mainAxisSize: MainAxisSize.min,
            children: List<Widget>.generate(4, (int index) {
              return Radio<int>(
                value: index,
                groupValue: selectedRadio,
                onChanged: (int value) {
                  // Whenever you need, call setState on your variable
                  setState(() => selectedRadio = value);
                },
              );
            }),
          );
        },
      ),
    );
  },
);

Answer 2

Initialized DateTime object with current Date and Time

DateTime _selectedDate = DateTime.now();

Call this Function on desired events/actions:

//Function to Show Date Picker~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  void _displayDatePicker() {
    showDatePicker(
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime(2022),
            lastDate: DateTime.now())
        .then((pickedDate) {
      if (pickedDate == null) return;
      setState(() {
        _selectedDate = pickedDate;
        print("Picked Date: "+pickedDate.toString());
      });
    });
  }

Note: Use this function in a StatefulWidget's state class