Merge pull request #64 from muneebahmad0600/feature/eventDots

Replaced static dots with Event Dots.
muhammadtalhasultan · Jul 3, 2024 · 3b28d07 · 3b28d07
2 parents 2d5a7a1 + 7e6b3a1
commit 3b28d07
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -30,6 +30,7 @@ class HomePage extends StatefulWidget {
 
 class _HomePageState extends State<HomePage> {
   late DateTime _selectedDate;
+  late List<DateTime> _eventDates;
 
   @override
   void initState() {
@@ -39,6 +40,12 @@ class _HomePageState extends State<HomePage> {
 
   void _resetSelectedDate() {
     _selectedDate = DateTime.now().add(const Duration(days: 2));
+    _eventDates = [
+      DateTime.now().add(const Duration(days: 2)),
+      DateTime.now().add(const Duration(days: 3)),
+      DateTime.now().add(const Duration(days: 4)),
+      DateTime.now().subtract(const Duration(days: 4)),
+    ];
   }
 
   @override
@@ -64,14 +71,15 @@ class _HomePageState extends State<HomePage> {
               initialDate: _selectedDate,
               firstDate: DateTime.now(),
               lastDate: DateTime.now().add(const Duration(days: 365 * 4)),
+              eventDates: _eventDates,
               onDateSelected: (date) => setState(() => _selectedDate = date),
               leftMargin: 20,
               monthColor: Colors.white70,
               dayColor: Colors.teal[200],
               dayNameColor: const Color(0xFF333A47),
               activeDayColor: Colors.white,
               activeBackgroundDayColor: Colors.redAccent[100],
-              dotsColor: const Color(0xFF333A47),
+              dotColor: Colors.white,
               selectableDayPredicate: (date) => date.day != 23,
               locale: 'en',
             ),

diff --git a/lib/src/calendar_timeline.dart b/lib/src/calendar_timeline.dart
@@ -26,7 +26,7 @@ class CalendarTimeline extends StatefulWidget {
     this.activeDayColor,
     this.activeBackgroundDayColor,
     this.monthColor,
-    this.dotsColor,
+    this.dotColor,
     this.dayNameColor,
     this.height = 80,
     this.width = 60,
@@ -39,6 +39,7 @@ class CalendarTimeline extends StatefulWidget {
     this.shrink = false,
     this.locale,
     this.showYears = false,
+    this.eventDates,
   })  : assert(
           initialDate.difference(firstDate).inDays >= 0,
           'initialDate must be on or after firstDate',
@@ -70,7 +71,7 @@ class CalendarTimeline extends StatefulWidget {
   final Color? activeDayColor;
   final Color? activeBackgroundDayColor;
   final Color? monthColor;
-  final Color? dotsColor;
+  final Color? dotColor;
   final Color? dayNameColor;
   final double height;
   final double width;
@@ -82,6 +83,7 @@ class CalendarTimeline extends StatefulWidget {
   final double shrinkDayNameFontSize;
   final bool shrink;
   final String? locale;
+  final List<DateTime>? eventDates;
 
   /// If true, it will show a separate row for the years.
   /// It defaults to false
@@ -104,6 +106,7 @@ class _CalendarTimelineState extends State<CalendarTimeline> {
   final List<DateTime> _years = [];
   final List<DateTime> _months = [];
   final List<DateTime> _days = [];
+  List<DateTime>? _eventDates;
   late DateTime _selectedDate;
 
   late String _locale;
@@ -128,6 +131,8 @@ class _CalendarTimelineState extends State<CalendarTimeline> {
     _locale = widget.locale ?? Localizations.localeOf(context).languageCode;
     initializeDateFormatting(_locale);
     _selectedDate = widget.initialDate;
+    _eventDates = widget.eventDates;
+    _initializeEventDates();
     if (widget.showYears) {
       _generateYears();
       _selectedYearIndex();
@@ -141,6 +146,13 @@ class _CalendarTimelineState extends State<CalendarTimeline> {
     _moveToDayIndex(_daySelectedIndex ?? 0);
   }
 
+  /// This modifies the [_eventDates] to a list of DateTime without the time params
+  /// This is needed for comparison in case the user provides DateTime with time params
+  void _initializeEventDates() {
+    _eventDates =
+        _eventDates?.map((e) => DateTime(e.year, e.month, e.day)).toList();
+  }
+
   /// It will populate the [_years] list with the years between firstDate and lastDate
   void _generateYears() {
     _years.clear();
@@ -472,7 +484,8 @@ class _CalendarTimelineState extends State<CalendarTimeline> {
                 dayColor: widget.dayColor,
                 activeDayColor: widget.activeDayColor,
                 activeDayBackgroundColor: widget.activeBackgroundDayColor,
-                dotsColor: widget.dotsColor,
+                showDot: _eventDates?.contains(currentDay) ?? false,
+                dotColor: widget.dotColor,
                 dayNameColor: widget.dayNameColor,
                 height: widget.height,
                 width: widget.width,

diff --git a/lib/src/day_item.dart b/lib/src/day_item.dart
@@ -12,7 +12,8 @@ class DayItem extends StatelessWidget {
     this.activeDayColor,
     this.activeDayBackgroundColor,
     this.available = true,
-    this.dotsColor,
+    this.showDot = false,
+    this.dotColor,
     this.dayNameColor,
     required this.height,
     required this.width,
@@ -32,7 +33,8 @@ class DayItem extends StatelessWidget {
   final Color? activeDayColor;
   final Color? activeDayBackgroundColor;
   final bool available;
-  final Color? dotsColor;
+  final bool showDot;
+  final Color? dotColor;
   final Color? dayNameColor;
   final double height;
   final double width;
@@ -75,6 +77,16 @@ class DayItem extends StatelessWidget {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
+            if (showDot) ...[
+              SizedBox(height: shrink ? 6 : 7),
+              _buildDots(),
+              SizedBox(height: shrink ? 9 : 12),
+            ] else
+              SizedBox(height: shrink ? 20 : 24),
+            Text(
+              dayNumber.toString(),
+              style: isSelected ? selectedStyle : textStyle,
+            ),
             if (isSelected)
               Column(
                 children: [
@@ -115,15 +127,11 @@ class DayItem extends StatelessWidget {
       height: 5,
       width: 5,
       decoration: BoxDecoration(
-        color: dotsColor ?? activeDayColor ?? Colors.white,
+        color: dotColor ?? activeDayColor ?? Colors.white,
         shape: BoxShape.circle,
       ),
     );
-
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-      children: [dot, dot],
-    );
+    return dot;
   }
 
   @override