From 5cb607516d367a41030b60a676589cd84e8c11b6 Mon Sep 17 00:00:00 2001 From: Ralf Weinbrecher Date: Thu, 8 Aug 2024 16:24:25 +0200 Subject: [PATCH] style(datepicker): ThemeData as parameter for styling the datepicker --- CHANGELOG.md | 3 + README.md | 45 ++-------- example/lib/main.dart | 26 ++++++ example/pubspec.lock | 2 +- lib/flutter_neat_and_clean_calendar.dart | 102 ++++++++--------------- 5 files changed, 72 insertions(+), 106 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e9d25c..e8e5c74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## [0.4.4] - 2024-08-08 +* Individual color values for date picker style exchange against ThemeData objects + ## [0.4.3] - 2024-08-07 * Bug-fix for styling today text in top bar diff --git a/README.md b/README.md index af440dd..5efde93 100644 --- a/README.md +++ b/README.md @@ -243,52 +243,19 @@ final Color? topRowIconColor; Sets the color of the icons in the top bar -#### `datePickerLightModeSelectedDayColor` +#### `datePickerLightTheme ```dart -final Color? datePickerLightModeSelectedDayColor; +final ThemeData? datePickerLightTheme; ``` -Color of the circle of the selected day in the datepicker for light mode. +Sets the `ColorScheme` and `TextButtonThemeData` for styling the date picker in light mode -#### `datePickerLightModeSelectedDayTextColor` +#### `datePickerDarkTheme ```dart -final Color? datePickerLightModeSelectedDayTextColor +final ThemeData? datePickerDarkTheme; ``` - -Sets the color of the text of the selected day in the date picker in light mode - -#### `datePickerLightModeSurfaceColor` - -```dart -final Color? datePickerLightModeSurfaceColor -``` - -Sets the color of the surface in the date picker in light mode - -#### `datePickerLightModeOnSurfaceColor` - -```dart -final Color? datePickerLightModeOnSurfaceColor -``` - -Sets the color of the text on the surface in the date picker in light mode - -#### `datePickerLightModeTextButtonColor` - -```dart -final Color? datePickerLightModeTextButtonColor -``` - -Sets the color of the text buttons in the date picker in light mode ("Cancel", "OK") - -These properties also exist for **dark mode** - -- datePickerDarkModeSelectedDayColor -- datePickerDarkModeSelectedDayTextColor -- datePickerDarkModeSurfaceColor -- datePickerDarkModeOnSurfaceColor -- datePickerDarkModeTextButtonColor +Sets the `ColorScheme` and `TextButtonThemeData` for styling the date picker in dark mode #### `todayButtonText` diff --git a/example/lib/main.dart b/example/lib/main.dart index 74c163f..c995dbc 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -135,6 +135,32 @@ class _CalendarScreenState extends State { selectedColor: Colors.blue, selectedTodayColor: Colors.green, todayColor: Colors.teal, + datePickerDarkTheme: ThemeData.dark().copyWith( + colorScheme: ColorScheme.dark( + primary: Colors.blue, + onPrimary: Colors.yellow, + surface: Colors.grey, + onSurface: Colors.yellow, + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: Colors.orange, + ), + ), + ), + datePickerLightTheme: ThemeData.dark().copyWith( + colorScheme: ColorScheme.dark( + primary: Colors.blue, + onPrimary: Colors.white, + surface: Colors.white, + onSurface: Colors.teal, + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: Colors.orange, + ), + ), + ), eventColor: null, locale: 'de_DE', todayButtonText: 'Heute', diff --git a/example/pubspec.lock b/example/pubspec.lock index e2611f8..c2df47f 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -89,7 +89,7 @@ packages: path: ".." relative: true source: path - version: "0.4.1" + version: "0.4.3" flutter_platform_widgets: dependency: transitive description: diff --git a/lib/flutter_neat_and_clean_calendar.dart b/lib/flutter_neat_and_clean_calendar.dart index 1876e30..3b3882b 100644 --- a/lib/flutter_neat_and_clean_calendar.dart +++ b/lib/flutter_neat_and_clean_calendar.dart @@ -6,7 +6,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_neat_and_clean_calendar/date_picker_config.dart'; import 'package:flutter_neat_and_clean_calendar/provider_image.dart'; import 'package:flutter_platform_widgets/flutter_platform_widgets.dart'; -// import 'package:flutter_neat_and_clean_calendar/platform_widgets.dart'; import './date_utils.dart'; import './simple_gesture_detector.dart'; import './calendar_tile.dart'; @@ -68,16 +67,8 @@ class Range { /// [selectedTodayColor] is the color, applied to the circle on the selected day, if it is today /// [todayColor] this is the color of the date of today /// [topRowIconColor] is the color of the icons in the top bar -/// [datePickerLightModeSelectedDayColor] is the color of the selected day in the date picker in light mode -/// [datePickerLightModeSelectedDayTextColor] is the color of the text of the selected day in the date picker in light mode -/// [datePickerLightModeSurfaceColor] is the color of the surface in the date picker in light mode -/// [datePickerLightModeOnSurfaceColor] is the color of the text on the surface in the date picker in light mode -/// [datePickerLightModeTextButtonColor] is the color of the text buttons in the date picker in light mode -/// [datePickerDarkModeSelectedDayColor] is the color of the selected day in the date picker in dark mode -/// [datePickerDarkModeSelectedDayTextColor] is the color of the text of the selected day in the date picker in dark mode -/// [datePickerDarkModeSurfaceColor] is the color of the surface in the date picker in dark mode -/// [datePickerDarkModeOnSurfaceColor] is the color of the text on the surface in the date picker in dark mode -/// [datePickerDarkModeTextButtonColor] is the color of the text buttons in the date picker in dark mode +/// [datePickerLightTheme] is a [ThemeData] object, that defines the light theme of the date picker. +/// [datePickerDarkTheme] is a [ThemeData] object, that defines the dark theme of the date picker /// [todayButtonText] is a [String]. With this property you can set the caption of the today icon (button to navigate to today). /// If left empty, the calendar will use the string "Today". /// [allDayEventText] is a [String]. With this property you can set the caption of the all day event. If left empty, the @@ -126,16 +117,8 @@ class Calendar extends StatefulWidget { final Color? selectedTodayColor; final Color? todayColor; final Color? topRowIconColor; - final Color? datePickerLightModeSelectedDayColor; - final Color? datePickerLightModeSelectedDayTextColor; - final Color? datePickerLightModeSurfaceColor; - final Color? datePickerLightModeOnSurfaceColor; - final Color? datePickerLightModeTextButtonColor; - final Color? datePickerDarkModeSelectedDayColor; - final Color? datePickerDarkModeSelectedDayTextColor; - final Color? datePickerDarkModeSurfaceColor; - final Color? datePickerDarkModeOnSurfaceColor; - final Color? datePickerDarkModeTextButtonColor; + final ThemeData? datePickerLightTheme; + final ThemeData? datePickerDarkTheme; final String todayButtonText; final String allDayEventText; final String multiDayEndText; @@ -167,7 +150,6 @@ class Calendar extends StatefulWidget { this.onEventSelected, this.onEventLongPressed, this.isExpandable = false, - // this.events, this.eventsList, this.dayBuilder, this.eventListBuilder, @@ -181,16 +163,8 @@ class Calendar extends StatefulWidget { this.selectedTodayColor, this.todayColor = Colors.blue, this.topRowIconColor = Colors.blue, - this.datePickerLightModeSelectedDayColor = Colors.blue, - this.datePickerLightModeSelectedDayTextColor = Colors.white, - this.datePickerLightModeSurfaceColor = Colors.white, - this.datePickerLightModeOnSurfaceColor = Colors.black, - this.datePickerLightModeTextButtonColor = Colors.red, - this.datePickerDarkModeSelectedDayColor = Colors.blue, - this.datePickerDarkModeSelectedDayTextColor = Colors.white, - this.datePickerDarkModeSurfaceColor = Colors.white, - this.datePickerDarkModeOnSurfaceColor = Colors.black, - this.datePickerDarkModeTextButtonColor = Colors.red, + this.datePickerLightTheme, + this.datePickerDarkTheme, this.todayButtonText = 'Today', this.allDayEventText = 'All Day', this.multiDayEndText = 'End', @@ -368,10 +342,8 @@ class _CalendarState extends State { if (!widget.hideTodayIcon) { todayIcon = GestureDetector( - child: Text( - widget.todayButtonText, - style: widget.displayMonthTextStyle ?? null - ), + child: Text(widget.todayButtonText, + style: widget.displayMonthTextStyle ?? null), onTap: resetToToday, ); } else { @@ -390,38 +362,36 @@ class _CalendarState extends State { Theme.of(context).brightness == Brightness.dark; // Define Light Theme - ThemeData lightTheme = ThemeData.light().copyWith( - colorScheme: ColorScheme.light( - primary: widget.datePickerLightModeSelectedDayColor!, - onPrimary: - widget.datePickerLightModeSelectedDayTextColor!, - surface: widget.datePickerLightModeSurfaceColor!, - onSurface: widget.datePickerLightModeOnSurfaceColor!, - ), - textButtonTheme: TextButtonThemeData( - style: TextButton.styleFrom( - foregroundColor: - widget.datePickerLightModeTextButtonColor!, - ), - ), - ); + ThemeData lightTheme = widget.datePickerLightTheme ?? + ThemeData.light().copyWith( + colorScheme: ColorScheme.light( + primary: Colors.blue, + onPrimary: Colors.white, + surface: Colors.white, + onSurface: Colors.black, + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: Colors.red, + ), + ), + ); // Define Dark Theme - ThemeData darkTheme = ThemeData.dark().copyWith( - colorScheme: ColorScheme.dark( - primary: widget.datePickerDarkModeSelectedDayColor!, - onPrimary: - widget.datePickerDarkModeSelectedDayTextColor!, - surface: widget.datePickerDarkModeSurfaceColor!, - onSurface: widget.datePickerDarkModeOnSurfaceColor!, - ), - textButtonTheme: TextButtonThemeData( - style: TextButton.styleFrom( - foregroundColor: - widget.datePickerDarkModeTextButtonColor!, - ), - ), - ); + ThemeData darkTheme = widget.datePickerDarkTheme ?? + ThemeData.dark().copyWith( + colorScheme: ColorScheme.dark( + primary: Colors.blue, + onPrimary: Colors.white, + surface: Colors.grey, + onSurface: Colors.white, + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: Colors.white, + ), + ), + ); // Choose the theme based on the current mode return Theme(