From 78259bb081193a323201dea515f0773be30e922c Mon Sep 17 00:00:00 2001 From: rjgpereira Date: Mon, 3 Jun 2024 11:34:43 +0100 Subject: [PATCH] passing selectionOverlay and magnification to CupertinoPicker; --- lib/widget/date_picker_widget.dart | 156 ++++++++++------------------- 1 file changed, 52 insertions(+), 104 deletions(-) diff --git a/lib/widget/date_picker_widget.dart b/lib/widget/date_picker_widget.dart index cf92932..ef46c24 100644 --- a/lib/widget/date_picker_widget.dart +++ b/lib/widget/date_picker_widget.dart @@ -25,6 +25,8 @@ class DatePickerWidget extends StatefulWidget { this.onChange, this.onConfirm, this.looping = false, + this.selectionOverlay, + this.magnification, }) : super(key: key) { DateTime minTime = firstDate ?? DateTime.parse(DATE_PICKER_MIN_DATETIME); DateTime maxTime = lastDate ?? DateTime.parse(DATE_PICKER_MAX_DATETIME); @@ -39,19 +41,18 @@ class DatePickerWidget extends StatefulWidget { final DateVoidCallback? onCancel; final DateValueCallback? onChange, onConfirm; final bool looping; + final Widget? selectionOverlay; + final double? magnification; @override - State createState() => - _DatePickerWidgetState(this.firstDate, this.lastDate, this.initialDate); + State createState() => _DatePickerWidgetState(this.firstDate, this.lastDate, this.initialDate); } class _DatePickerWidgetState extends State { late DateTime _minDateTime, _maxDateTime; int? _currYear, _currMonth, _currDay; List? _yearRange, _monthRange, _dayRange; - FixedExtentScrollController? _yearScrollCtrl, - _monthScrollCtrl, - _dayScrollCtrl; + FixedExtentScrollController? _yearScrollCtrl, _monthScrollCtrl, _dayScrollCtrl; late Map _scrollCtrlMap; late Map?> _valueRangeMap; @@ -61,8 +62,8 @@ class _DatePickerWidgetState extends State { // So _lock make sure that month doesn't change from cupertino widget // we will handle it manually bool _lock = false; - _DatePickerWidgetState( - DateTime? minDateTime, DateTime? maxDateTime, DateTime? initialDateTime) { + + _DatePickerWidgetState(DateTime? minDateTime, DateTime? maxDateTime, DateTime? initialDateTime) { // handle current selected year、month、day DateTime initDateTime = initialDateTime ?? DateTime.now(); this._currYear = initDateTime.year; @@ -86,18 +87,11 @@ class _DatePickerWidgetState extends State { this._currDay = min(max(_dayRange!.first, _currDay!), _dayRange!.last); // create scroll controller - _yearScrollCtrl = FixedExtentScrollController( - initialItem: _currYear! - _yearRange!.first); - _monthScrollCtrl = FixedExtentScrollController( - initialItem: _currMonth! - _monthRange!.first); - _dayScrollCtrl = - FixedExtentScrollController(initialItem: _currDay! - _dayRange!.first); - - _scrollCtrlMap = { - 'y': _yearScrollCtrl, - 'M': _monthScrollCtrl, - 'd': _dayScrollCtrl - }; + _yearScrollCtrl = FixedExtentScrollController(initialItem: _currYear! - _yearRange!.first); + _monthScrollCtrl = FixedExtentScrollController(initialItem: _currMonth! - _monthRange!.first); + _dayScrollCtrl = FixedExtentScrollController(initialItem: _currDay! - _dayRange!.first); + + _scrollCtrlMap = {'y': _yearScrollCtrl, 'M': _monthScrollCtrl, 'd': _dayScrollCtrl}; _valueRangeMap = {'y': _yearRange, 'M': _monthRange, 'd': _dayRange}; } @@ -106,8 +100,7 @@ class _DatePickerWidgetState extends State { return Container( //padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 0), child: GestureDetector( - child: Material( - color: Colors.transparent, child: _renderPickerView(context)), + child: Material(color: Colors.transparent, child: _renderPickerView(context)), ), ); } @@ -152,8 +145,7 @@ class _DatePickerWidgetState extends State { /// render the picker widget of year、month and day Widget _renderDatePickerWidget() { List pickers = []; - List formatArr = - DateTimeFormatter.splitDateFormat(widget.dateFormat); + List formatArr = DateTimeFormatter.splitDateFormat(widget.dateFormat); formatArr.forEach((format) { List valueRange = _findPickerItemRange(format)!; @@ -176,12 +168,10 @@ class _DatePickerWidgetState extends State { _changeDaySelection(value); } }, - fontSize: widget.pickerTheme!.itemTextStyle.fontSize ?? - sizeByFormat(widget.dateFormat!)); + fontSize: widget.pickerTheme!.itemTextStyle.fontSize ?? sizeByFormat(widget.dateFormat!)); pickers.add(pickerColumn); }); - return Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: pickers); + return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: pickers); } Widget _renderDatePickerColumnComponent( @@ -192,89 +182,50 @@ class _DatePickerWidgetState extends State { double? fontSize}) { return Expanded( flex: 1, - child: Stack( - fit: StackFit.loose, - children: [ - Positioned( - child: Container( - padding: EdgeInsets.symmetric(horizontal: 7, vertical: 18), - height: widget.pickerTheme!.pickerHeight, - decoration: - BoxDecoration(color: widget.pickerTheme!.backgroundColor), - child: CupertinoPicker( - selectionOverlay: Container(), - backgroundColor: widget.pickerTheme!.backgroundColor, - scrollController: scrollCtrl, - squeeze: 0.95, - diameterRatio: 1.5, - itemExtent: widget.pickerTheme!.itemHeight, - onSelectedItemChanged: valueChanged, - looping: widget.looping, - children: List.generate( - valueRange.last - valueRange.first + 1, - (index) { - return _renderDatePickerItemComponent( - valueRange.first + index, - format, - fontSize, - ); - }, + child: Container( + padding: EdgeInsets.symmetric(horizontal: 7, vertical: 18), + height: widget.pickerTheme!.pickerHeight, + decoration: BoxDecoration(color: widget.pickerTheme!.backgroundColor), + child: CupertinoPicker( + selectionOverlay: widget.selectionOverlay ?? + Container( + decoration: BoxDecoration( + border: Border( + top: BorderSide(width: 1.0), + bottom: BorderSide(width: 1.0), + ), ), ), - ), - ), - Positioned( - child: Container( - margin: const EdgeInsets.only(top: 63), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(width: MediaQuery.of(context).size.width * 0.02), - Expanded( - child: Divider( - color: widget.pickerTheme!.dividerColor ?? - widget.pickerTheme!.itemTextStyle.color, - height: 1, - thickness: 2, - ), - ), - SizedBox(width: MediaQuery.of(context).size.width * 0.02) - ], - )), - ), - Positioned( - child: Container( - margin: const EdgeInsets.only(top: 99), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(width: MediaQuery.of(context).size.width * 0.02), - Expanded( - child: Divider( - color: widget.pickerTheme!.dividerColor ?? - widget.pickerTheme!.itemTextStyle.color, - height: 1, - thickness: 2, - ), - ), - SizedBox(width: MediaQuery.of(context).size.width * 0.02), - ], - )), + magnification: widget.magnification ?? 1.5, + backgroundColor: widget.pickerTheme!.backgroundColor, + scrollController: scrollCtrl, + squeeze: 0.95, + diameterRatio: 1.5, + itemExtent: widget.pickerTheme!.itemHeight, + onSelectedItemChanged: valueChanged, + looping: widget.looping, + children: List.generate( + valueRange.last - valueRange.first + 1, + (index) { + return _renderDatePickerItemComponent( + valueRange.first + index, + format, + fontSize, + ); + }, ), - ], + ), ), ); } double sizeByFormat(String format) { - if (format.contains("-MMMM") || format.contains("MMMM-")) - return DATETIME_PICKER_ITEM_TEXT_SIZE_SMALL; + if (format.contains("-MMMM") || format.contains("MMMM-")) return DATETIME_PICKER_ITEM_TEXT_SIZE_SMALL; return DATETIME_PICKER_ITEM_TEXT_SIZE_BIG; } - Widget _renderDatePickerItemComponent( - int value, String format, double? fontSize) { + Widget _renderDatePickerItemComponent(int value, String format, double? fontSize) { var weekday = DateTime(_currYear!, _currMonth!, value).weekday; return Container( @@ -287,8 +238,7 @@ class _DatePickerWidgetState extends State { // color: widget.pickerTheme!.itemTextStyle.color, // fontSize: fontSize ?? widget.pickerTheme!.itemTextStyle.fontSize // ), - style: widget.pickerTheme?.itemTextStyle ?? - DATETIME_PICKER_ITEM_TEXT_STYLE, + style: widget.pickerTheme?.itemTextStyle ?? DATETIME_PICKER_ITEM_TEXT_STYLE, ), ); } @@ -350,16 +300,14 @@ class _DatePickerWidgetState extends State { _isChangeDateRange = true; List monthRange = _calcMonthRange(); - bool monthRangeChanged = _monthRange!.first != monthRange.first || - _monthRange!.last != monthRange.last; + bool monthRangeChanged = _monthRange!.first != monthRange.first || _monthRange!.last != monthRange.last; if (monthRangeChanged) { // selected year changed _currMonth = _calcCurrentMonth(); } List dayRange = _calcDayRange(); - bool dayRangeChanged = - _dayRange!.first != dayRange.first || _dayRange!.last != dayRange.last; + bool dayRangeChanged = _dayRange!.first != dayRange.first || _dayRange!.last != dayRange.last; if (dayRangeChanged) { // day range changed, need limit the value of selected day _currDay = max(min(_currDay!, dayRange.last), dayRange.first);