From 5cf0cc6b3833f4e6dec02b011e75cc76d6d78e40 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 9 Feb 2023 11:29:08 +0100 Subject: [PATCH] Add extra customization options for datepicker component - Option to customize icons to scroll to next anmd previous month - Option to change formatting on weekdays/month (caps/no caps) --- CHANGELOG.md | 4 +++ example/lib/main.dart | 31 +++++++++++-------- example/pubspec.lock | 2 +- lib/src/models/date_time_picker_theme.dart | 14 +++++++++ .../overlay_date_time_picker/date_picker.dart | 7 ++++- .../overlay_date_time_picker/overlay.dart | 20 +++++++++--- pubspec.yaml | 2 +- 7 files changed, 59 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 836ffe3..9d7f4d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 2.3.1 + +- Added extra customization options for datetimepicker (Customizable buttons, text formatting for weekday and month) + ## 2.3.0 - Added availability of datetimepicker without button diff --git a/example/lib/main.dart b/example/lib/main.dart index ad3f006..e928b57 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -44,32 +44,37 @@ class DatePickerDemo extends StatelessWidget { @override Widget build(BuildContext context) { // set locale to Dutch - const dateTimePickerTheme = DateTimePickerTheme( - dateBoxShape: DateBoxShape.roundedRectangle, + DateTimePickerTheme dateTimePickerTheme = DateTimePickerTheme( + dateFormatWeekday: (value) => + value[0].toUpperCase() + value.substring(1).toLowerCase(), + dateFormatMonth: (value) => value.toUpperCase(), + prevIcon: (context) => const Icon(Icons.chevron_left_sharp), + nextIcon: (context) => const Icon(Icons.chevron_right_sharp), + dateBoxShape: DateBoxShape.circle, backgroundColor: Colors.white, markedIndicatorColor: Colors.red, - baseTheme: DateBoxBaseTheme( + baseTheme: const DateBoxBaseTheme( Colors.white, TextStyle(color: Colors.black), ), - selectedTheme: DateBoxSelectedTheme( + selectedTheme: const DateBoxSelectedTheme( Color(0x4BF44336), TextStyle( - color: Colors.red, + color: Colors.black, ), ), - highlightTheme: DateBoxHighlightTheme( + highlightTheme: const DateBoxHighlightTheme( Colors.red, TextStyle( color: Colors.white, ), ), - barTheme: DateTimePickerBarTheme( - barColor: Colors.black, - barOpacity: 1, - ), - paginationSize: 50, - shapeBorder: ArrowedBorder(), + barTheme: const DateTimePickerBarTheme( + barColor: Colors.pinkAccent, + barOpacity: 1, + textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)), + paginationSize: 25, + shapeBorder: const ArrowedBorder(), ); return Scaffold( @@ -139,7 +144,7 @@ class DatePickerDemo extends StatelessWidget { return IconButton( onPressed: onPressed, icon: const Icon(Icons.minimize)); }, - ) + ), ], ), ), diff --git a/example/pubspec.lock b/example/pubspec.lock index 35d6bb7..617cd56 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -68,7 +68,7 @@ packages: path: ".." relative: true source: path - version: "2.2.3" + version: "2.3.1" flutter_lints: dependency: "direct dev" description: diff --git a/lib/src/models/date_time_picker_theme.dart b/lib/src/models/date_time_picker_theme.dart index 4b5bfeb..ed6a003 100644 --- a/lib/src/models/date_time_picker_theme.dart +++ b/lib/src/models/date_time_picker_theme.dart @@ -9,6 +9,10 @@ class DateTimePickerTheme { /// The [DateTimePickerTheme] to style [DragDownDateTimePicker] in. Define a custom shape for the dates and specifically style /// a basic, highlighted, selected and disabled date. const DateTimePickerTheme({ + this.prevIcon, + this.nextIcon, + this.dateFormatMonth, + this.dateFormatWeekday, this.paginationSize = 25, this.weekDateBoxSize = 35, this.monthDateBoxSize = 45, @@ -87,4 +91,14 @@ class DateTimePickerTheme { /// If true the first letters of the weekdays will be displayed above the days of the month final bool monthWeekDayHeaders; + + /// This function allows you to change formatting of the month-text + final String Function(String date)? dateFormatMonth; + + /// This function allows you to change formatting of weekday-text + final String Function(String date)? dateFormatWeekday; + + final WidgetBuilder? nextIcon; + + final WidgetBuilder? prevIcon; } 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 ab12fab..a5bf564 100644 --- a/lib/src/widgets/overlay_date_time_picker/date_picker.dart +++ b/lib/src/widgets/overlay_date_time_picker/date_picker.dart @@ -54,6 +54,11 @@ class DatePicker extends StatelessWidget { child: Row( children: List.generate(DateTime.daysPerWeek, (index) { DateFormat dateFormatter = DateFormat("EE"); + var date = dateFormatter.format(DateTime(2022, 11, index)); + if (theme.dateFormatWeekday != null) { + date = theme.dateFormatWeekday! + .call(dateFormatter.format(DateTime(2022, 11, index))); + } return Expanded( child: Center( child: Padding( @@ -61,7 +66,7 @@ class DatePicker extends StatelessWidget { 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)), + date, style: textStyle.copyWith(fontWeight: FontWeight.bold), ), ), diff --git a/lib/src/widgets/overlay_date_time_picker/overlay.dart b/lib/src/widgets/overlay_date_time_picker/overlay.dart index b0081f6..d6a9f54 100644 --- a/lib/src/widgets/overlay_date_time_picker/overlay.dart +++ b/lib/src/widgets/overlay_date_time_picker/overlay.dart @@ -71,6 +71,18 @@ class _OverlayDateTimeContentState extends State { @override Widget build(BuildContext context) { + var monthText = DateFormat.yMMMM().format( + widget.controller.browsingDate, + ); + if (widget.theme.dateFormatMonth != null) { + monthText = widget.theme.dateFormatMonth!.call(monthText); + } + + Widget nextIcon = widget.theme.nextIcon?.call(context) ?? + const Icon(Icons.arrow_circle_right_outlined); + Widget prevIcon = widget.theme.prevIcon?.call(context) ?? + const Icon(Icons.arrow_circle_left_outlined); + return Column( mainAxisSize: MainAxisSize.min, children: [ @@ -88,14 +100,12 @@ class _OverlayDateTimeContentState extends State { (widget.dateTimeConstraint.inMonthRange(previousDate)) ? _goToPreviousPage : null, - icon: const Icon(Icons.arrow_circle_left_outlined), + icon: prevIcon, color: widget.theme.barTheme.barColor, iconSize: widget.theme.paginationSize, ), Text( - DateFormat.yMMMM().format( - widget.controller.browsingDate, - ), + monthText, style: widget.theme.barTheme.textStyle, ), (widget.onNextPageButtonChild != null) @@ -109,7 +119,7 @@ class _OverlayDateTimeContentState extends State { (widget.dateTimeConstraint.inMonthRange(nextDate)) ? _goToNextPage : null, - icon: const Icon(Icons.arrow_circle_right_outlined), + icon: nextIcon, color: widget.theme.barTheme.barColor, iconSize: widget.theme.paginationSize, ), diff --git a/pubspec.yaml b/pubspec.yaml index 4e52c11..fd596b6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_date_time_picker description: A Flutter package for date and time picker. -version: 2.3.0 +version: 2.3.1 homepage: https://iconica.nl/ environment: