From 19b6de7ef85d178a9f00e7c2c2048054ba8a2d26 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Mon, 11 May 2026 09:51:11 +0300 Subject: [PATCH] date picker and time picker color scheme changes --- .../asset_retired/verify_asset_detail.dart | 128 +++++++++++++++++- .../widgets/date_and_time/date_picker.dart | 126 ++++++++++++++--- 2 files changed, 234 insertions(+), 20 deletions(-) diff --git a/lib/modules/cm_module/views/forms/asset_retired/verify_asset_detail.dart b/lib/modules/cm_module/views/forms/asset_retired/verify_asset_detail.dart index a23f67a2..ad1ac5ae 100644 --- a/lib/modules/cm_module/views/forms/asset_retired/verify_asset_detail.dart +++ b/lib/modules/cm_module/views/forms/asset_retired/verify_asset_detail.dart @@ -144,6 +144,69 @@ class _VerifyAssetDetailsState extends State with TickerProv showTimePicker( context: context, initialTime: TimeOfDay.now(), + builder: (BuildContext context, Widget? child) { + return Theme( + data: Theme.of(context).copyWith( + timePickerTheme: TimePickerThemeData( + backgroundColor: AppColor.bottomSheetColor(context), + hourMinuteShape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + side: BorderSide(color: AppColor.borderColor(context)), + ), + dayPeriodBorderSide: BorderSide(color: AppColor.borderColor(context)), + dayPeriodColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return Colors.transparent; + }), + dayPeriodTextColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.textStyleColor(context); + }), + dialHandColor: AppColor.primary10, + dialBackgroundColor: AppColor.scaffoldBackground(context), + hourMinuteColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return AppColor.scaffoldBackground(context); + }), + hourMinuteTextColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.textStyleColor(context); + }), + dialTextColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.textStyleColor(context); + }), + entryModeIconColor: AppColor.primary10, + helpTextStyle: TextStyle( + color: AppColor.textStyleColor(context), + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: AppColor.primary10, + textStyle: const TextStyle( + fontWeight: FontWeight.w600, + fontSize: 14, + ), + ), + ), + ), + child: child!, + ); + }, ).then((selectedTime) { // Handle the selected date and time here. if (selectedTime != null) { @@ -261,6 +324,69 @@ class _VerifyAssetDetailsState extends State with TickerProv showTimePicker( context: context, initialTime: TimeOfDay.now(), + builder: (BuildContext context, Widget? child) { + return Theme( + data: Theme.of(context).copyWith( + timePickerTheme: TimePickerThemeData( + backgroundColor: AppColor.bottomSheetColor(context), + hourMinuteShape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + side: BorderSide(color: AppColor.borderColor(context)), + ), + dayPeriodBorderSide: BorderSide(color: AppColor.borderColor(context)), + dayPeriodColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return Colors.transparent; + }), + dayPeriodTextColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.textStyleColor(context); + }), + dialHandColor: AppColor.primary10, + dialBackgroundColor: AppColor.scaffoldBackground(context), + hourMinuteColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return AppColor.scaffoldBackground(context); + }), + hourMinuteTextColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.textStyleColor(context); + }), + dialTextColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.textStyleColor(context); + }), + entryModeIconColor: AppColor.primary10, + helpTextStyle: TextStyle( + color: AppColor.textStyleColor(context), + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + foregroundColor: AppColor.primary10, + textStyle: const TextStyle( + fontWeight: FontWeight.w600, + fontSize: 14, + ), + ), + ), + ), + child: child!, + ); + }, ).then((selectedTime) { // Handle the selected date and time here. if (selectedTime != null) { @@ -405,7 +531,7 @@ class _VerifyAssetDetailsState extends State with TickerProv }), ), 8.width, - Text(element.name ?? '', style: AppTextStyles.tinyFont.copyWith(color: AppColor.neutral120)), + Text(element.name ?? '', style: AppTextStyles.tinyFont.copyWith(color: AppColor.textColor(context))), ], ) ], diff --git a/lib/views/widgets/date_and_time/date_picker.dart b/lib/views/widgets/date_and_time/date_picker.dart index 790565fd..58fab5d6 100644 --- a/lib/views/widgets/date_and_time/date_picker.dart +++ b/lib/views/widgets/date_and_time/date_picker.dart @@ -87,36 +87,124 @@ class ADatePicker extends StatelessWidget { lastDate: to ?? DateTime.now(), builder: (BuildContext context, Widget? child) { final ThemeData currentTheme = Theme.of(context); + final bool isDark = context.isDark; + return Theme( data: currentTheme.copyWith( datePickerTheme: DatePickerThemeData( - headerBackgroundColor: AppColor.scaffoldBackground(context), + // Header styling + headerBackgroundColor: AppColor.primary10, headerForegroundColor: Colors.white, + + // Background backgroundColor: AppColor.bottomSheetColor(context), - 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; + + // Surface tint removal for clean look + surfaceTintColor: Colors.transparent, + + // Day cell styling + dayForegroundColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + if (states.contains(WidgetState.disabled)) { + return isDark ? AppColor.neutral10.withOpacity(0.3) : AppColor.neutral20.withOpacity(0.4); + } + return AppColor.textStyleColor(context); + }), + + dayBackgroundColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return Colors.transparent; + }), + + // Today's date styling + todayForegroundColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + return AppColor.primary10; + }), + + todayBackgroundColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return Colors.transparent; }), - 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; + + todayBorder: BorderSide(color: AppColor.primary10, width: 1), + + // Year selector styling + yearForegroundColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return Colors.white; + } + if (states.contains(WidgetState.disabled)) { + return isDark ? AppColor.neutral10.withOpacity(0.3) : AppColor.neutral20.withOpacity(0.4); + } + return AppColor.textStyleColor(context); + }), + + yearBackgroundColor: WidgetStateColor.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return AppColor.primary10; + } + return Colors.transparent; }), - 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)), + + // Weekday labels + weekdayStyle: TextStyle( + color: AppColor.labelTextStyleColor(context), + fontWeight: FontWeight.w600, + ), + + // Day style + dayStyle: TextStyle( + color: AppColor.textStyleColor(context), + ), + + // Year style + yearStyle: TextStyle( + color: AppColor.textStyleColor(context), + ), + + // Divider + dividerColor: AppColor.borderColor(context), + + // Shape + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + + // Input decoration for text field mode + inputDecorationTheme: InputDecorationTheme( + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide(color: AppColor.primary10, width: 2), + ), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: AppColor.borderColor(context)), + ), ), ), + + // Button styling (Cancel/OK buttons) textButtonTheme: TextButtonThemeData( - style: TextButton.styleFrom(foregroundColor: AppColor.loadingColor(context)), + style: TextButton.styleFrom( + foregroundColor: AppColor.primary10, + textStyle: const TextStyle( + fontWeight: FontWeight.w600, + fontSize: 14, + ), + ), + ), + + // Icon theme for navigation arrows + iconTheme: IconThemeData( + color: Colors.white, ), - iconTheme: IconThemeData(color: AppColor.primary10.withOpacity(0.7)), ), child: child!, );