From 19ee892d675c48b670c22bd9cac0db4142bee2b3 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Tue, 19 Aug 2025 11:38:23 +0300 Subject: [PATCH] app timer, time and date picker color improvements. --- .../widgets/date_and_time/date_picker.dart | 36 ++++++++++++++++++ lib/views/widgets/timer/app_timer.dart | 38 ++++++++++++++++++- 2 files changed, 73 insertions(+), 1 deletion(-) diff --git a/lib/views/widgets/date_and_time/date_picker.dart b/lib/views/widgets/date_and_time/date_picker.dart index b06f414c..f9e06b5d 100644 --- a/lib/views/widgets/date_and_time/date_picker.dart +++ b/lib/views/widgets/date_and_time/date_picker.dart @@ -82,6 +82,42 @@ class ADatePicker extends StatelessWidget { initialDate: DateTime.now(), firstDate: from ?? DateTime.now(), lastDate: to ?? DateTime.now(), + builder: (BuildContext context, Widget? child) { + final ThemeData currentTheme = Theme.of(context); + return Theme( + data: currentTheme.copyWith( + datePickerTheme: DatePickerThemeData( + headerBackgroundColor: AppColor.primary10, + headerForegroundColor: Colors.white, + backgroundColor: currentTheme.colorScheme.surface, + dayForegroundColor: MaterialStateColor.resolveWith((states) { + if (states.contains(MaterialState.selected)) return Colors.white; + if (states.contains(MaterialState.disabled)) return Colors.grey.withOpacity(0.6); + return currentTheme.colorScheme.onSurface; + }), + dayBackgroundColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? AppColor.primary10 : Colors.transparent), + yearForegroundColor: MaterialStateColor.resolveWith((states) { + if (states.contains(MaterialState.selected)) return Colors.white; + if (states.contains(MaterialState.disabled)) return Colors.grey.withOpacity(0.6); + return currentTheme.colorScheme.onSurface; + }), + yearBackgroundColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? AppColor.primary10 : Colors.transparent), + // todayForegroundColor: MaterialStateColor.resolveWith((states) => AppColor.primary10), + // todayBorder: BorderSide(color: AppColor.primary10.withOpacity(0.7)), + dividerColor: Colors.grey.withOpacity(0.2), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), + inputDecorationTheme: const InputDecorationTheme( + focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: AppColor.primary10, width: 2)), + ), + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom(foregroundColor: AppColor.primary10), + ), + iconTheme: IconThemeData(color: AppColor.primary10.withOpacity(0.7)), + ), + child: child!, + ); + }, ); if (picked != null && onDatePicker != null) { onDatePicker!(picked); // Use null-aware operator diff --git a/lib/views/widgets/timer/app_timer.dart b/lib/views/widgets/timer/app_timer.dart index 93270c9e..84179d92 100644 --- a/lib/views/widgets/timer/app_timer.dart +++ b/lib/views/widgets/timer/app_timer.dart @@ -171,6 +171,24 @@ class _AppTimerState extends State { showTimePicker( context: context, initialTime: TimeOfDay.now(), + builder: (BuildContext context, Widget? child) { + final ThemeData currentTheme = Theme.of(context); + return Theme( + data: currentTheme.copyWith( + timePickerTheme: TimePickerThemeData( + dialHandColor: AppColor.primary10, + dialBackgroundColor: Colors.grey.withOpacity(0.1), + hourMinuteColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? AppColor.primary10 : Colors.grey.withOpacity(0.1)), + dayPeriodColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? AppColor.primary10 : Colors.transparent), + dayPeriodTextColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? Colors.white : AppColor.primary10), + dayPeriodBorderSide: BorderSide(color: Colors.grey.withOpacity(0.2)), + entryModeIconColor: AppColor.primary10, + ), + textButtonTheme: TextButtonThemeData(style: TextButton.styleFrom(foregroundColor: AppColor.primary10)), + ), + child: child!, + ); + }, ).then((selectedTime) { if (selectedTime != null) { _pickerStartAt = DateTime(selectedDate.year, selectedDate.month, selectedDate.day, selectedTime.hour, selectedTime.minute); @@ -205,6 +223,24 @@ class _AppTimerState extends State { showTimePicker( context: context, initialTime: TimeOfDay.now(), + builder: (BuildContext context, Widget? child) { + final ThemeData currentTheme = Theme.of(context); + return Theme( + data: currentTheme.copyWith( + timePickerTheme: TimePickerThemeData( + dialHandColor: AppColor.primary10, + dialBackgroundColor: Colors.grey.withOpacity(0.1), + hourMinuteColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? AppColor.primary10 : Colors.grey.withOpacity(0.1)), + dayPeriodColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? AppColor.primary10 : Colors.transparent), + dayPeriodTextColor: MaterialStateColor.resolveWith((states) => states.contains(MaterialState.selected) ? Colors.white : AppColor.primary10), + dayPeriodBorderSide: BorderSide(color: Colors.grey.withOpacity(0.2)), + entryModeIconColor: AppColor.primary10, + ), + textButtonTheme: TextButtonThemeData(style: TextButton.styleFrom(foregroundColor: AppColor.primary10)), + ), + child: child!, + ); + }, ).then((selectedTime) { if (selectedTime != null) { selectedDate = selectedDate.add(Duration(hours: selectedTime.hour, minutes: selectedTime.minute)); @@ -256,7 +292,7 @@ class _AppTimerState extends State { color: context.isDark && !widget.enabled ? AppColor.neutral60 : !widget.enabled - // backgroundColor: context.isDark ? AppColor.neutral20 : AppColor.neutral90, + // backgroundColor: context.isDark ? AppColor.neutral20 : AppColor.neutral90, ? AppColor.neutral40 : AppColor.fieldBgColor(context), borderRadius: BorderRadius.circular(10),