Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Removing overlay and relying on CupertinoPicker's selectionOverlay #68

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Removing overlay and relying on CupertinoPicker's selectionOverlay #68

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 52 additions & 104 deletions lib/widget/date_picker_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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<StatefulWidget> createState() =>
_DatePickerWidgetState(this.firstDate, this.lastDate, this.initialDate);
State<StatefulWidget> createState() => _DatePickerWidgetState(this.firstDate, this.lastDate, this.initialDate);
}

class _DatePickerWidgetState extends State<DatePickerWidget> {
late DateTime _minDateTime, _maxDateTime;
int? _currYear, _currMonth, _currDay;
List<int>? _yearRange, _monthRange, _dayRange;
FixedExtentScrollController? _yearScrollCtrl,
_monthScrollCtrl,
_dayScrollCtrl;
FixedExtentScrollController? _yearScrollCtrl, _monthScrollCtrl, _dayScrollCtrl;

late Map<String, FixedExtentScrollController?> _scrollCtrlMap;
late Map<String, List<int>?> _valueRangeMap;
Expand All @@ -61,8 +62,8 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
// 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;
Expand All @@ -86,18 +87,11 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
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};
}

Expand All @@ -106,8 +100,7 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
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)),
),
);
}
Expand Down Expand Up @@ -152,8 +145,7 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
/// render the picker widget of year、month and day
Widget _renderDatePickerWidget() {
List<Widget> pickers = [];
List<String> formatArr =
DateTimeFormatter.splitDateFormat(widget.dateFormat);
List<String> formatArr = DateTimeFormatter.splitDateFormat(widget.dateFormat);
formatArr.forEach((format) {
List<int> valueRange = _findPickerItemRange(format)!;

Expand All @@ -176,12 +168,10 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
_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(
Expand All @@ -192,89 +182,50 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
double? fontSize}) {
return Expanded(
flex: 1,
child: Stack(
fit: StackFit.loose,
children: <Widget>[
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<Widget>.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: <Widget>[
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: <Widget>[
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<Widget>.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(
Expand All @@ -287,8 +238,7 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
// 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,
),
);
}
Expand Down Expand Up @@ -350,16 +300,14 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
_isChangeDateRange = true;

List<int> 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<int> 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);
Expand Down