diff --git a/CHANGELOG.md b/CHANGELOG.md index eea5c78..689e22b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,12 @@ ## 3.0.0 - Added customization options for box encapsulating the datetimepicker (Customize shadow, add image or gradient) -- Removed ability to specify ShapeBorder directly in date_time_picker_theme. Specifying ShapeBorder now part of ShapeDecoration-customization. +- Removed ability to specify ShapeBorder directly in date_time_picker_theme. Specifying ShapeBorder now part of ShapeDecoration-customization +- Replaced 4 identical box-themes with different names with 1 general box-theme +- Renamed ambiguously named textStyle-property of DatePicker that only affected weekday-styling as weekdayTextStyle +- Added custimzation option to change border of days +- Added customization option to change padding of calendar + ## 2.3.1 - Added extra customization options for datetimepicker (Customizable buttons, text formatting for weekday and month) diff --git a/example/lib/main.dart b/example/lib/main.dart index c708af4..87251be 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -56,26 +56,30 @@ class DatePickerDemo extends StatelessWidget { dateBoxShape: DateBoxShape.circle, backgroundColor: Colors.white, markedIndicatorColor: Colors.red, - baseTheme: const DateBoxBaseTheme( - Colors.white, - TextStyle(color: Colors.black), + baseTheme: const DateBoxTheme( + backgroundColor: Colors.white, + textStyle: TextStyle(color: Colors.black), ), - selectedTheme: const DateBoxSelectedTheme( - Color(0x4BF44336), - TextStyle( + selectedTheme: const DateBoxTheme( + backgroundColor: Colors.red, + textStyle: TextStyle( color: Colors.black, ), ), - highlightTheme: const DateBoxHighlightTheme( - Colors.red, - TextStyle( + highlightTheme: DateBoxTheme( + borderStyle: Border.all( + color: Colors.black, + width: 3, + ), + backgroundColor: Colors.red, + textStyle: const TextStyle( color: Colors.white, ), ), barTheme: const DateTimePickerBarTheme( - barColor: Colors.pinkAccent, + barColor: Colors.red, barOpacity: 1, - textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)), + textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)), paginationSize: 25, ); @@ -156,19 +160,19 @@ class DatePickerDemo extends StatelessWidget { dateTimePickerTheme: const DateTimePickerTheme( backgroundColor: Colors.white, markedIndicatorColor: Colors.red, - baseTheme: DateBoxBaseTheme( - Colors.white, - TextStyle(color: Colors.black), + baseTheme: DateBoxTheme( + backgroundColor: Colors.white, + textStyle: TextStyle(color: Colors.black), ), - selectedTheme: DateBoxSelectedTheme( - Color(0x4BF44336), - TextStyle( + selectedTheme: DateBoxTheme( + backgroundColor: Color(0x4BF44336), + textStyle: TextStyle( color: Colors.red, ), ), - highlightTheme: DateBoxHighlightTheme( - Colors.red, - TextStyle( + highlightTheme: DateBoxTheme( + backgroundColor: Colors.red, + textStyle: TextStyle( color: Colors.white, ), ), diff --git a/lib/flutter_date_time_picker.dart b/lib/flutter_date_time_picker.dart index 4e45b41..576c90f 100644 --- a/lib/flutter_date_time_picker.dart +++ b/lib/flutter_date_time_picker.dart @@ -8,10 +8,7 @@ export 'src/drag_down_date_time_picker.dart' show DragDownDateTimePicker; export 'src/overlay_date_time_picker.dart' show OverlayDateTimePicker; export 'src/models/date_constraint.dart'; export 'src/enums/date_box_shape.dart'; -export 'src/models/date_box_base_theme.dart'; -export 'src/models/date_box_disabled_theme.dart'; -export 'src/models/date_box_highlight_theme.dart'; -export 'src/models/date_box_selected_theme.dart'; export 'src/models/date_time_picker_theme.dart'; export 'src/models/date_time_picker_bar_theme.dart'; export 'src/widgets/date_time_picker/date_time_picker.dart'; +export 'src/models/date_box_theme.dart'; diff --git a/lib/src/models/date_box_disabled_theme.dart b/lib/src/models/date_box_disabled_theme.dart deleted file mode 100644 index 5ad647b..0000000 --- a/lib/src/models/date_box_disabled_theme.dart +++ /dev/null @@ -1,19 +0,0 @@ -// SPDX-FileCopyrightText: 2022 Iconica -// -// SPDX-License-Identifier: BSD-3-Clause - -import 'package:flutter/widgets.dart' show Color, TextStyle; - -class DateBoxDisabledTheme { - /// Disabled date theme. - const DateBoxDisabledTheme( - this.backgroundColor, - this.textStyle, - ); - - /// Background color of selected date. - final Color? backgroundColor; - - /// The style of the date number. - final TextStyle? textStyle; -} diff --git a/lib/src/models/date_box_highlight_theme.dart b/lib/src/models/date_box_highlight_theme.dart deleted file mode 100644 index b9310c0..0000000 --- a/lib/src/models/date_box_highlight_theme.dart +++ /dev/null @@ -1,19 +0,0 @@ -// SPDX-FileCopyrightText: 2022 Iconica -// -// SPDX-License-Identifier: BSD-3-Clause - -import 'package:flutter/widgets.dart' show Color, TextStyle; - -class DateBoxHighlightTheme { - /// Highlighted date theme. - const DateBoxHighlightTheme( - this.backgroundColor, - this.textStyle, - ); - - /// Background color of highlighted date. - final Color? backgroundColor; - - /// The style of the date number. - final TextStyle? textStyle; -} diff --git a/lib/src/models/date_box_selected_theme.dart b/lib/src/models/date_box_selected_theme.dart deleted file mode 100644 index 28f49fc..0000000 --- a/lib/src/models/date_box_selected_theme.dart +++ /dev/null @@ -1,19 +0,0 @@ -// SPDX-FileCopyrightText: 2022 Iconica -// -// SPDX-License-Identifier: BSD-3-Clause - -import 'package:flutter/widgets.dart' show Color, TextStyle; - -class DateBoxSelectedTheme { - /// Selected date theme. - const DateBoxSelectedTheme( - this.backgroundColor, - this.textStyle, - ); - - /// Background color of selected date. - final Color? backgroundColor; - - /// The style of the date number. - final TextStyle? textStyle; -} diff --git a/lib/src/models/date_box_base_theme.dart b/lib/src/models/date_box_theme.dart similarity index 59% rename from lib/src/models/date_box_base_theme.dart rename to lib/src/models/date_box_theme.dart index 4fd92a5..f3d9947 100644 --- a/lib/src/models/date_box_base_theme.dart +++ b/lib/src/models/date_box_theme.dart @@ -2,18 +2,22 @@ // // SPDX-License-Identifier: BSD-3-Clause -import 'package:flutter/widgets.dart' show Color, TextStyle; +import 'package:flutter/widgets.dart' show Color, TextStyle, BoxBorder; -class DateBoxBaseTheme { +class DateBoxTheme { /// Default date theme. - const DateBoxBaseTheme( + const DateBoxTheme({ this.backgroundColor, this.textStyle, - ); + this.borderStyle, + }); /// Background color of default date final Color? backgroundColor; /// The style of the date number. final TextStyle? textStyle; + + /// The style of the border + final BoxBorder? borderStyle; } diff --git a/lib/src/models/date_time_picker_theme.dart b/lib/src/models/date_time_picker_theme.dart index e873682..88799d3 100644 --- a/lib/src/models/date_time_picker_theme.dart +++ b/lib/src/models/date_time_picker_theme.dart @@ -23,24 +23,24 @@ class DateTimePickerTheme { this.monthViewSize = 0.6, this.weekMonthTriggerSize = 0.3, this.shapeDecoration, - this.baseTheme = const DateBoxBaseTheme( - Colors.white, - TextStyle(color: Colors.black), + this.baseTheme = const DateBoxTheme( + backgroundColor: Colors.white, + textStyle: TextStyle(color: Colors.black)), + this.highlightTheme = const DateBoxTheme( + backgroundColor: Colors.blue, + textStyle: TextStyle(color: Colors.white), ), - this.highlightTheme = const DateBoxHighlightTheme( - Colors.blue, - TextStyle(color: Colors.white), + this.selectedTheme = const DateBoxTheme( + backgroundColor: Color(0xFFBBDEFB), + textStyle: TextStyle(color: Colors.blue), ), - this.selectedTheme = const DateBoxSelectedTheme( - Color(0xFFBBDEFB), - TextStyle(color: Colors.blue), - ), - this.disabledTheme = const DateBoxDisabledTheme( - Colors.grey, - TextStyle(color: Colors.white), + this.disabledTheme = const DateBoxTheme( + backgroundColor: Colors.grey, + textStyle: TextStyle(color: Colors.white), ), this.barTheme = const DateTimePickerBarTheme(), this.monthWeekDayHeaders = false, + this.calenderPadding = const EdgeInsets.all(8.0), }); /// enum to define a shape dor the date. use [DateBoxShape.circle]. @@ -48,16 +48,16 @@ class DateTimePickerTheme { final DateBoxShape dateBoxShape; /// This theme is used to style a default look for the dates. - final DateBoxBaseTheme baseTheme; + final DateBoxTheme baseTheme; /// This theme is used for when a specific date is highlighted. - final DateBoxHighlightTheme highlightTheme; + final DateBoxTheme highlightTheme; /// This theme is used for when a specific date is slected by the user. - final DateBoxSelectedTheme selectedTheme; + final DateBoxTheme selectedTheme; /// This theme is used for when a specific date is disabled. - final DateBoxDisabledTheme disabledTheme; + final DateBoxTheme disabledTheme; /// This theme is used for the bar of the date picker. final DateTimePickerBarTheme barTheme; @@ -103,4 +103,7 @@ class DateTimePickerTheme { final WidgetBuilder? nextIcon; final WidgetBuilder? prevIcon; + + /// The padding surrounding the calendar + final EdgeInsetsGeometry calenderPadding; } diff --git a/lib/src/overlay_date_time_picker.dart b/lib/src/overlay_date_time_picker.dart index ec2977e..915f5db 100644 --- a/lib/src/overlay_date_time_picker.dart +++ b/lib/src/overlay_date_time_picker.dart @@ -223,7 +223,7 @@ class _OverlayDateTimePickerState extends State { padding: const EdgeInsets.all(8.0), child: OverlayDateTimeContent( theme: widget.theme, - textStyle: widget.textStyle, + weekdayTextStyle: widget.textStyle, size: widget.size, controller: _dateTimePickerController, showWeekDays: true, diff --git a/lib/src/widgets/date_time_picker/date_time_picker.dart b/lib/src/widgets/date_time_picker/date_time_picker.dart index 137116b..675f46e 100644 --- a/lib/src/widgets/date_time_picker/date_time_picker.dart +++ b/lib/src/widgets/date_time_picker/date_time_picker.dart @@ -11,7 +11,7 @@ class DateTimePicker extends StatefulWidget { final DateTimePickerTheme theme; /// Style to base the text on - final TextStyle textStyle; + final TextStyle weekdayTextStyle; /// Callback that provides the date tapped on as a [DateTime] object. final Function(DateTime date)? onTapDay; @@ -63,7 +63,7 @@ class DateTimePicker extends StatefulWidget { {super.key, this.child, required this.theme, - this.textStyle = const TextStyle(), + this.weekdayTextStyle = const TextStyle(), this.onTapDay, this.highlightToday = true, this.alwaysUse24HourFormat = true, @@ -138,10 +138,10 @@ class _DateTimePickerState extends State { width: widget.size.width, height: widget.size.height, child: Padding( - padding: const EdgeInsets.all(8.0), + padding: widget.theme.calenderPadding, child: OverlayDateTimeContent( theme: widget.theme, - textStyle: widget.textStyle, + weekdayTextStyle: widget.weekdayTextStyle, size: widget.size, controller: _dateTimePickerController, showWeekDays: true, diff --git a/lib/src/widgets/overlay_date_time_picker/date_picker.dart b/lib/src/widgets/overlay_date_time_picker/date_picker.dart index a5bf564..114a8c1 100644 --- a/lib/src/widgets/overlay_date_time_picker/date_picker.dart +++ b/lib/src/widgets/overlay_date_time_picker/date_picker.dart @@ -14,7 +14,7 @@ class DatePicker extends StatelessWidget { super.key, required this.controller, required this.theme, - required this.textStyle, + required this.weekdayTextStyle, required this.onSelectDate, required this.date, required this.showWeekDays, @@ -23,7 +23,7 @@ class DatePicker extends StatelessWidget { final DateTimePickerController controller; final DateTimePickerTheme theme; - final TextStyle textStyle; + final TextStyle weekdayTextStyle; final void Function(DateTime date) onSelectDate; final DateTime date; final bool showWeekDays; @@ -64,11 +64,14 @@ class DatePicker extends StatelessWidget { child: Padding( padding: const EdgeInsets.all(2.0), child: Text( - // The first day in November 2022 is monday - // We use it to properly show monday as the first day and sunday as the last one - date, - style: textStyle.copyWith(fontWeight: FontWeight.bold), - ), + // The first day in November 2022 is monday + // We use it to properly show monday as the first day and sunday as the last one + date, + style: weekdayTextStyle + // .copyWith( + // fontStyle: FontStyle.italic, + // fontWeight: FontWeight.w200), + ), ), ), ); diff --git a/lib/src/widgets/overlay_date_time_picker/overlay.dart b/lib/src/widgets/overlay_date_time_picker/overlay.dart index d6a9f54..119aa58 100644 --- a/lib/src/widgets/overlay_date_time_picker/overlay.dart +++ b/lib/src/widgets/overlay_date_time_picker/overlay.dart @@ -14,7 +14,7 @@ class OverlayDateTimeContent extends StatefulWidget { const OverlayDateTimeContent({ super.key, required this.theme, - required this.textStyle, + required this.weekdayTextStyle, required this.size, required this.controller, required this.showWeekDays, @@ -26,7 +26,7 @@ class OverlayDateTimeContent extends StatefulWidget { }); final DateTimePickerTheme theme; - final TextStyle textStyle; + final TextStyle weekdayTextStyle; final Size size; final DateTimePickerController controller; final bool showWeekDays; @@ -151,7 +151,7 @@ class _OverlayDateTimeContentState extends State { controller: widget.controller, onSelectDate: _onSelectDate, theme: widget.theme, - textStyle: widget.textStyle, + weekdayTextStyle: widget.weekdayTextStyle, date: previousDate, dateTimeConstraint: widget.dateTimeConstraint, showWeekDays: widget.showWeekDays, @@ -160,7 +160,7 @@ class _OverlayDateTimeContentState extends State { controller: widget.controller, onSelectDate: _onSelectDate, theme: widget.theme, - textStyle: widget.textStyle, + weekdayTextStyle: widget.weekdayTextStyle, date: widget.controller.browsingDate, showWeekDays: widget.showWeekDays, dateTimeConstraint: widget.dateTimeConstraint, @@ -169,7 +169,7 @@ class _OverlayDateTimeContentState extends State { controller: widget.controller, onSelectDate: _onSelectDate, theme: widget.theme, - textStyle: widget.textStyle, + weekdayTextStyle: widget.weekdayTextStyle, date: nextDate, dateTimeConstraint: widget.dateTimeConstraint, showWeekDays: widget.showWeekDays, diff --git a/lib/src/widgets/overlay_date_time_picker/pickable_date.dart b/lib/src/widgets/overlay_date_time_picker/pickable_date.dart index 217e453..a503a67 100644 --- a/lib/src/widgets/overlay_date_time_picker/pickable_date.dart +++ b/lib/src/widgets/overlay_date_time_picker/pickable_date.dart @@ -40,11 +40,15 @@ class PickableDate extends StatelessWidget { children: [ Container( decoration: BoxDecoration( + border: getBorder( + isToday, + isSelected, + ), color: getColor( isToday, isSelected, ), - borderRadius: getBorder(theme.dateBoxShape), + borderRadius: getBorderRadius(theme.dateBoxShape), ), child: Center( child: Opacity( @@ -71,7 +75,7 @@ class PickableDate extends StatelessWidget { ); } - BorderRadiusGeometry? getBorder(DateBoxShape shape) { + BorderRadiusGeometry? getBorderRadius(DateBoxShape shape) { switch (shape) { case DateBoxShape.circle: return BorderRadius.all(Radius.circular(theme.monthDateBoxSize)); @@ -83,8 +87,8 @@ class PickableDate extends StatelessWidget { } Color? getColor(bool isToday, bool isSelected) { - if (isToday) return theme.highlightTheme.backgroundColor; if (isSelected) return theme.selectedTheme.backgroundColor; + if (isToday) return theme.highlightTheme.backgroundColor; return null; } @@ -93,4 +97,18 @@ class PickableDate extends StatelessWidget { if (isSelected) return theme.selectedTheme.textStyle; return theme.baseTheme.textStyle; } + + BoxBorder getBorder(bool isToday, bool isSelected) { + if (isToday) { + if (theme.highlightTheme.borderStyle != null) { + return theme.highlightTheme.borderStyle!; + } + } + if (isSelected) { + if (theme.selectedTheme.borderStyle != null) { + return theme.selectedTheme.borderStyle!; + } + } + return Border.all(color: const Color.fromARGB(0, 255, 255, 255)); + } }