How to add text beside hour and minute in CupertinoDatePicker

Question

I am using CupertinoDatePicker to allow user to select specific time in the current day, but i want to show text beside the selected hour and selected minute, is there any way to do this ?

This is what i am expecting

This is what i got

CupertinoDatePicker(
    mode: CupertinoDatePickerMode.time,
    use24hFormat: true,
    onDateTimeChanged: (value){
      setState(() {
        print(value);
      });
    },
)

Answer 1

You are looking for the CupertinoTimerPicker widget.

It comes up with the default labels.

example:

12 hours 12 minute

Code for the same:

          CupertinoTimerPicker(
            onTimerDurationChanged: (value) {
              setState(() {
                print(value);
              });
            },
            mode: CupertinoTimerPickerMode.hm,
            backgroundColor: Colors.red,
            initialTimerDuration: Duration(hours: 12, minutes: 12),
          ),

But, If you need the custom label as in h, m, and s in your case, you've to make a custom Cupertino time picker using existing code (from Flutter SDK).

Answer 2

You can use CupertinoTimerPicker.

Referance: CupertinoTimerPicker