'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: 
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 |
