Merge pull request #24 from Iconica-Development/feature/datepicker_shapedecoration_customizations

Add customization options for box encapsulating the datetimepicker

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)

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(

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:

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;

lib/src/overlay_date_time_picker.dart

@@ -189,7 +189,7 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
 
   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<OverlayDateTimePicker> {
               ],
             )
           : 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,

lib/src/widgets/date_time_picker/date_time_picker.dart

@@ -107,7 +107,7 @@ class _DateTimePickerState extends State<DateTimePicker> {
   @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<DateTimePicker> {
               ],
             )
           : 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,

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: