From 2fe07a9747832bc53a5bf020486230ccbffe7a82 Mon Sep 17 00:00:00 2001 From: Bart Ribbers Date: Fri, 18 Nov 2022 11:39:26 +0100 Subject: [PATCH] Make it possible to show the names of the day of the weeks in the overlay date time picker --- lib/src/overlay_date_time_picker.dart | 12 ++- .../overlay_date_time_picker/date_picker.dart | 82 +++++++++++++------ .../overlay_date_time_picker/overlay.dart | 10 +++ 3 files changed, 79 insertions(+), 25 deletions(-) diff --git a/lib/src/overlay_date_time_picker.dart b/lib/src/overlay_date_time_picker.dart index bb72c54..3ca3edd 100644 --- a/lib/src/overlay_date_time_picker.dart +++ b/lib/src/overlay_date_time_picker.dart @@ -11,9 +11,10 @@ import 'package:flutter_date_time_picker/src/widgets/overlay_date_time_picker/ov class OverlayDateTimePicker extends StatefulWidget { const OverlayDateTimePicker({ this.theme = const DateTimePickerTheme(), + this.textStyle = const TextStyle(), this.alignment = Alignment.bottomRight, this.initialDate, - this.size = const Size(325, 325), + this.size = const Size(325, 350), this.wrongTimeDialog, this.onTapDay, this.highlightToday = true, @@ -26,6 +27,7 @@ class OverlayDateTimePicker extends StatefulWidget { super.key, this.buttonBuilder, this.closeOnSelectDate = true, + this.showWeekDays = true, }) : assert(child != null || buttonBuilder != null); /// The child contained by the DatePicker. @@ -37,6 +39,9 @@ class OverlayDateTimePicker extends StatefulWidget { /// Visual properties for the [OverlayDateTimePicker] final DateTimePickerTheme theme; + /// Style to base the text on + final TextStyle textStyle; + /// Callback that provides the date tapped on as a [DateTime] object. final Function(DateTime date)? onTapDay; @@ -73,6 +78,9 @@ class OverlayDateTimePicker extends StatefulWidget { /// [closeOnSelectDate] is a bool that indicates if the overlay should be closed if a date has been picked. final bool closeOnSelectDate; + /// [showWeekDays] is a [bool] that determines if day in the week indicators should be shown + final bool showWeekDays; + @override State createState() => _OverlayDateTimePickerState(); } @@ -208,8 +216,10 @@ class _OverlayDateTimePickerState extends State { padding: const EdgeInsets.all(8.0), child: OverlayDateTimeContent( theme: widget.theme, + textStyle: widget.textStyle, size: widget.size, controller: _dateTimePickerController, + showWeekDays: true, onNextDate: nextDate, onPreviousDate: previousDate, ), diff --git a/lib/src/widgets/overlay_date_time_picker/date_picker.dart b/lib/src/widgets/overlay_date_time_picker/date_picker.dart index 042a15e..f82793c 100644 --- a/lib/src/widgets/overlay_date_time_picker/date_picker.dart +++ b/lib/src/widgets/overlay_date_time_picker/date_picker.dart @@ -7,20 +7,25 @@ import 'package:flutter_date_time_picker/flutter_date_time_picker.dart'; import 'package:flutter_date_time_picker/src/extensions/date_time.dart'; import 'package:flutter_date_time_picker/src/utils/date_time_picker_controller.dart'; import 'package:flutter_date_time_picker/src/widgets/overlay_date_time_picker/pickable_date.dart'; +import 'package:intl/intl.dart'; class DatePicker extends StatelessWidget { const DatePicker({ super.key, required this.controller, required this.theme, + required this.textStyle, required this.onSelectDate, required this.date, + required this.showWeekDays, }); final DateTimePickerController controller; final DateTimePickerTheme theme; + final TextStyle textStyle; final void Function(DateTime date) onSelectDate; final DateTime date; + final bool showWeekDays; @override Widget build(BuildContext context) { @@ -39,31 +44,60 @@ class DatePicker extends StatelessWidget { int length = DateTime(date.year, date.month).daysInMonth() + daysToSkip; int daysToAdd = 7 - length % 7; - return GridView.count( - physics: const NeverScrollableScrollPhysics(), - crossAxisCount: 7, - children: List.generate( - length + daysToAdd, - (index) { - DateTime todayDate = DateTime( - date.year, - date.month, - addedIndex + index + 1 - daysToSkip, - ); - return Padding( - padding: const EdgeInsets.all(2.0), - child: PickableDate( - isOffMonth: date.month != todayDate.month, - isDisabled: isDisabled(addedIndex + index, daysToSkip), - isSelected: controller.selectedDate == todayDate, - isToday: isToday(todayDate) && controller.highlightToday, - theme: theme, - date: todayDate, - onPressed: onSelectDate, + return Column( + children: [ + if (showWeekDays) ...[ + Padding( + padding: const EdgeInsets.only(top: 8), + child: Row( + children: List.generate(DateTime.daysPerWeek, (index) { + DateFormat dateFormatter = DateFormat("EE"); + return Expanded( + child: Center( + child: Padding( + padding: const EdgeInsets.all(2.0), + child: Text( + // The first day in November 2022 is monday + // We use it to properly show monday as the first day and sunday as the last one + dateFormatter.format(DateTime(2022, 11, index)), + style: textStyle.copyWith(fontWeight: FontWeight.bold), + ), + ), + ), + ); + }), ), - ); - }, - ), + ), + ], + Expanded( + child: GridView.count( + physics: const NeverScrollableScrollPhysics(), + crossAxisCount: 7, + children: List.generate( + length + daysToAdd, + (index) { + DateTime todayDate = DateTime( + date.year, + date.month, + addedIndex + index + 1 - daysToSkip, + ); + return Padding( + padding: const EdgeInsets.all(2.0), + child: PickableDate( + isOffMonth: date.month != todayDate.month, + isDisabled: isDisabled(addedIndex + index, daysToSkip), + isSelected: controller.selectedDate == todayDate, + isToday: isToday(todayDate) && controller.highlightToday, + theme: theme, + date: todayDate, + onPressed: onSelectDate, + ), + ); + }, + ), + ), + ), + ], ); } diff --git a/lib/src/widgets/overlay_date_time_picker/overlay.dart b/lib/src/widgets/overlay_date_time_picker/overlay.dart index ccb6f64..bef923a 100644 --- a/lib/src/widgets/overlay_date_time_picker/overlay.dart +++ b/lib/src/widgets/overlay_date_time_picker/overlay.dart @@ -12,15 +12,19 @@ class OverlayDateTimeContent extends StatefulWidget { const OverlayDateTimeContent({ super.key, required this.theme, + required this.textStyle, required this.size, required this.controller, + required this.showWeekDays, required this.onNextDate, required this.onPreviousDate, }); final DateTimePickerTheme theme; + final TextStyle textStyle; final Size size; final DateTimePickerController controller; + final bool showWeekDays; final void Function() onNextDate; final void Function() onPreviousDate; @@ -86,27 +90,33 @@ class _OverlayDateTimeContentState extends State { controller: widget.controller, onSelectDate: onSelectDate, theme: widget.theme, + textStyle: widget.textStyle, date: DateTime( widget.controller.browsingDate.year, widget.controller.browsingDate.month - 1, 1, ), + showWeekDays: widget.showWeekDays, ), DatePicker( controller: widget.controller, onSelectDate: onSelectDate, theme: widget.theme, + textStyle: widget.textStyle, date: widget.controller.browsingDate, + showWeekDays: widget.showWeekDays, ), DatePicker( controller: widget.controller, onSelectDate: onSelectDate, theme: widget.theme, + textStyle: widget.textStyle, date: DateTime( widget.controller.browsingDate.year, widget.controller.browsingDate.month + 1, 1, ), + showWeekDays: widget.showWeekDays, ), ], ),