feat:✨ Add theme support for multi day view

Author: ujas-m-simformsolutions

example/lib/main.dart

@@ -34,6 +34,8 @@ class _MyAppState extends State<MyApp> {
                 as DayViewTheme,
         weekViewTheme:
             isDarkMode ? WeekViewTheme.dark() : WeekViewTheme.light(),
+        multiDayViewTheme:
+            isDarkMode ? MultiDayViewTheme.dark() : MultiDayViewTheme.light(),
       ),
       child: CalendarControllerProvider(
         controller: EventController()..addAll(_events),

example/lib/theme/app_theme.dart

@@ -50,12 +50,14 @@ class AppTheme {
   // Light colors
   static final _dayViewTheme = DayViewTheme.light();
   static final _weekViewTheme = WeekViewTheme.light();
+  static final _multiDayViewTheme = MultiDayViewTheme.light();
 
   // Dark colors
   static final _appDarkTheme = AppThemeExtension.dark();
   static final _monthViewDarkTheme = MonthViewTheme.dark();
   static final _dayViewDarkTheme = DayViewTheme.dark();
   static final _weekViewDarkTheme = WeekViewTheme.dark();
+  static final _multiDayViewDarkTheme = MultiDayViewTheme.dark();
 
   // Light theme
   static final light = ThemeData.light().copyWith(
@@ -81,6 +83,7 @@ class AppTheme {
     extensions: [
       _dayViewTheme,
       _weekViewTheme,
+      _multiDayViewTheme,
     ],
   );
 
@@ -130,6 +133,7 @@ class AppTheme {
       _monthViewDarkTheme,
       _dayViewDarkTheme,
       _weekViewDarkTheme,
+      _multiDayViewDarkTheme,
     ],
   );
 }

example/lib/widgets/add_event_form.dart

@@ -103,7 +103,7 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
               Text(
                 'Recurring Event',
                 style: TextStyle(
-                  color: AppColors.black,
+                  color: color.surface,
                   fontSize: 16,
                 ),
               ),
@@ -128,7 +128,7 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
                     }
                   });
                 },
-                activeColor: Colors.blue,
+                activeColor: color.surface,
               ),
             ],
           ),
@@ -205,10 +205,10 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
                       updateWeekdaysSelection();
                     }
 
