From f44da5b80fd866ea0dc200e70fff406acf910462 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 10 Feb 2023 11:32:03 +0100 Subject: [PATCH] Added customization options for box encapsulating the datetimepicker (Customize shadow, add image or gradient) --- CHANGELOG.md | 3 +++ example/lib/main.dart | 4 +++- example/pubspec.lock | 2 +- lib/src/models/date_time_picker_theme.dart | 8 ++++--- lib/src/overlay_date_time_picker.dart | 22 ++++++++++++------- .../date_time_picker/date_time_picker.dart | 22 ++++++++++++------- pubspec.yaml | 2 +- 7 files changed, 41 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d7f4d2..13f4bba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## 2.3.2 + +- Added customization options for box encapsulating the datetimepicker (Customize shadow, add image or gradient) ## 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 e928b57..c708af4 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -50,6 +50,9 @@ class DatePickerDemo extends StatelessWidget { dateFormatMonth: (value) => value.toUpperCase(), prevIcon: (context) => const Icon(Icons.chevron_left_sharp), nextIcon: (context) => const Icon(Icons.chevron_right_sharp), + shapeDecoration: const ShapeDecoration( + shape: ArrowedBorder(), + ), dateBoxShape: DateBoxShape.circle, backgroundColor: Colors.white, markedIndicatorColor: Colors.red, @@ -74,7 +77,6 @@ class DatePickerDemo extends StatelessWidget { barOpacity: 1, textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)), paginationSize: 25, - shapeBorder: const ArrowedBorder(), ); return Scaffold( diff --git a/example/pubspec.lock b/example/pubspec.lock index 617cd56..fc82180 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -68,7 +68,7 @@ packages: path: ".." relative: true source: path - version: "2.3.1" + version: "2.3.2" flutter_lints: dependency: "direct dev" description: diff --git a/lib/src/models/date_time_picker_theme.dart b/lib/src/models/date_time_picker_theme.dart index ed6a003..e873682 100644 --- a/lib/src/models/date_time_picker_theme.dart +++ b/lib/src/models/date_time_picker_theme.dart @@ -22,7 +22,7 @@ class DateTimePickerTheme { this.weekViewSize = 0.2, this.monthViewSize = 0.6, this.weekMonthTriggerSize = 0.3, - this.shapeBorder, + this.shapeDecoration, this.baseTheme = const DateBoxBaseTheme( Colors.white, TextStyle(color: Colors.black), @@ -86,8 +86,10 @@ class DateTimePickerTheme { /// The size of the buttons for navigation the different pages final double paginationSize; - /// The shape of the border using a [ShapeBorder] - final ShapeBorder? shapeBorder; + /// The decoration of the box that encapsulates the date picker + /// Requires [ShapeBorder], default shadow and backgroundcolor implemented + /// Image and gradient optional + final ShapeDecoration? shapeDecoration; /// If true the first letters of the weekdays will be displayed above the days of the month final bool monthWeekDayHeaders; diff --git a/lib/src/overlay_date_time_picker.dart b/lib/src/overlay_date_time_picker.dart index 14a9e81..ec2977e 100644 --- a/lib/src/overlay_date_time_picker.dart +++ b/lib/src/overlay_date_time_picker.dart @@ -189,7 +189,7 @@ class _OverlayDateTimePickerState extends State { Widget _buildOverlay(BuildContext context) { return Container( - decoration: (widget.theme.shapeBorder == null) + decoration: (widget.theme.shapeDecoration == null) ? BoxDecoration( color: widget.theme.backgroundColor, borderRadius: const BorderRadius.all(Radius.circular(16)), @@ -201,14 +201,20 @@ class _OverlayDateTimePickerState extends State { ], ) : ShapeDecoration( - shape: widget.theme.shapeBorder!, + shape: widget.theme.shapeDecoration!.shape, color: widget.theme.backgroundColor, - shadows: [ - BoxShadow( - blurRadius: 5, - color: Colors.black.withOpacity(0.25), - ), - ], + image: (widget.theme.shapeDecoration!.image) ?? + widget.theme.shapeDecoration!.image, + gradient: (widget.theme.shapeDecoration!.gradient) ?? + widget.theme.shapeDecoration!.gradient, + shadows: (widget.theme.shapeDecoration!.shadows == null) + ? [ + BoxShadow( + blurRadius: 5, + color: Colors.black.withOpacity(0.25), + ), + ] + : widget.theme.shapeDecoration!.shadows, ), child: SizedBox( width: widget.size.width, 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 2af22be..137116b 100644 --- a/lib/src/widgets/date_time_picker/date_time_picker.dart +++ b/lib/src/widgets/date_time_picker/date_time_picker.dart @@ -107,7 +107,7 @@ class _DateTimePickerState extends State { @override Widget build(BuildContext context) { return Container( - decoration: (widget.theme.shapeBorder == null) + decoration: (widget.theme.shapeDecoration == null) ? BoxDecoration( color: widget.theme.backgroundColor, borderRadius: const BorderRadius.all(Radius.circular(16)), @@ -119,14 +119,20 @@ class _DateTimePickerState extends State { ], ) : ShapeDecoration( - shape: widget.theme.shapeBorder!, + shape: widget.theme.shapeDecoration!.shape, color: widget.theme.backgroundColor, - shadows: [ - BoxShadow( - blurRadius: 5, - color: Colors.black.withOpacity(0.25), - ), - ], + image: (widget.theme.shapeDecoration!.image) ?? + widget.theme.shapeDecoration!.image, + gradient: (widget.theme.shapeDecoration!.gradient) ?? + widget.theme.shapeDecoration!.gradient, + shadows: (widget.theme.shapeDecoration!.shadows == null) + ? [ + BoxShadow( + blurRadius: 5, + color: Colors.black.withOpacity(0.25), + ), + ] + : widget.theme.shapeDecoration!.shadows, ), child: SizedBox( width: widget.size.width, diff --git a/pubspec.yaml b/pubspec.yaml index fd596b6..3298814 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_date_time_picker description: A Flutter package for date and time picker. -version: 2.3.1 +version: 2.3.2 homepage: https://iconica.nl/ environment: