Skip to content

Commit

Permalink
Merge pull request #228 from 049er/custom_hour_line_painter
Browse files Browse the repository at this point in the history
Feat: ✨ Added Custom Hour Line Painter
  • Loading branch information
PRBaraiya authored Nov 1, 2023
2 parents cafbcb1 + 9446056 commit a37536b
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 29 deletions.
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,9 @@ DayView(
eventArranger: SideEventArranger(), // To define how simultaneous events will be arranged.
onEventTap: (events, date) => print(events),
onDateLongPress: (date) => print(date),
hourLinePainter: (lineColor, lineHeight, offset, minuteHeight, showVerticalLine, verticalLineOffset) {
return //Your custom painter.
}
);
```

Expand All @@ -200,9 +203,15 @@ WeekView(
onEventTap: (events, date) => print(events),
onDateLongPress: (date) => print(date),
startDay: WeekDays.sunday, // To change the first day of the week.
showVerticalLines: false, // Show the vertical line between days.
hourLinePainter: (lineColor, lineHeight, offset, minuteHeight, showVerticalLine, verticalLineOffset) {
return //Your custom painter.
}
);
```



To see the list of all parameters and detailed description of parameters
visit [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/calendar_view-library.html)
.
Expand Down
24 changes: 14 additions & 10 deletions lib/src/day_view/_internal_day_view_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
/// Settings for hour indicator lines.
final HourIndicatorSettings hourIndicatorSettings;

/// Custom painter for hour line.
final CustomHourLinePainter hourLinePainter;

