flutter : api date show in date picker

Question

I am getting time from api and I am storing in "timeSlotData" variable. I want show that api data in this UI which is mention in below.

I want to show time whch is getting from api that api time I want to show in ui.

dynamic timeSlotData ;
  timeSlotUsingIdAndDate(String id, String date){
    apiManager.timeSlotByIdAndDate(id,date).then((value){
      timeSlotData.add(value);
      print(timeSlotData[0].data!.timeSlots!.toString());
      var a=DateTime.parse(timeSlotData[0].data!.timeSlots![0].slotTiming.toString()).toString();

//Here I Convert api time into DateTime 

      DateTime date=DateTime.parse(timeSlotData[0].data!.timeSlots![1].slotTiming.toString());
      var mm=date.month;
      print(mm);
      var yy=date.year;
      print(yy);
      var hh=date.minute;
      print(hh);
      print("a"+a);
    });
  }

This is my ui part coding

 CupertinoDatePicker(
                    backgroundColor: Colors.transparent,
                    use24hFormat: false,
                    mode:CupertinoDatePickerMode.time,
                    initialDateTime: initialDate,
                    minuteInterval: 30,
                    onDateTimeChanged: (DateTime selected) {
                      // do what you need
                      print(selected.hour);
                      print(selected.minute);

                    }),

Answer 1

Create a nullable DateTime on state class that will be used to save selected Datetime.

DateTime? selectedDateTime;

and call this method,

  _openPicker(BuildContext context) {
    () async {
      /// do your perser

      /// set your intial date from parser, in your case it is `date`
      final initalDate = DateTime(
        2011,
      );

      await showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text("Selected Time"),
          content: CupertinoDatePicker(
              backgroundColor: Colors.transparent,
              use24hFormat: false,
              mode: CupertinoDatePickerMode.time,
              initialDateTime: initalDate,
              minuteInterval: 30,
              onDateTimeChanged: (DateTime selected) {
                print(selected.hour);
                print(selected.minute);

                setState(() {
                  selectedDateTime = selected;
                });
              }),
          actions: [
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text("close"),
            ),
          ],
        ),
      );
    };
  }