From 1d8ec14a878922b0935656c8bbefa1ce5b45ca30 Mon Sep 17 00:00:00 2001 From: Manish Zure Date: Fri, 24 Oct 2025 16:54:13 +0530 Subject: [PATCH] change theme ui --- lib/helpers/theme/app_theme.dart | 8 +- lib/helpers/theme/theme_customizer.dart | 2 +- lib/view/appearance_screen.dart | 133 +++++++++++++++++++ lib/view/layouts/user_profile_right_bar.dart | 7 + 4 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 lib/view/appearance_screen.dart diff --git a/lib/helpers/theme/app_theme.dart b/lib/helpers/theme/app_theme.dart index 1d3e8bb..8637ebd 100644 --- a/lib/helpers/theme/app_theme.dart +++ b/lib/helpers/theme/app_theme.dart @@ -40,6 +40,12 @@ class AppTheme { static Color primaryColor = Color(0xff663399); + static void updatePrimaryColor(Color color) { + primaryColor = color; + theme = getThemeFromThemeMode(); // rebuild theme data + AppStyle.changeMyTheme(); // apply to widgets + } + static ThemeData getThemeFromThemeMode() { return ThemeCustomizer.instance.theme == ThemeMode.light ? lightTheme : darkTheme; } @@ -58,7 +64,7 @@ class AppTheme { scaffoldBackgroundColor: Color(0xffF5F5F5), canvasColor: Colors.transparent, - /// AppBar Theme + /// AppBar Theme appBarTheme: AppBarTheme( backgroundColor: Color(0xffF5F5F5), iconTheme: IconThemeData(color: Color(0xff495057)), actionsIconTheme: IconThemeData(color: Color(0xff495057))), diff --git a/lib/helpers/theme/theme_customizer.dart b/lib/helpers/theme/theme_customizer.dart index 4abb4e7..752ae24 100644 --- a/lib/helpers/theme/theme_customizer.dart +++ b/lib/helpers/theme/theme_customizer.dart @@ -21,7 +21,7 @@ class ThemeCustomizer { Language currentLanguage = Language.languages.first; ThemeMode theme = ThemeMode.light; - ThemeMode leftBarTheme = ThemeMode.light; + ThemeMode leftBarTheme = ThemeMode.light; ThemeMode rightBarTheme = ThemeMode.light; ThemeMode topBarTheme = ThemeMode.light; diff --git a/lib/view/appearance_screen.dart b/lib/view/appearance_screen.dart new file mode 100644 index 0000000..ac1fc91 --- /dev/null +++ b/lib/view/appearance_screen.dart @@ -0,0 +1,133 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:marco/helpers/widgets/custom_app_bar.dart'; +import 'package:marco/helpers/widgets/my_spacing.dart'; +import 'package:marco/helpers/widgets/my_text.dart'; +import 'package:marco/helpers/theme/app_theme.dart'; +// import 'package:marco/helpers/theme/app_notifier.dart'; +// import 'package:provider/provider.dart'; + +class AppearancePage extends StatefulWidget { + const AppearancePage({super.key}); + + @override + State createState() => _AppearancePageState(); +} + +class _AppearancePageState extends State { + String selectedTheme = "Red"; + + void _changeTheme(String theme) { + setState(() => selectedTheme = theme); + + Color newColor; + switch (theme) { + case "Red": + newColor = Colors.red; + break; + case "Green": + newColor = Colors.green; + break; + case "Blue": + newColor = Colors.blue; + break; + default: + newColor = Colors.red; + } + + // ✅ dynamically change app color + AppTheme.updatePrimaryColor(newColor); +} + + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: const Color(0xFFF9FAFB), + appBar: CustomAppBar( + title: "Appearance", + onBackPressed: () => Get.back(), + ), + body: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + MyText.titleMedium( + "Change Theme", + fontWeight: 700, + fontSize: 18, + ), + MySpacing.height(8), + MyText.bodySmall( + "Select a color theme for your app appearance.", + color: Colors.black54, + ), + MySpacing.height(20), + _buildThemeOption("Red", Colors.red), + _buildThemeOption("Green", Colors.green), + _buildThemeOption("Blue", Colors.blue), + ], + ), + ), + ); + } + + Widget _buildThemeOption(String name, Color color) { + final isSelected = selectedTheme == name; + + return GestureDetector( + onTap: () => _changeTheme(name), + child: Container( + margin: const EdgeInsets.only(bottom: 14), + decoration: BoxDecoration( + color: isSelected ? color.withOpacity(0.08) : Colors.white, + borderRadius: BorderRadius.circular(10), + border: Border.all( + color: isSelected ? color : Colors.grey.shade300, + width: isSelected ? 1.5 : 1, + ), + boxShadow: [ + if (isSelected) + BoxShadow( + color: color.withOpacity(0.15), + blurRadius: 6, + offset: const Offset(0, 3), + ), + ], + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16), + child: Row( + children: [ + CircleAvatar( + radius: 10, + backgroundColor: color, + ), + MySpacing.width(14), + MyText.bodyMedium( + name, + fontWeight: 600, + color: Colors.black87, + ), + const Spacer(), + AnimatedSwitcher( + duration: const Duration(milliseconds: 250), + transitionBuilder: (child, anim) => + ScaleTransition(scale: anim, child: child), + child: isSelected + ? Icon( + Icons.check_circle_rounded, + key: ValueKey(name), + color: color, + size: 22, + ) + : const SizedBox.shrink(), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/view/layouts/user_profile_right_bar.dart b/lib/view/layouts/user_profile_right_bar.dart index 9fb8caf..3ff2cb4 100644 --- a/lib/view/layouts/user_profile_right_bar.dart +++ b/lib/view/layouts/user_profile_right_bar.dart @@ -13,6 +13,8 @@ import 'package:marco/view/employees/employee_profile_screen.dart'; import 'package:marco/helpers/services/tenant_service.dart'; import 'package:marco/view/tenant/tenant_selection_screen.dart'; import 'package:marco/controller/tenant/tenant_switch_controller.dart'; +import 'package:marco/view/appearance_screen.dart'; + @@ -310,8 +312,13 @@ Widget _switchTenantRow() { _menuItemRow( icon: LucideIcons.settings, label: 'Settings', + onTap: () { + Get.to(() => const AppearancePage()); + }, ), + SizedBox(height: spacingHeight), + _menuItemRow( icon: LucideIcons.badge_alert, label: 'Support',