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);

                    }),

Solution

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

Comments

[Yeasin Sheikh]

is your question how to insert initial Time?

[Deepak]

@YeasinSheikh yes

[Yeasin Sheikh]

Does your parser work perfectly ?

[Deepak]

@YeasinSheikh DateTime.parse(timeSlotData[0].data!.timeSlots.toString()); I got all data from api and I print mm and I got it my minutes

[Deepak]

but I got multiple times from api so how to show aal time which I getting

[Yeasin Sheikh]

There will be one initialDateTime and CupertinoDatePicker takes single initial date

[Deepak]

YeasinSheikh listen suppose I am getting Hours from api like 3,5,7 minuts like 40, 20, 30 this times I want to show in UI thats it. And I know it takes single initial date but my problem is for UI. Are you understanding???

[Deepak]

YeasinSheikh please help me

[Yeasin Sheikh]

You use DateTime.now().add(Duration(hours: ,minutes: )); does it solve now. DateTime.now() will be your getting date from api, then add

[Deepak]

YeasinSheikh but what about loop how to work

[Yeasin Sheikh]

it will perform operation based on initial date , like your date have others property, just add them there it will work, test and let me know

[Deepak]

YeasinSheikh if you dont mine can you meet with me on goole meet

[Yeasin Sheikh]

can you include the errors here

[Deepak]

listen suppose I am getting Hours from api like 3,5,7, 9, minuts like 40, 20, 30 , 20 this times I want to show in UI thats it. suppose my hours time set on 7 before seven should be show 5 and 3 after 7 should be show 9 like my in ui time set now 1 before 1 is showing 12 nad 11 and after 1 is showing 2, and 3 . Like this if I got my time 3,5,7,8,9 hours time from my api I want just show in ui . Are you Understading this things?????

[Yeasin Sheikh]

oh ho, you are talking about interval. but there is only minuteInterval , nothing for hour.

[Deepak]

yes but But the Hours and minuts that I am getting from an API have to show at the same time on the UI.

[Yeasin Sheikh]

I will suggest using listView instead or CupertinoPicker

[Deepak]

But how to make UI SomeThing like TimePicker?? I think That is not posible

[Yeasin Sheikh]

There will thee CupertinoPicker inside a Row on Dialog content and tree variable used to save the selected values.