feat: Added the quarterHourIndicator for the DayView & halfHourIndica…

CHANGELOG.md

@@ -4,7 +4,11 @@
   view-[#269](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/269)
 - Added
   feature added a callback for the default header title
-  - [#241](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/241)
+    - [#241](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/241)
+- Added
+  feature added the quarterHourIndicator for the DayView & halfHourIndicator and
+  quarterHourIndicator for WeekView
+    - [#270](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/270)
 
 # [1.0.4 - 9 Aug 2023](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/tree/1.0.4)
 

lib/src/components/_internal_components.dart

@@ -115,6 +115,9 @@ class TimeLine extends StatelessWidget {
   /// Flag to display half hours.
   final bool showHalfHours;
 
+  /// Flag to display quarter hours.
+  final bool showQuarterHours;
+
   static DateTime get _date => DateTime.now();
 
   double get _halfHourHeight => hourHeight / 2;
@@ -128,6 +131,7 @@ class TimeLine extends StatelessWidget {
     required this.timeLineOffset,
     required this.timeLineBuilder,
     this.showHalfHours = false,
+    this.showQuarterHours = false,
   }) : super(key: key);
 
   @override
@@ -157,6 +161,28 @@ class TimeLine extends StatelessWidget {
                 hour: i,
                 minutes: 30,
               ),
+          if (showQuarterHours)
+            for (int i = 0; i < Constants.hoursADay; i++) ...[
+              /// this is for 15 minutes
+              _timelinePositioned(
+                topPosition:
+                    hourHeight * i - timeLineOffset + hourHeight * 0.25,
+                bottomPosition:
+                    height - (hourHeight * (i + 1)) + timeLineOffset,
+                hour: i,
+                minutes: 15,
+              ),
+
+              /// this is for 45 minutes
+              _timelinePositioned(
+                topPosition:
+                    hourHeight * i - timeLineOffset + hourHeight * 0.75,
+                bottomPosition:
+                    height - (hourHeight * (i + 1)) + timeLineOffset,
+                hour: i,
+                minutes: 45,
+              ),
+            ],
         ],
       ),
     );

lib/src/day_view/_internal_day_view_page.dart

@@ -98,11 +98,20 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
   /// Flag to display half hours.
   final bool showHalfHours;
 
+  /// Flag to display quarter hours.
+  final bool showQuarterHours;
+
   /// Settings for half hour indicator lines.
   final HourIndicatorSettings halfHourIndicatorSettings;
 
+  /// Settings for half hour indicator lines.
+  final HourIndicatorSettings quarterHourIndicatorSettings;
+
   final ScrollController scrollController;
 
+  /// Emulate vertical line offset from hour line starts.
+  final double emulateVerticalOffsetBy;
+
   /// Defines a single day page.
   const InternalDayViewPage({
     Key? key,
@@ -132,7 +141,10 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
     required this.scrollController,
     required this.dayDetectorBuilder,
     required this.showHalfHours,
+    required this.showQuarterHours,
     required this.halfHourIndicatorSettings,
+    required this.quarterHourIndicatorSettings,
+    required this.emulateVerticalOffsetBy,
   }) : super(key: key);
 
   @override
@@ -166,6 +178,7 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
                         hourIndicatorSettings.lineStyle,
                         hourIndicatorSettings.dashWidth,
                         hourIndicatorSettings.dashSpaceWidth,
+                        emulateVerticalOffsetBy,
                       ),
                     ),
                     if (showHalfHours)
@@ -183,6 +196,21 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
                               halfHourIndicatorSettings.dashSpaceWidth,
                         ),
                       ),
+                    if (showQuarterHours)
+                      CustomPaint(
+                        size: Size(width, height),
+                        painter: QuarterHourLinePainter(
+                          lineColor: quarterHourIndicatorSettings.color,
+                          lineHeight: quarterHourIndicatorSettings.height,
+                          offset: timeLineWidth +
+                              quarterHourIndicatorSettings.offset,
+                          minuteHeight: heightPerMinute,
+                          lineStyle: quarterHourIndicatorSettings.lineStyle,
+                          dashWidth: quarterHourIndicatorSettings.dashWidth,
+                          dashSpaceWidth:
+                              quarterHourIndicatorSettings.dashSpaceWidth,
+                        ),
+                      ),
                     dayDetectorBuilder(
                       width: width,
                       height: height,
@@ -214,6 +242,7 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
                       timeLineOffset: timeLineOffset,
                       timeLineWidth: timeLineWidth,
                       showHalfHours: showHalfHours,
+                      showQuarterHours: showQuarterHours,
                       key: ValueKey(heightPerMinute),
                     ),
                     if (showLiveLine && liveTimeIndicatorSettings.height > 0)

lib/src/day_view/day_view.dart

@@ -95,6 +95,11 @@ class DayView<T extends Object?> extends StatefulWidget {
   /// Pass [HourIndicatorSettings.none] to remove half hour lines.
   final HourIndicatorSettings? halfHourIndicatorSettings;
 
+  /// Defines settings for quarter hour indication lines.
+  ///
+  /// Pass [HourIndicatorSettings.none] to remove quarter hour lines.
+  final HourIndicatorSettings? quarterHourIndicatorSettings;
+
   /// Page transition duration used when user try to change page using
   /// [DayViewState.nextPage] or [DayViewState.previousPage]
   final Duration pageTransitionDuration;
@@ -192,15 +197,22 @@ class DayView<T extends Object?> extends StatefulWidget {
   /// Display full day event builder.
   final FullDayEventBuilder<T>? fullDayEventBuilder;
 
+  /// Show half hour indicator
   final bool showHalfHours;
 
+  /// Show quarter hour indicator(15min & 45min).
+  final bool showQuarterHours;
+
   /// It define the starting duration from where day view page will be visible
   /// By default it will be Duration(hours:0)
   final Duration startDuration;
 
   /// Callback for the Header title
   final HeaderTitleCallback? onHeaderTitleTap;
 
+  /// Emulate vertical line offset from hour line starts.
+  final double emulateVerticalOffsetBy;
+
   /// Main widget for day view.
   const DayView({
     Key? key,
@@ -240,9 +252,12 @@ class DayView<T extends Object?> extends StatefulWidget {
     this.pageViewPhysics,
     this.dayDetectorBuilder,
     this.showHalfHours = false,
+    this.showQuarterHours = false,
     this.halfHourIndicatorSettings,
+    this.quarterHourIndicatorSettings,
     this.startDuration = const Duration(hours: 0),
     this.onHeaderTitleTap,
+    this.emulateVerticalOffsetBy = 0,
   })  : assert(!(onHeaderTitleTap != null && dayTitleBuilder != null),
             "can't use [onHeaderTitleTap] & [dayTitleBuilder] simultaneously"),
         assert(timeLineOffset >= 0,
@@ -279,6 +294,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
 
   late HourIndicatorSettings _hourIndicatorSettings;
   late HourIndicatorSettings _halfHourIndicatorSettings;
+  late HourIndicatorSettings _quarterHourIndicatorSettings;
   late CustomHourLinePainter _hourLinePainter;
 
   late HourIndicatorSettings _liveTimeIndicatorSettings;
@@ -443,8 +459,13 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
                             fullDayEventBuilder: _fullDayEventBuilder,
                             scrollController: _scrollController,
                             showHalfHours: widget.showHalfHours,
+                            showQuarterHours: widget.showQuarterHours,
                             halfHourIndicatorSettings:
                                 _halfHourIndicatorSettings,
+                            quarterHourIndicatorSettings:
+                                _quarterHourIndicatorSettings,
+                            emulateVerticalOffsetBy:
+                                widget.emulateVerticalOffsetBy,
                           ),
                         );
                       },
@@ -512,6 +533,16 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
 
     assert(_halfHourIndicatorSettings.height < _hourHeight,
         "halfHourIndicator height must be less than minuteHeight * 60");
+
+    _quarterHourIndicatorSettings = widget.quarterHourIndicatorSettings ??
+        HourIndicatorSettings(
+          height: widget.heightPerMinute,
+          color: Constants.defaultBorderColor,
+          offset: 5,
+        );
+
+    assert(_quarterHourIndicatorSettings.height < _hourHeight,
+        "quarterHourIndicator height must be less than minuteHeight * 60");
   }
 
   void _calculateHeights() {
@@ -688,6 +719,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
     LineStyle lineStyle,
     double dashWidth,
     double dashSpaceWidth,
+    double emulateVerticalOffsetBy,
   ) {
     return HourLinePainter(
       lineColor: lineColor,
@@ -699,6 +731,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
       lineStyle: lineStyle,
       dashWidth: dashWidth,
       dashSpaceWidth: dashSpaceWidth,
+      emulateVerticalOffsetBy: emulateVerticalOffsetBy,
     );
   }
 