-                          if (mounted) {
-                            setState(() {});
-                          }
-                        },
+                    if (mounted) {
+                      setState(() {});
+                    }
+                  },
                   validator: (value) {
                     if (value == null || value == "") {
                       return "Please select end date.";

lib/calendar_view.dart

@@ -21,6 +21,7 @@ export './src/theme/calendar_theme.dart';
 export './src/theme/day_view_theme.dart';
 export './src/theme/month_view_theme.dart';
 export './src/theme/week_view_theme.dart';
+export './src/theme/multi_day_view_theme.dart';
 export './src/typedefs.dart';
 export './src/week_view/week_view.dart';
 export './src/multi_day_view/multi_day_view.dart';

lib/src/components/headers/month_page_header.dart

@@ -22,8 +22,7 @@ class MonthPageHeader extends CalendarPageHeader {
     Color backgroundColor = Constants.headerBackground,
     StringProvider? dateStringBuilder,
     required DateTime date,
-    HeaderStyle headerStyle =
-        const HeaderStyle(),
+    HeaderStyle headerStyle = const HeaderStyle(),
   }) : super(
           key: key,
           date: date,

lib/src/day_view/day_view.dart

@@ -662,7 +662,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
   /// Default timeline builder this builder will be used if
   /// [widget.eventTileBuilder] is null
   ///
-  Widget _defaultTimeLineBuilder(date) => DefaultTimeLineMark(
+  Widget _defaultTimeLineBuilder(DateTime date) => DefaultTimeLineMark(
         date: date,
         timeStringBuilder: widget.timeStringBuilder,
         markingStyle: TextStyle(

lib/src/extensions.dart

@@ -327,4 +327,23 @@ extension BuildContextExtension on BuildContext {
 
   WeekViewTheme get weekViewColors =>
       Theme.of(this).extension<WeekViewTheme>() ?? WeekViewTheme.light();
+
+  MultiDayViewTheme get multiDayViewColors =>
+      Theme.of(this).extension<MultiDayViewTheme>() ??
+      MultiDayViewTheme.light();
+}
+
+extension BuildContextMultiDayViewThemeExtension on BuildContext {
+  /// Get MultiDayViewTheme from Theme
+  MultiDayViewTheme get multiDayViewTheme {
+    final theme = Theme.of(this).extension<MultiDayViewTheme>();
+    if (theme != null) {
+      return theme;
+    }
+
+    // If no theme extension is available, return based on brightness
+    return Theme.of(this).brightness == Brightness.dark
+        ? MultiDayViewTheme.dark()
+        : MultiDayViewTheme.light();
+  }
 }

lib/src/modals.dart

@@ -53,7 +53,7 @@ class LiveTimeIndicatorSettings {
   /// Flag to show time on live time line.
   final bool showTime;
 
-  /// Flag to show time backgroud view.
+  /// Flag to show time background view.
   final bool showTimeBackgroundView;
 
   /// Radius of bullet.

lib/src/multi_day_view/_internal_multi_day_view_page.dart

@@ -10,6 +10,7 @@ import '../components/week_view_components.dart';
 import '../enumerations.dart';
 import '../event_arrangers/event_arrangers.dart';
 import '../event_controller.dart';
+import '../extensions.dart';
 import '../modals.dart';
 import '../painters.dart';
 import '../typedefs.dart';
@@ -140,7 +141,7 @@ class InternalMultiDayViewPage<T extends Object?> extends StatefulWidget {
   final bool showQuarterHours;
 
   /// Display workday bottom line
-  final bool showWeekDayBottomLine;
+  final bool showMutliDayBottomLine;
 
   /// Emulate vertical line offset from hour line starts.
   final double emulateVerticalOffsetBy;
@@ -219,7 +220,7 @@ class InternalMultiDayViewPage<T extends Object?> extends StatefulWidget {
       required this.multiDayViewScrollController,
       this.lastScrollOffset = 0.0,
       this.keepScrollOffset = false,
-      this.showWeekDayBottomLine = true})
+      this.showMutliDayBottomLine = true})
       : super(key: key);
 
   @override
@@ -255,6 +256,8 @@ class _InternalMultiDayViewPageState<T extends Object?>
   @override
   Widget build(BuildContext context) {
     final filteredDates = _filteredDate();
+    final themeColor = context.multiDayViewTheme;
+
     return Container(
       height: widget.height + widget.weekTitleHeight,
       width: widget.width,
@@ -264,18 +267,8 @@ class _InternalMultiDayViewPageState<T extends Object?>
             : VerticalDirection.down,
         crossAxisAlignment: CrossAxisAlignment.end,
         children: [
-          Container(
-            decoration: BoxDecoration(
-              color: Colors.white,
-              boxShadow: [
-                BoxShadow(
-                  color: Color(0x0C000000),
-                  offset: Offset(0, 2),
-                  blurRadius: 12,
-                  spreadRadius: 0,
-                ),
-              ],
-            ),
+          ColoredBox(
+            color: themeColor.headerBackgroundColor,
             child: SizedBox(
               width: widget.width,
               child: Row(
@@ -301,18 +294,19 @@ class _InternalMultiDayViewPageState<T extends Object?>
               ),
             ),
           ),
-          if (widget.showWeekDayBottomLine)
+          if (widget.showMutliDayBottomLine)
             Divider(
               thickness: 1,
               height: 1,
+              color: themeColor.borderColor,
             ),
           SizedBox(
             width: widget.width,
             child: Container(
               decoration: BoxDecoration(
                 border: Border(
                   bottom: BorderSide(
-                    color: widget.hourIndicatorSettings.color,
+                    color: themeColor.borderColor,
                     width: 2,
                   ),
                 ),
@@ -374,7 +368,7 @@ class _InternalMultiDayViewPageState<T extends Object?>
                     CustomPaint(
                       size: Size(widget.width, widget.height),
                       painter: widget.hourLinePainter(
-                        widget.hourIndicatorSettings.color,
+                        themeColor.hourLineColor,
                         widget.hourIndicatorSettings.height,
                         widget.timeLineWidth +
                             widget.hourIndicatorSettings.offset,
@@ -393,7 +387,7 @@ class _InternalMultiDayViewPageState<T extends Object?>
                       CustomPaint(
                         size: Size(widget.width, widget.height),
                         painter: HalfHourLinePainter(
-                          lineColor: widget.halfHourIndicatorSettings.color,
+                          lineColor: themeColor.halfHourLineColor,
                           lineHeight: widget.halfHourIndicatorSettings.height,
                           offset: widget.timeLineWidth +
                               widget.halfHourIndicatorSettings.offset,
@@ -410,7 +404,7 @@ class _InternalMultiDayViewPageState<T extends Object?>
                       CustomPaint(
                         size: Size(widget.width, widget.height),
                         painter: QuarterHourLinePainter(
-                          lineColor: widget.quarterHourIndicatorSettings.color,
+                          lineColor: themeColor.quarterHourLineColor,
                           lineHeight:
                               widget.quarterHourIndicatorSettings.height,
                           offset: widget.timeLineWidth +
@@ -438,8 +432,8 @@ class _InternalMultiDayViewPageState<T extends Object?>
                                     ? BoxDecoration(
                                         border: Border(
                                           right: BorderSide(
-                                            color: widget
-                                                .hourIndicatorSettings.color,
+                                            color:
+                                                themeColor.verticalLinesColor,
                                             width: widget
                                                 .hourIndicatorSettings.height,
                                           ),
@@ -524,8 +518,13 @@ class _InternalMultiDayViewPageState<T extends Object?>
                         widget.liveTimeIndicatorSettings.height > 0 &&
                         !widget.liveTimeIndicatorSettings.onlyShowToday)
                       LiveTimeIndicator(
-                        liveTimeIndicatorSettings:
-                            widget.liveTimeIndicatorSettings,
+                        liveTimeIndicatorSettings: LiveTimeIndicatorSettings(
+                          color: themeColor.liveIndicatorColor,
+                          height: widget.liveTimeIndicatorSettings.height,
+                          offset: widget.liveTimeIndicatorSettings.offset,
+                          onlyShowToday:
+                              widget.liveTimeIndicatorSettings.onlyShowToday,
+                        ),
                         width: widget.width,
                         height: widget.height,
                         heightPerMinute: widget.heightPerMinute,