'Flutter CupertinoDateTimePicker minute interval

I am trying to create a Cupertino date picker for the time being in 15 min intervals. When trying to add an interval every 15 minutes, my showModalSheet now takes up the whole screen. How can I add 15 minute intervals without the Cupertino picker taking up the whole screen?

My code:

Widget getStartingTimePicker() {

    return Container(
      height: MediaQuery.of(context).size.height * 15,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              CupertinoButton(
                child: Text('Done'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          Expanded(
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.time,
              minuteInterval: 15,
              initialDateTime: _currentHour.add(Duration(minutes: 15 - _currentHour.minute % 15)),
              onDateTimeChanged: (startTime) {
                setState(() {
                  // _currentHour = startTime;
                });
              },
            ),
          ),
        ],
      ),
    );

  }

Result: Adding Minute Interval result



Solution 1:[1]

your problem is you set the height of screen * 15

that means 15 times greater than screen height :)

you should use height: MediaQuery.of(context).size.height * 0.15

return Container(
  height: MediaQuery.of(context).size.height * 0.15,
  child: Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          CupertinoButton(
            child: Text('Done'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
      Expanded(
        child: CupertinoDatePicker(
          mode: CupertinoDatePickerMode.time,
          minuteInterval: 15,
          initialDateTime: _currentHour.add(Duration(minutes: 15 - _currentHour.minute % 15)),
          onDateTimeChanged: (startTime) {
            setState(() {
              // _currentHour = startTime;
            });
          },
        ),
      ),
    ],
  ),
);

Solution 2:[2]

just put CupertinoDatePicker inside Sized Box and set the hight as whatever you want.

 SizedBox(
        hight:200
        child: CupertinoDatePicker(\\.....etc
        ),
      ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amir
Solution 2 Mohamed Reda