added marking to datetimepicker

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 2.2.1
+- Added marking to datetimepicker
+
 ## 2.2.0
 
 - Added the abilty to add the weekday letters above the months

example/lib/main.dart

@@ -84,12 +84,14 @@ class DatePickerDemo extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 OverlayDateTimePicker(
+                  markedDates: [DateTime.now().add(const Duration(days: 1))],
                   theme: dateTimePickerTheme,
                   alignment: Alignment.bottomCenter,
                   child: const Text("Select Day"),
                   onTapDay: (date) {},
                 ),
                 OverlayDateTimePicker(
+                  markedDates: [DateTime.now().add(const Duration(days: 3))],
                   theme: dateTimePickerTheme,
                   alignment: Alignment.center,
                   buttonBuilder: (key, onPressed) => TextButton(
@@ -160,7 +162,7 @@ class DatePickerDemo extends StatelessWidget {
                 barOpacity: 1,
               ),
             ),
-            markedDates: [DateTime(2022, 9, 6)],
+            markedDates: [DateTime.now().subtract(const Duration(days: 1))],
           ),
         ],
       ),

example/pubspec.lock

@@ -61,7 +61,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.1.0"
+    version: "2.2.0"
   flutter_lints:
     dependency: "direct dev"
     description:

lib/src/widgets/marked_icon.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class MarkedIcon extends StatelessWidget {
+  const MarkedIcon({
+    super.key,
+    this.color,
+    required this.width,
+    required this.height,
+  });
+
+  final double width;
+  final double height;
+  final Color? color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.topRight,
+      child: IgnorePointer(
+        child: Container(
+          width: width,
+          height: height,
+          decoration: BoxDecoration(
+            color: color ?? Theme.of(context).indicatorColor,
+            borderRadius: BorderRadius.circular((width) * 2),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/widgets/month_date_time_picker/month_date_time_picker.dart

@@ -9,6 +9,7 @@ import 'package:flutter_date_time_picker/src/extensions/time_of_day.dart';
 import 'package:flutter_date_time_picker/src/models/date_box_current_theme.dart';
 import 'package:flutter_date_time_picker/src/models/date_time_picker_theme.dart';
 import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
+import 'package:flutter_date_time_picker/src/widgets/marked_icon.dart';
 import 'package:intl/intl.dart';
 
 class MonthDateTimePicker extends StatelessWidget {
@@ -150,21 +151,11 @@ class MonthDateTimePicker extends StatelessWidget {
                               addedIndex,
                               daysToSkip,
                             )) ...[
-                              Align(
+                              MarkedIcon(
-                                alignment: Alignment.bottomRight,
+                                width: monthDateBoxSize / 4,
-                                child: IgnorePointer(
+                                height: monthDateBoxSize / 4,
-                                  child: Container(
+                                color: dateTimePickerController
-                                    width: monthDateBoxSize / 4,
+                                    .theme.markedIndicatorColor,
-                                    height: monthDateBoxSize / 4,
-                                    decoration: BoxDecoration(
-                                      color: dateTimePickerController
-                                              .theme.markedIndicatorColor ??
-                                          Theme.of(context).indicatorColor,
-                                      borderRadius: BorderRadius.circular(
-                                          (monthDateBoxSize / 4) * 2),
-                                    ),
-                                  ),
-                                ),
                               ),
                             ],
                           ],

lib/src/widgets/overlay_date_time_picker/date_picker.dart

@@ -86,6 +86,10 @@ class DatePicker extends StatelessWidget {
                 return Padding(
                   padding: const EdgeInsets.all(2.0),
                   child: PickableDate(
+                    isMarked: controller.markedDates?.any(
+                          (e) => isSameDay(e, todayDate),
+                        ) ??
+                        false,
                     isOffMonth: date.month != todayDate.month,
                     isDisabled:
                         isDisabled(addedIndex + index, daysToSkip, todayDate),
@@ -106,11 +110,12 @@ class DatePicker extends StatelessWidget {
 
   bool isToday(DateTime date) {
     DateTime now = DateTime.now();
-    return date.year == now.year &&
+    return isSameDay(date, now);
-        date.month == now.month &&
-        date.day == now.day;
   }
 
+  bool isSameDay(DateTime a, DateTime b) =>
+      a.year == b.year && a.month == b.month && a.day == b.day;
+
   bool isDisabled(int index, int daysToSkip, DateTime date) {
     return DateTime(
           date.year,

lib/src/widgets/overlay_date_time_picker/pickable_date.dart

@@ -4,10 +4,12 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_date_time_picker/flutter_date_time_picker.dart';
+import 'package:flutter_date_time_picker/src/widgets/marked_icon.dart';
 
 class PickableDate extends StatelessWidget {
   const PickableDate({
     super.key,
+    required this.isMarked,
     required this.isSelected,
     required this.isDisabled,
     required this.theme,
@@ -17,6 +19,7 @@ class PickableDate extends StatelessWidget {
     required this.isToday,
   });
 
+  final bool isMarked;
   final bool isSelected;
   final bool isDisabled;
   final bool isToday;
@@ -33,26 +36,37 @@ class PickableDate extends StatelessWidget {
         if (isDisabled) return;
         onPressed.call(date);
       },
-      child: Container(
+      child: Stack(
-        decoration: BoxDecoration(
+        children: [
-          color: getColor(
+          Container(
-            isToday,
+            decoration: BoxDecoration(
-            isSelected,
+              color: getColor(
-          ),
-          borderRadius: getBorder(theme.dateBoxShape),
-        ),
-        child: Center(
-          child: Opacity(
-            opacity: (isDisabled || isOffMonth) ? 0.5 : 1,
-            child: Text(
-              date.day.toString(),
-              style: getStyle(
                 isToday,
                 isSelected,
               ),
+              borderRadius: getBorder(theme.dateBoxShape),
+            ),
+            child: Center(
+              child: Opacity(
+                opacity: (isDisabled || isOffMonth) ? 0.5 : 1,
+                child: Text(
+                  date.day.toString(),
+                  style: getStyle(
+                    isToday,
+                    isSelected,
+                  ),
+                ),
+              ),
             ),
           ),
-        ),
+          if (isMarked) ...[
+            MarkedIcon(
+              color: theme.markedIndicatorColor,
+              width: theme.monthDateBoxSize / 4,
+              height: theme.monthDateBoxSize / 4,
+            ),
+          ],
+        ],
       ),
     );
   }

lib/src/widgets/week_date_time_picker/week_date_time_picker.dart

@@ -8,6 +8,7 @@ import 'package:flutter_date_time_picker/src/extensions/date_time.dart';
 import 'package:flutter_date_time_picker/src/extensions/time_of_day.dart';
 import 'package:flutter_date_time_picker/src/models/date_box_current_theme.dart';
 import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart';
+import 'package:flutter_date_time_picker/src/widgets/marked_icon.dart';
 import 'package:intl/intl.dart';
 
 class WeekDateTimePicker extends StatelessWidget {
@@ -107,20 +108,12 @@ class WeekDateTimePicker extends StatelessWidget {
                           ),
                         ),
                         if (shouldMark(index)) ...[
-                          Align(
+                          MarkedIcon(
-                            alignment: Alignment.bottomRight,
+                            width: weekDateBoxSize / 3,
-                            child: Container(
+                            height: weekDateBoxSize / 3,
-                              width: weekDateBoxSize / 3,
+                            color: dateTimePickerController
-                              height: weekDateBoxSize / 3,
+                                .theme.markedIndicatorColor,
-                              decoration: BoxDecoration(
+                          )
-                                color: dateTimePickerController
-                                        .theme.markedIndicatorColor ??
-                                    Theme.of(context).indicatorColor,
-                                borderRadius:
-                                    BorderRadius.circular(weekDateBoxSize * 2),
-                              ),
-                            ),
-                          ),
                         ],
                       ],
                     ),

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_date_time_picker
 description: A Flutter package for date and time picker.
-version: 2.2.0
+version: 2.2.1
 homepage: https://iconica.nl/
 
 environment: