feat: Added an option to show initial time(12am) in timeLine for dayV…

CHANGELOG.md

@@ -5,6 +5,10 @@
 - Added
   feature added a callback for the default header title
   - [#241](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/241)
+- Added
+  feature added an option to show initial time(12am) in the timeLine for dayView & weekView 
+  - [#267.](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/267)
+
 
 # [1.0.4 - 9 Aug 2023](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/tree/1.0.4)
 

lib/src/components/_internal_components.dart

@@ -119,6 +119,11 @@ class TimeLine extends StatelessWidget {
 
   double get _halfHourHeight => hourHeight / 2;
 
+  /// Flag for displaying initial hour(12am)
+  final bool showInitialTime;
+
+  final bool isFromWeekView;
+
   /// Time line to display time at left side of day or week view.
   const TimeLine({
     Key? key,
@@ -128,6 +133,8 @@ class TimeLine extends StatelessWidget {
     required this.timeLineOffset,
     required this.timeLineBuilder,
     this.showHalfHours = false,
+    this.showInitialTime = false,
+    this.isFromWeekView = false,
   }) : super(key: key);
 
   @override
@@ -142,19 +149,36 @@ class TimeLine extends StatelessWidget {
       ),
       child: Stack(
         children: [
-          for (int i = 1; i < Constants.hoursADay; i++)
-            _timelinePositioned(
-              topPosition: hourHeight * i - timeLineOffset,
-              bottomPosition: height - (hourHeight * (i + 1)) + timeLineOffset,
-              hour: i,
-            ),
+          for (int i = showInitialTime ? 0 : 1;
+              i < Constants.hoursADay;
+              i++) ...{
+            /// Here we are changing the top-position for the first index
+            /// hour which is 12am for the WeekView only.
+            if (i == 0 && showInitialTime && isFromWeekView) ...{
+              _timelinePositioned(
+                topPosition: hourHeight * i -
+                    timeLineOffset +
+                    Constants.initialTimeSpacing,
+                bottomPosition:
+                    height - (hourHeight * (i + 1)) + timeLineOffset,
+                hour: i,
+              ),
+            } else ...{
+              _timelinePositioned(
+                topPosition: hourHeight * i - timeLineOffset,
+                bottomPosition:
+                    height - (hourHeight * (i + 1)) + timeLineOffset,
+                hour: i,
+              ),
+            }
+          },
           if (showHalfHours)
             for (int i = 0; i < Constants.hoursADay; i++)
               _timelinePositioned(
                 topPosition: hourHeight * i - timeLineOffset + _halfHourHeight,
                 bottomPosition:
                     height - (hourHeight * (i + 1)) + timeLineOffset,
-                hour: i,
+                hour: showInitialTime && i == 0 ? 12 : i,
                 minutes: 30,
               ),
         ],

lib/src/constants.dart

@@ -22,8 +22,11 @@ class Constants {
   static const Color white = Color(0xffffffff);
   static const Color offWhite = Color(0xfff0f0f0);
   static const Color headerBackground = Color(0xFFDCF0FF);
+
   static Color get randomColor {
     return Color.fromRGBO(_random.nextInt(_maxColor),
         _random.nextInt(_maxColor), _random.nextInt(_maxColor), 1);
   }
+
+  static const double initialTimeSpacing = 10;
 }

lib/src/day_view/_internal_day_view_page.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 
 import '../components/_internal_components.dart';
 import '../components/event_scroll_notifier.dart';
+import '../constants.dart';
 import '../enumerations.dart';
 import '../event_arrangers/event_arrangers.dart';
 import '../event_controller.dart';
@@ -103,6 +104,9 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
 
   final ScrollController scrollController;
 
+  /// Flag for displaying initial hour(12am)
+  final bool showInitialTime;
+
   /// Defines a single day page.
   const InternalDayViewPage({
     Key? key,
@@ -133,6 +137,7 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
     required this.dayDetectorBuilder,
     required this.showHalfHours,
     required this.halfHourIndicatorSettings,
+    this.showInitialTime = false,
   }) : super(key: key);
 
   @override
@@ -148,6 +153,9 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
               : fullDayEventBuilder(fullDayEventList, date),
           Expanded(
             child: SingleChildScrollView(
+              padding: showInitialTime
+                  ? EdgeInsets.only(top: Constants.initialTimeSpacing)
+                  : EdgeInsets.zero,
               controller: scrollController,
               child: SizedBox(
                 height: height,
@@ -215,6 +223,7 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
                       timeLineWidth: timeLineWidth,
                       showHalfHours: showHalfHours,
                       key: ValueKey(heightPerMinute),
+                      showInitialTime: showInitialTime,
                     ),
                     if (showLiveLine && liveTimeIndicatorSettings.height > 0)
                       IgnorePointer(

lib/src/day_view/day_view.dart

@@ -201,6 +201,9 @@ class DayView<T extends Object?> extends StatefulWidget {
   /// Callback for the Header title
   final HeaderTitleCallback? onHeaderTitleTap;
 
+  /// Flag for displaying initial hour(12am)
+  final bool showInitialTime;
+
   /// Main widget for day view.
   const DayView({
     Key? key,
@@ -243,6 +246,7 @@ class DayView<T extends Object?> extends StatefulWidget {
     this.halfHourIndicatorSettings,
     this.startDuration = const Duration(hours: 0),
     this.onHeaderTitleTap,
+    this.showInitialTime = false,
   })  : assert(!(onHeaderTitleTap != null && dayTitleBuilder != null),
             "can't use [onHeaderTitleTap] & [dayTitleBuilder] simultaneously"),
         assert(timeLineOffset >= 0,
@@ -445,6 +449,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
                             showHalfHours: widget.showHalfHours,
                             halfHourIndicatorSettings:
                                 _halfHourIndicatorSettings,
+                            showInitialTime: widget.showInitialTime,
                           ),
                         );
                       },
@@ -699,6 +704,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
       lineStyle: lineStyle,
       dashWidth: dashWidth,
       dashSpaceWidth: dashSpaceWidth,
+      showInitialTime: widget.showInitialTime,
     );
   }
 

lib/src/painters.dart

@@ -36,6 +36,9 @@ class HourLinePainter extends CustomPainter {
   /// Line dash space width when using the [LineStyle.dashed] style
   final double dashSpaceWidth;
 
+  /// Flag for displaying initial hour(12am)
+  final bool showInitialTime;
+
   /// Paints 24 hour lines.
   HourLinePainter({
     required this.lineColor,
@@ -47,6 +50,7 @@ class HourLinePainter extends CustomPainter {
     this.lineStyle = LineStyle.solid,
     this.dashWidth = 4,
     this.dashSpaceWidth = 4,
+    this.showInitialTime = false,
   });
 
   @override
@@ -55,7 +59,7 @@ class HourLinePainter extends CustomPainter {
       ..color = lineColor
       ..strokeWidth = lineHeight;
 
-    for (var i = 1; i < Constants.hoursADay; i++) {
+    for (var i = showInitialTime ? 0 : 1; i < Constants.hoursADay; i++) {
       final dy = i * minuteHeight * 60;
       if (lineStyle == LineStyle.dashed) {
         var startX = offset;
@@ -70,15 +74,18 @@ class HourLinePainter extends CustomPainter {
     }
 
     if (showVerticalLine) if (lineStyle == LineStyle.dashed) {
-      var startY = 0.0;
+      var startY = showInitialTime ? -Constants.initialTimeSpacing : 0.0;
       while (startY < size.height) {
         canvas.drawLine(Offset(offset + verticalLineOffset, startY),
             Offset(offset + verticalLineOffset, startY + dashWidth), paint);
         startY += dashWidth + dashSpaceWidth;
       }
     } else {
-      canvas.drawLine(Offset(offset + verticalLineOffset, 0),
-          Offset(offset + verticalLineOffset, size.height), paint);
+      canvas.drawLine(
+          Offset(offset + verticalLineOffset,
+              showInitialTime ? -Constants.initialTimeSpacing : 0),
+          Offset(offset + verticalLineOffset, size.height),
+          paint);
     }
   }
 

lib/src/week_view/_internal_week_view_page.dart

@@ -113,6 +113,9 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
   /// Display full day events.
   final FullDayEventBuilder<T> fullDayEventBuilder;
 
+  /// Flag for displaying initial hour(12am)
+  final bool showInitialTime;
+
   /// A single page for week view.
   const InternalWeekViewPage({
     Key? key,
@@ -146,6 +149,7 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
     required this.scrollConfiguration,
     required this.fullDayEventBuilder,
     required this.weekDetectorBuilder,
+    this.showInitialTime = false,
   }) : super(key: key);
 
   @override
@@ -296,6 +300,8 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
                       height: height,
                       timeLineOffset: timeLineOffset,
                       timeLineBuilder: timeLineBuilder,
+                      showInitialTime: showInitialTime,
+                      isFromWeekView: true,
                     ),
                   ],
                 ),

lib/src/week_view/week_view.dart

@@ -195,6 +195,9 @@ class WeekView<T extends Object?> extends StatefulWidget {
   /// Callback for the Header title
   final HeaderTitleCallback? onHeaderTitleTap;
 
+  /// Flag for displaying initial hour(12am)
+  final bool showInitialTime;
+
   /// Main widget for week view.
   const WeekView({
     Key? key,
@@ -239,6 +242,7 @@ class WeekView<T extends Object?> extends StatefulWidget {
     this.safeAreaOption = const SafeAreaOption(),
     this.fullDayEventBuilder,
     this.onHeaderTitleTap,
+    this.showInitialTime = false,
   })  : assert(!(onHeaderTitleTap != null && weekPageHeaderBuilder != null),
             "can't use [onHeaderTitleTap] & [weekPageHeaderBuilder] simultaneously"),
         assert((timeLineOffset) >= 0,
@@ -456,6 +460,7 @@ class WeekViewState<T extends Object?> extends State<WeekView<T>> {
                             minuteSlotSize: widget.minuteSlotSize,
                             scrollConfiguration: _scrollConfiguration,
                             fullDayEventBuilder: _fullDayEventBuilder,
+                            showInitialTime: widget.showInitialTime,
                           ),
                         );
                       },
@@ -784,6 +789,7 @@ class WeekViewState<T extends Object?> extends State<WeekView<T>> {
       lineStyle: lineStyle,
       dashWidth: dashWidth,
       dashSpaceWidth: dashSpaceWidth,
+      showInitialTime: widget.showInitialTime,
     );
   }