From d5dd6e406a1db2c0166d2be8c2531585e5bf73d2 Mon Sep 17 00:00:00 2001 From: Badr Kouki Date: Sat, 26 Jul 2025 11:08:57 +0100 Subject: [PATCH 1/2] feat: add simple picker diameter ratio parameter --- example/lib/main.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/example/lib/main.dart b/example/lib/main.dart index d4bdb51..605f1e1 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -246,6 +246,7 @@ class ExampleApp extends StatelessWidget { BottomPicker( items: items, selectedItemIndex: 1, + diameterRatio: 200, headerBuilder: (context) { return Container( child: Row( From 4bfdf3a17faccac1f19ed066abc7f7b26d1a1d4e Mon Sep 17 00:00:00 2001 From: Badr Kouki Date: Sat, 26 Jul 2025 11:09:06 +0100 Subject: [PATCH 2/2] feat: add simple picker diameter ratio parameter --- lib/bottom_picker.dart | 116 +++++++++++++++++++-------------- lib/widgets/simple_picker.dart | 3 + lib/widgets/year_picker.dart | 1 + 3 files changed, 70 insertions(+), 50 deletions(-) diff --git a/lib/bottom_picker.dart b/lib/bottom_picker.dart index f9449b6..6ec96d3 100644 --- a/lib/bottom_picker.dart +++ b/lib/bottom_picker.dart @@ -76,7 +76,7 @@ class BottomPicker extends StatefulWidget { @Deprecated('should use headerBuilder instead') this.closeWidget, this.closeOnSubmit = true, this.headerBuilder, - this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { dateOrder = null; onRangeDateSubmitPressed = null; @@ -132,6 +132,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { datePickerMode = CupertinoDatePickerMode.date; bottomPickerType = BottomPickerType.dateTime; @@ -163,6 +164,7 @@ class BottomPicker extends StatefulWidget { this.buttonContent, this.buttonStyle, this.itemExtent = 35.0, + this.diameterRatio = 1.1, this.headerBuilder, }) { datePickerMode = CupertinoDatePickerMode.date; @@ -216,6 +218,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { datePickerMode = CupertinoDatePickerMode.monthYear; bottomPickerType = BottomPickerType.dateTime; @@ -272,6 +275,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { datePickerMode = CupertinoDatePickerMode.dateAndTime; bottomPickerType = BottomPickerType.dateTime; @@ -325,6 +329,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { datePickerMode = CupertinoDatePickerMode.time; bottomPickerType = BottomPickerType.time; @@ -378,6 +383,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { dateOrder = null; onRangeDateSubmitPressed = null; @@ -432,6 +438,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { datePickerMode = CupertinoDatePickerMode.date; bottomPickerType = BottomPickerType.rangeDate; @@ -502,6 +509,7 @@ class BottomPicker extends StatefulWidget { this.closeOnSubmit = true, this.headerBuilder, this.calendarDays = CupertinoDatePickerWidget.fullWeek, + this.diameterRatio = 1.1, }) { datePickerMode = CupertinoDatePickerMode.time; bottomPickerType = BottomPickerType.rangeTime; @@ -799,6 +807,9 @@ class BottomPicker extends StatefulWidget { /// The datepicker calendar type List calendarDays = CupertinoDatePickerWidget.fullWeek; + /// The bottom picker selector diameter ratio. + final double diameterRatio; + ///display the bottom picker popup ///[context] the app context to display the popup void show(BuildContext context) { @@ -957,6 +968,7 @@ class BottomPickerState extends State { itemExtent: widget.itemExtent, selectionOverlay: widget.selectionOverlay, pickerThemeData: widget.pickerThemeData, + diameterRatio: widget.diameterRatio, ) : widget.bottomPickerType == BottomPickerType.timer ? TimePicker( @@ -1022,55 +1034,59 @@ class BottomPickerState extends State { ) : widget.bottomPickerType == BottomPickerType.rangeTime - ? RangePicker( - mode: CupertinoDatePickerMode.time, - use24hFormat: widget.use24hFormat, - initialFirstDateTime: - widget.initialFirstTime, - initialSecondDateTime: - widget.initialSecondTime, - maxFirstDate: widget.maxFirstTime, - minFirstDateTime: widget.minFirstTime, - maxSecondDate: widget.maxSecondTime, - minSecondDateTime: widget.minSecondTime, - onFirstDateChanged: (DateTime date) { - selectedFirstDateTime = date; - }, - onSecondDateChanged: (DateTime date) { - selectedSecondDateTime = date; - }, - dateOrder: widget.dateOrder, - textStyle: widget.pickerTextStyle, - minuteInterval: widget.minuteInterval, - itemExtent: widget.itemExtent, - showTimeSeperator: - widget.showTimeSeparator, - pickerThemeData: widget.pickerThemeData, - ) - : RangePicker( - mode: CupertinoDatePickerMode.date, - use24hFormat: widget.use24hFormat, - initialFirstDateTime: - widget.initialFirstDate, - initialSecondDateTime: - widget.initialSecondDate, - maxFirstDate: widget.maxFirstDate, - minFirstDateTime: widget.minFirstDate, - maxSecondDate: widget.maxSecondDate, - minSecondDateTime: widget.minSecondDate, - onFirstDateChanged: (DateTime date) { - selectedFirstDateTime = date; - }, - onSecondDateChanged: (DateTime date) { - selectedSecondDateTime = date; - }, - dateOrder: widget.dateOrder, - textStyle: widget.pickerTextStyle, - itemExtent: widget.itemExtent, - showTimeSeperator: - widget.showTimeSeparator, - pickerThemeData: widget.pickerThemeData, - ), + ? RangePicker( + mode: CupertinoDatePickerMode.time, + use24hFormat: widget.use24hFormat, + initialFirstDateTime: + widget.initialFirstTime, + initialSecondDateTime: + widget.initialSecondTime, + maxFirstDate: widget.maxFirstTime, + minFirstDateTime: widget.minFirstTime, + maxSecondDate: widget.maxSecondTime, + minSecondDateTime: + widget.minSecondTime, + onFirstDateChanged: (DateTime date) { + selectedFirstDateTime = date; + }, + onSecondDateChanged: (DateTime date) { + selectedSecondDateTime = date; + }, + dateOrder: widget.dateOrder, + textStyle: widget.pickerTextStyle, + minuteInterval: widget.minuteInterval, + itemExtent: widget.itemExtent, + showTimeSeperator: + widget.showTimeSeparator, + pickerThemeData: + widget.pickerThemeData, + ) + : RangePicker( + mode: CupertinoDatePickerMode.date, + use24hFormat: widget.use24hFormat, + initialFirstDateTime: + widget.initialFirstDate, + initialSecondDateTime: + widget.initialSecondDate, + maxFirstDate: widget.maxFirstDate, + minFirstDateTime: widget.minFirstDate, + maxSecondDate: widget.maxSecondDate, + minSecondDateTime: + widget.minSecondDate, + onFirstDateChanged: (DateTime date) { + selectedFirstDateTime = date; + }, + onSecondDateChanged: (DateTime date) { + selectedSecondDateTime = date; + }, + dateOrder: widget.dateOrder, + textStyle: widget.pickerTextStyle, + itemExtent: widget.itemExtent, + showTimeSeperator: + widget.showTimeSeparator, + pickerThemeData: + widget.pickerThemeData, + ), ), if (widget.displaySubmitButton) Padding( diff --git a/lib/widgets/simple_picker.dart b/lib/widgets/simple_picker.dart index 7410bec..f0d5376 100644 --- a/lib/widgets/simple_picker.dart +++ b/lib/widgets/simple_picker.dart @@ -11,6 +11,7 @@ class SimplePicker extends StatelessWidget { final double itemExtent; final Widget? selectionOverlay; final CupertinoTextThemeData? pickerThemeData; + final double diameterRatio; const SimplePicker({ super.key, @@ -21,6 +22,7 @@ class SimplePicker extends StatelessWidget { required this.itemExtent, this.selectionOverlay, this.pickerThemeData, + required this.diameterRatio, }); @override @@ -35,6 +37,7 @@ class SimplePicker extends StatelessWidget { ), child: CupertinoPicker( offAxisFraction: 2.0, + diameterRatio: diameterRatio, itemExtent: itemExtent, selectionOverlay: selectionOverlay ?? const CupertinoPickerDefaultSelectionOverlay(), diff --git a/lib/widgets/year_picker.dart b/lib/widgets/year_picker.dart index ce4d9f3..c547ba5 100644 --- a/lib/widgets/year_picker.dart +++ b/lib/widgets/year_picker.dart @@ -71,6 +71,7 @@ class _BottomYearDatePicker extends State { selectedItemIndex: 0, itemExtent: widget.itemExtent ?? 0, pickerThemeData: widget.pickerThemeData, + diameterRatio: 1.1, ); } }