lib/src/painters.dart

@@ -36,13 +36,17 @@ class HourLinePainter extends CustomPainter {
   /// Line dash space width when using the [LineStyle.dashed] style
   final double dashSpaceWidth;
 
+  /// Emulates offset of vertical line from hour line starts.
+  final double emulateVerticalOffsetBy;
+
   /// Paints 24 hour lines.
   HourLinePainter({
     required this.lineColor,
     required this.lineHeight,
     required this.minuteHeight,
     required this.offset,
     required this.showVerticalLine,
+    required this.emulateVerticalOffsetBy,
     this.verticalLineOffset = 10,
     this.lineStyle = LineStyle.solid,
     this.dashWidth = 4,
@@ -51,21 +55,22 @@ class HourLinePainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
+    final dx = offset + emulateVerticalOffsetBy;
     final paint = Paint()
       ..color = lineColor
       ..strokeWidth = lineHeight;
 
     for (var i = 1; i < Constants.hoursADay; i++) {
       final dy = i * minuteHeight * 60;
       if (lineStyle == LineStyle.dashed) {
-        var startX = offset;
+        var startX = dx;
         while (startX < size.width) {
           canvas.drawLine(
               Offset(startX, dy), Offset(startX + dashWidth, dy), paint);
           startX += dashWidth + dashSpaceWidth;
         }
       } else {
-        canvas.drawLine(Offset(offset, dy), Offset(size.width, dy), paint);
+        canvas.drawLine(Offset(dx, dy), Offset(size.width, dy), paint);
       }
     }
 
@@ -157,6 +162,78 @@ class HalfHourLinePainter extends CustomPainter {
   }
 }
 
+//using HalfHourIndicatorSettings for this too
+class QuarterHourLinePainter extends CustomPainter {
+  /// Color of quarter hour line
+  final Color lineColor;
+
+  /// Height of quarter hour line
+  final double lineHeight;
+
+  /// Offset of quarter hour line from left.
+  final double offset;
+
+  /// Height occupied by one minute of time stamp.
+  final double minuteHeight;
+
+  /// Style of the quarter hour line
+  final LineStyle lineStyle;
+
+  /// Line dash width when using the [LineStyle.dashed] style
+  final double dashWidth;
+
+  /// Line dash space width when using the [LineStyle.dashed] style
+  final double dashSpaceWidth;
+
+  /// Paint quarter hour lines
+  QuarterHourLinePainter({
+    required this.lineColor,
+    required this.lineHeight,
+    required this.offset,
+    required this.minuteHeight,
+    required this.lineStyle,
+    this.dashWidth = 4,
+    this.dashSpaceWidth = 4,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = lineColor
+      ..strokeWidth = lineHeight;
+
+    for (var i = 0; i < Constants.hoursADay; i++) {
+      final dy1 = i * minuteHeight * 60 + (minuteHeight * 15);
+      final dy2 = i * minuteHeight * 60 + (minuteHeight * 45);
+
+      if (lineStyle == LineStyle.dashed) {
+        var startX = offset;
+        while (startX < size.width) {
+          canvas.drawLine(
+              Offset(startX, dy1), Offset(startX + dashWidth, dy1), paint);
+          startX += dashWidth + dashSpaceWidth;
+
+          canvas.drawLine(
+              Offset(startX, dy2), Offset(startX + dashWidth, dy2), paint);
+          startX += dashWidth + dashSpaceWidth;
+        }
+      } else {
+        canvas.drawLine(Offset(offset, dy1), Offset(size.width, dy1), paint);
+        canvas.drawLine(Offset(offset, dy2), Offset(size.width, dy2), paint);
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return oldDelegate is HourLinePainter &&
+        (oldDelegate.lineColor != lineColor ||
+            oldDelegate.offset != offset ||
+            lineHeight != oldDelegate.lineHeight ||
+            minuteHeight != oldDelegate.minuteHeight);
+  }
+}
+
 /// Paints a single horizontal line at [offset].
 class CurrentTimeLinePainter extends CustomPainter {
   /// Color of time indicator.

lib/src/typedefs.dart

@@ -82,4 +82,5 @@ typedef CustomHourLinePainter = CustomPainter Function(
   LineStyle lineStyle,
   double dashWidth,
   double dashSpaceWidth,
+  double emulateVerticalOffsetBy,
 );