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

Add more parameters to picker theme. #65

Merged
merged 3 commits into from
Sep 22, 2024
Merged

Add more parameters to picker theme. #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bcdbe84
Add more parameters.
hwh97 Feb 1, 2024
b3c5a30
Fix style.
hwh97 Feb 1, 2024
5d284e8
Fix style.
hwh97 Feb 1, 2024
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
38 changes: 38 additions & 0 deletions lib/date_picker_theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@ const Color DATETIME_PICKER_ITEM_TEXT_COLOR = Colors.black;
const double DATETIME_PICKER_ITEM_TEXT_SIZE_SMALL = 15;
const double DATETIME_PICKER_ITEM_TEXT_SIZE_BIG = 17;

/// Default value of DatePicker's divider height.
const double DATETIME_PICKER_DIVIDER_HEIGHT = 1.0;

/// Default value of DatePicker's divider thickness.
const double DATETIME_PICKER_DIVIDER_THICKNESS = 2.0;

/// Default value of DatePicker's diameter ratio.
const double DATETIME_PICKER_DIAMETER_RATIO = 1.5;

/// Default value of DatePicker's divider thickness.
const double DATETIME_PICKER_SQUEEZE = 0.95;

/// To support both stable and beta channels until
/// 'DiagnosticableMixin' is officially deprecated.
class DateTimePickerTheme {
Expand All @@ -41,6 +53,12 @@ class DateTimePickerTheme {
/// [titleHeight] The value of DatePicker's title height.
/// [itemHeight] The value of DatePicker's column height.
/// [itemTextStyle] The value of DatePicker's column [TextStyle].
/// [dividerHeight] The value of DatePicker's Divider height.
/// [dividerThickness] The value of DatePicker's Divider thickness.
/// [dividerSpacing] The value of DatePicker's Divider spacing.
/// [dividerColor] The value of DatePicker's Divider Color [TextStyle].
/// [squeeze] The value of DatePicker's squeeze.
/// [diameterRatio] The value of DatePicker's diameter ratio.
const DateTimePickerTheme({
this.backgroundColor = DATETIME_PICKER_BACKGROUND_COLOR,
this.cancelTextStyle,
Expand All @@ -53,7 +71,12 @@ class DateTimePickerTheme {
this.titleHeight = DATETIME_PICKER_TITLE_HEIGHT,
this.itemHeight = DATETIME_PICKER_ITEM_HEIGHT,
this.itemTextStyle = DATETIME_PICKER_ITEM_TEXT_STYLE,
this.dividerHeight = DATETIME_PICKER_DIVIDER_HEIGHT,
this.dividerThickness = DATETIME_PICKER_DIVIDER_THICKNESS,
this.dividerSpacing,
this.dividerColor,
this.squeeze = DATETIME_PICKER_SQUEEZE,
this.diameterRatio = DATETIME_PICKER_DIAMETER_RATIO,
});

static const DateTimePickerTheme Default = const DateTimePickerTheme();
Expand Down Expand Up @@ -93,4 +116,19 @@ class DateTimePickerTheme {

/// The value of DatePicker's Divider Color [TextStyle].
final Color? dividerColor;

/// The value of DatePicker's Divider height.
final double? dividerHeight;

/// The value of DatePicker's Divider thickness.
final double? dividerThickness;

/// The value of DatePicker's Divider spacing.
final double? dividerSpacing;

/// The value of DatePicker's squeeze.
final double? squeeze;

/// The value of DatePicker's diameter ratio.
final double? diameterRatio;
}
68 changes: 34 additions & 34 deletions lib/widget/date_picker_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,12 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
late Map<String, List<int>?> _valueRangeMap;

bool _isChangeDateRange = false;

// whene change year the returned month is incorrect with the shown one
// 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) {
// handle current selected year、month、day
Expand Down Expand Up @@ -184,6 +186,23 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: pickers);
}

Widget _dividerWidget() {
return Padding(
padding: EdgeInsets.symmetric(
horizontal: widget.pickerTheme!.dividerSpacing ??
MediaQuery.of(context).size.width * 0.02,
),
child: Divider(
color: widget.pickerTheme!.dividerColor ??
widget.pickerTheme!.itemTextStyle.color,
height:
widget.pickerTheme!.dividerHeight ?? DATETIME_PICKER_DIVIDER_HEIGHT,
thickness: widget.pickerTheme!.dividerThickness ??
DATETIME_PICKER_DIVIDER_THICKNESS,
),
);
}

Widget _renderDatePickerColumnComponent(
{required FixedExtentScrollController? scrollCtrl,
required List<int> valueRange,
Expand All @@ -205,8 +224,9 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
selectionOverlay: Container(),
backgroundColor: widget.pickerTheme!.backgroundColor,
scrollController: scrollCtrl,
squeeze: 0.95,
diameterRatio: 1.5,
squeeze: widget.pickerTheme?.squeeze ?? DATETIME_PICKER_SQUEEZE,
diameterRatio: widget.pickerTheme?.diameterRatio ??
DATETIME_PICKER_DIAMETER_RATIO,
itemExtent: widget.pickerTheme!.itemHeight,
onSelectedItemChanged: valueChanged,
looping: widget.looping,
Expand All @@ -225,41 +245,21 @@ class _DatePickerWidgetState extends State<DatePickerWidget> {
),
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)
],
)),
margin: EdgeInsets.only(
top: (widget.pickerTheme!.pickerHeight / 2) -
(widget.pickerTheme!.itemHeight / 2),
),
child: _dividerWidget(),
),
),
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),
],
)),
margin: EdgeInsets.only(
top: (widget.pickerTheme!.pickerHeight / 2) +
(widget.pickerTheme!.itemHeight / 2),
),
child: _dividerWidget(),
),
),
],
),
Expand Down