Merge pull request #39 from Iconica-Development/feat/marked-theme

feat: add marked theme for marked dates to be like selected dates

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.3.3
+
+- Added option for date box theme for marked dates and a boolean to use it
+
 ## 3.3.2
 
 - Fixed size of Date_Time_Picker

example/pubspec.lock

@@ -68,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "3.3.0"
+    version: "3.3.2"
   flutter_lints:
     dependency: "direct dev"
     description:

lib/src/models/date_time_picker_theme.dart

@@ -16,7 +16,12 @@ class DateTimePickerTheme {
     this.paginationSize = 25,
     this.weekDateBoxSize = 35,
     this.monthDateBoxSize = 45,
-    this.markedIndicatorColor,
+    this.markedIndicatorColor = Colors.blue,
+    this.markedTheme = const DateBoxTheme(
+      backgroundColor: Colors.blue,
+      textStyle: TextStyle(color: Colors.white),
+    ),
+    this.useMarkedTheme = false,
     this.dateBoxShape = DateBoxShape.roundedRectangle,
     this.backgroundColor = Colors.white,
     this.weekViewSize = 0.2,
@@ -75,6 +80,12 @@ class DateTimePickerTheme {
   /// The color used for a indicator for a marked date.
   final Color? markedIndicatorColor;
 
+  /// This theme is used for marked dates
+  final DateBoxTheme markedTheme;
+
+  /// This boolean is to determine if the markedTheme should be used for the marked dates
+  final bool useMarkedTheme;
+
   /// The color used for a background of the date picker.
   final Color backgroundColor;
 

lib/src/widgets/overlay_date_time_picker/pickable_date.dart

@@ -64,11 +64,36 @@ class PickableDate extends StatelessWidget {
             ),
           ),
           if (isMarked) ...[
-            MarkedIcon(
+            if (theme.useMarkedTheme) ...[
-              color: theme.markedIndicatorColor,
+              Container(
-              width: theme.monthDateBoxSize / 4,
+                decoration: BoxDecoration(
-              height: theme.monthDateBoxSize / 4,
+                  border: getMarkedBorder(
-            ),
+                    isMarked,
+                  ),
+                  color: getMarkedColor(
+                    isMarked,
+                  ),
+                  borderRadius: getBorderRadius(theme.dateBoxShape),
+                ),
+                child: Center(
+                  child: Opacity(
+                    opacity: (isDisabled || isOffMonth) ? 0.5 : 1,
+                    child: Text(
+                      date.day.toString(),
+                      style: getMarkedStyle(
+                        isMarked,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ] else ...[
+              MarkedIcon(
+                color: theme.markedIndicatorColor,
+                width: theme.monthDateBoxSize / 4,
+                height: theme.monthDateBoxSize / 4,
+              ),
+            ]
           ],
         ],
       ),
@@ -111,4 +136,23 @@ class PickableDate extends StatelessWidget {
     }
     return Border.all(color: const Color.fromARGB(0, 255, 255, 255));
   }
+
+  Color? getMarkedColor(bool isMarked) {
+    if (isMarked) return theme.markedTheme.backgroundColor;
+    return null;
+  }
+
+  TextStyle? getMarkedStyle(bool isMarked) {
+    if (isMarked) return theme.markedTheme.textStyle;
+    return theme.baseTheme.textStyle;
+  }
+
+  BoxBorder getMarkedBorder(bool isMarked) {
+    if (isMarked) {
+      if (theme.markedTheme.borderStyle != null) {
+        return theme.markedTheme.borderStyle!;
+      }
+    }
+    return Border.all(color: const Color.fromARGB(0, 255, 255, 255));
+  }
 }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_date_time_picker
 description: A Flutter package for date and time picker.
-version: 3.3.2
+version: 3.3.3
 
 environment:
   sdk: ">=3.0.0 <4.0.0"