/// Flag to display live time indicator.
/// If true then indicator will be displayed else not.
final bool showLiveLine;
Expand Down Expand Up @@ -110,6 +113,7 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
required this.controller,
required this.timeLineBuilder,
required this.hourIndicatorSettings,
required this.hourLinePainter,
required this.showLiveLine,
required this.liveTimeIndicatorSettings,
required this.heightPerMinute,
Expand Down Expand Up @@ -152,16 +156,16 @@ class InternalDayViewPage<T extends Object?> extends StatelessWidget {
children: [
CustomPaint(
size: Size(width, height),
painter: HourLinePainter(
lineColor: hourIndicatorSettings.color,
lineHeight: hourIndicatorSettings.height,
offset: timeLineWidth + hourIndicatorSettings.offset,
minuteHeight: heightPerMinute,
verticalLineOffset: verticalLineOffset,
showVerticalLine: showVerticalLine,
lineStyle: hourIndicatorSettings.lineStyle,
dashWidth: hourIndicatorSettings.dashWidth,
dashSpaceWidth: hourIndicatorSettings.dashSpaceWidth,
painter: hourLinePainter(
hourIndicatorSettings.color,
hourIndicatorSettings.height,
timeLineWidth + hourIndicatorSettings.offset,
heightPerMinute,
showVerticalLine,
verticalLineOffset,
hourIndicatorSettings.lineStyle,
hourIndicatorSettings.dashWidth,
hourIndicatorSettings.dashSpaceWidth,
),
),
if (showHalfHours)
Expand Down
35 changes: 35 additions & 0 deletions lib/src/day_view/day_view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import '../event_arrangers/event_arrangers.dart';
import '../event_controller.dart';
import '../extensions.dart';
import '../modals.dart';
import '../painters.dart';
import '../style/header_style.dart';
import '../typedefs.dart';
import '_internal_day_view_page.dart';
Expand Down Expand Up @@ -79,6 +80,11 @@ class DayView<T extends Object?> extends StatefulWidget {
/// Pass [HourIndicatorSettings.none] to remove Hour lines.
final HourIndicatorSettings? hourIndicatorSettings;

/// A funtion that returns a [CustomPainter].
///
/// Use this if you want to paint custom hour lines.
final CustomHourLinePainter? hourLinePainter;

/// Defines settings for live time indicator.
///
/// Pass [HourIndicatorSettings.none] to remove live time indicator.
Expand Down Expand Up @@ -207,6 +213,7 @@ class DayView<T extends Object?> extends StatefulWidget {
this.maxDay,
this.initialDay,
this.hourIndicatorSettings,
this.hourLinePainter,
this.heightPerMinute = 0.7,
this.timeLineBuilder,
this.timeLineWidth,
Expand Down Expand Up @@ -266,6 +273,8 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {

late HourIndicatorSettings _hourIndicatorSettings;
late HourIndicatorSettings _halfHourIndicatorSettings;
late CustomHourLinePainter _hourLinePainter;

late HourIndicatorSettings _liveTimeIndicatorSettings;

late PageController _pageController;
Expand Down Expand Up @@ -408,6 +417,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
eventTileBuilder: _eventTileBuilder,
heightPerMinute: widget.heightPerMinute,
hourIndicatorSettings: _hourIndicatorSettings,
hourLinePainter: _hourLinePainter,
date: date,
onTileTap: widget.onEventTap,
onDateLongPress: widget.onDateLongPress,
Expand Down Expand Up @@ -511,6 +521,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
widget.fullDayEventBuilder ?? _defaultFullDayEventBuilder;
_dayDetectorBuilder =
widget.dayDetectorBuilder ?? _defaultPressDetectorBuilder;
_hourLinePainter = widget.hourLinePainter ?? _defaultHourLinePainter;
}

/// Sets the current date of this month.
Expand Down Expand Up @@ -657,6 +668,30 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
List<CalendarEventData<T>> events, DateTime date) =>
FullDayEventView(events: events, date: date);

HourLinePainter _defaultHourLinePainter(
Color lineColor,
double lineHeight,
double offset,
double minuteHeight,
bool showVerticalLine,
double verticalLineOffset,
LineStyle lineStyle,
double dashWidth,
double dashSpaceWidth,
) {
return HourLinePainter(
lineColor: lineColor,
lineHeight: lineHeight,
offset: offset,
minuteHeight: minuteHeight,
verticalLineOffset: verticalLineOffset,
showVerticalLine: showVerticalLine,
lineStyle: lineStyle,
dashWidth: dashWidth,
dashSpaceWidth: dashSpaceWidth,
);
}

/// Called when user change page using any gesture or inbuilt functions.
///
void _onPageChange(int index) {
Expand Down
15 changes: 13 additions & 2 deletions lib/src/typedefs.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@

import 'package:flutter/material.dart';

import 'calendar_event_data.dart';
import 'enumerations.dart';
import '../calendar_view.dart';

typedef CellBuilder<T extends Object?> = Widget Function(
DateTime date,
Expand Down Expand Up @@ -70,3 +69,15 @@ typedef DateTapCallback = void Function(DateTime date);

typedef EventFilter<T extends Object?> = List<CalendarEventData<T>> Function(
DateTime date, List<CalendarEventData<T>> events);

typedef CustomHourLinePainter = CustomPainter Function(
Color lineColor,
double lineHeight,
double offset,
double minuteHeight,
bool showVerticalLine,
double verticalLineOffset,
LineStyle lineStyle,
double dashWidth,
double dashSpaceWidth,
);
40 changes: 24 additions & 16 deletions lib/src/week_view/_internal_week_view_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import '../enumerations.dart';
import '../event_arrangers/event_arrangers.dart';
import '../event_controller.dart';
import '../modals.dart';
import '../painters.dart';
import '../typedefs.dart';

/// A single page for week view.
Expand All @@ -37,6 +36,9 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
/// Settings for hour indicator lines.
final HourIndicatorSettings hourIndicatorSettings;

/// Custom painter for hour line.
final CustomHourLinePainter hourLinePainter;

/// Flag to display live line.
final bool showLiveLine;

Expand Down Expand Up @@ -124,6 +126,7 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
required this.controller,
required this.timeLineBuilder,
required this.hourIndicatorSettings,
required this.hourLinePainter,
required this.showLiveLine,
required this.liveTimeIndicatorSettings,
required this.heightPerMinute,
Expand Down Expand Up @@ -216,13 +219,16 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
children: [
CustomPaint(
size: Size(width, height),
painter: HourLinePainter(
lineColor: hourIndicatorSettings.color,
lineHeight: hourIndicatorSettings.height,
offset: timeLineWidth + hourIndicatorSettings.offset,
minuteHeight: heightPerMinute,
verticalLineOffset: verticalLineOffset,
showVerticalLine: showVerticalLine,
painter: hourLinePainter(
hourIndicatorSettings.color,
hourIndicatorSettings.height,
timeLineWidth + hourIndicatorSettings.offset,
heightPerMinute,
showVerticalLine,
verticalLineOffset,
hourIndicatorSettings.lineStyle,
hourIndicatorSettings.dashWidth,
hourIndicatorSettings.dashSpaceWidth,
),
),
if (showLiveLine && liveTimeIndicatorSettings.height > 0)
Expand All @@ -243,14 +249,16 @@ class InternalWeekViewPage<T extends Object?> extends StatelessWidget {
...List.generate(
filteredDates.length,
(index) => Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: hourIndicatorSettings.color,
width: hourIndicatorSettings.height,
),
),
),
decoration: showVerticalLine
? BoxDecoration(
border: Border(
right: BorderSide(
color: hourIndicatorSettings.color,
width: hourIndicatorSettings.height,
),
),
)
: null,
height: height,
width: weekTitleWidth,
child: Stack(
Expand Down
41 changes: 40 additions & 1 deletion lib/src/week_view/week_view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import '../event_arrangers/event_arrangers.dart';
import '../event_controller.dart';
import '../extensions.dart';
import '../modals.dart';
import '../painters.dart';
import '../style/header_style.dart';
import '../typedefs.dart';
import '_internal_week_view_page.dart';
Expand Down Expand Up @@ -85,6 +86,11 @@ class WeekView<T extends Object?> extends StatefulWidget {
/// Settings for hour indicator settings.
final HourIndicatorSettings? hourIndicatorSettings;

/// A funtion that returns a [CustomPainter].
///
/// Use this if you want to paint custom hour lines.
final CustomHourLinePainter? hourLinePainter;

/// Settings for live time indicator settings.
final HourIndicatorSettings? liveTimeIndicatorSettings;

Expand Down Expand Up @@ -114,6 +120,9 @@ class WeekView<T extends Object?> extends StatefulWidget {
/// Width of week view. If null provided device width will be considered.
final double? width;

/// If true this will display vertical lines between each day.
final bool showVerticalLines;

/// Height of week day title,
final double weekTitleHeight;

Expand Down Expand Up @@ -193,11 +202,13 @@ class WeekView<T extends Object?> extends StatefulWidget {
this.heightPerMinute = 1,
this.timeLineOffset = 0,
this.showLiveTimeLineInAllDays = false,
this.showVerticalLines = true,
this.width,
this.minDay,
this.maxDay,
this.initialDay,
this.hourIndicatorSettings,
this.hourLinePainter,
this.timeLineBuilder,
this.timeLineWidth,
this.liveTimeIndicatorSettings,
Expand Down Expand Up @@ -259,6 +270,8 @@ class WeekViewState<T extends Object?> extends State<WeekView<T>> {
late EventArranger<T> _eventArranger;

late HourIndicatorSettings _hourIndicatorSettings;
late CustomHourLinePainter _hourLinePainter;

late HourIndicatorSettings _liveTimeIndicatorSettings;

late PageController _pageController;
Expand Down Expand Up @@ -418,13 +431,14 @@ class WeekViewState<T extends Object?> extends State<WeekView<T>> {
eventTileBuilder: _eventTileBuilder,
heightPerMinute: widget.heightPerMinute,
hourIndicatorSettings: _hourIndicatorSettings,
hourLinePainter: _hourLinePainter,
dates: dates,
showLiveLine: widget.showLiveTimeLineInAllDays ||
_showLiveTimeIndicator(dates),
timeLineOffset: widget.timeLineOffset,
timeLineWidth: _timeLineWidth,
verticalLineOffset: 0,
showVerticalLine: true,
showVerticalLine: widget.showVerticalLines,
controller: controller,
hourHeight: _hourHeight,
scrollController: _scrollController,
Expand Down Expand Up @@ -528,6 +542,7 @@ class WeekViewState<T extends Object?> extends State<WeekView<T>> {
_weekNumberBuilder = widget.weekNumberBuilder ?? _defaultWeekNumberBuilder;
_fullDayEventBuilder =
widget.fullDayEventBuilder ?? _defaultFullDayEventBuilder;
_hourLinePainter = widget.hourLinePainter ?? _defaultHourLinePainter;
}

Widget _defaultFullDayEventBuilder(
Expand Down Expand Up @@ -732,6 +747,30 @@ class WeekViewState<T extends Object?> extends State<WeekView<T>> {
);
}

HourLinePainter _defaultHourLinePainter(
Color lineColor,
double lineHeight,
double offset,
double minuteHeight,
bool showVerticalLine,
double verticalLineOffset,
LineStyle lineStyle,
double dashWidth,
double dashSpaceWidth,
) {
return HourLinePainter(
lineColor: lineColor,
lineHeight: lineHeight,
offset: offset,
minuteHeight: minuteHeight,
verticalLineOffset: verticalLineOffset,
showVerticalLine: showVerticalLine,
lineStyle: lineStyle,
dashWidth: dashWidth,
dashSpaceWidth: dashSpaceWidth,
);
}

/// Called when user change page using any gesture or inbuilt functions.
void _onPageChange(int index) {
if (mounted) {
Expand Down

0 comments on commit a37536b

Please sign in to comment.