fix: update functionality switch between themes after migrate to `wid…

…getbook`
pactus-project · Jan 10, 2025 · 48083c3 · 48083c3
1 parent 99d0370
commit 48083c3
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 119 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -5,6 +5,7 @@ import 'package:gui/src/core/constants/configurations.dart';
 import 'package:gui/src/core/router/app_router.dart';
 import 'package:gui/src/core/utils/gen/localization/codegen_loader.g.dart';
 import 'package:gui/src/features/main/theme/bloc/theme_bloc.dart';
+import 'package:pactus_gui_widgetbook/app_styles.dart';
 import 'src/features/main/language/presentation/bloc/language_bloc.dart';
 
 void main() async {
@@ -44,7 +45,15 @@ class PactusGuiApp extends StatelessWidget {
                 debugShowCheckedModeBanner: false,
                 routerConfig: routerConfig,
                 title: 'Pactus Gui App',
-                theme: themeState.themeData,
+                theme: FluentThemeData.light().copyWith(
+                  extensions: AppThemeData.lightExtensions,
+                  typography: AppThemeData.typography,
+                ),
+                themeMode: themeState.themeMode,
+                darkTheme: FluentThemeData.dark().copyWith(
+                  extensions: AppThemeData.darkExtensions,
+                  typography: AppThemeData.typography,
+                ),
                 localizationsDelegates: context.localizationDelegates,
                 supportedLocales: AppConfigs.supportedLocales,
                 locale: languageState.selectedLanguage.value,

diff --git a/lib/src/core/common/widgets/theme_switcher.dart b/lib/src/core/common/widgets/theme_switcher.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:gui/src/core/common/colors/app_colors.dart';
-import 'package:gui/src/core/enums/theme_modes.dart';
 import 'package:gui/src/core/utils/gen/assets/assets.gen.dart';
 import 'package:gui/src/features/main/theme/bloc/theme_bloc.dart';
 
@@ -18,69 +17,73 @@ class ThemeSwitcher extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final isLightTheme = theme.brightness == Brightness.light;
-    const duration = Duration(milliseconds: 200);
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        AnimatedOpacity(
-          curve: Curves.easeIn,
-          opacity: isLightTheme ? 0.0 : 1.0,
-          duration: duration,
-          child: SvgPicture.asset(
-            Assets.icons.icLightMode,
-          ),
-        ),
-        // Switch
-        GestureDetector(
-          onTap: () {
-            context.read<ThemeBloc>().add(
-                  ThemeChanged(
-                    theme: isLightTheme ? ThemeModes.dark : ThemeModes.light,
-                  ),
-                );
-          },
-          child: AnimatedContainer(
-            margin: EdgeInsets.symmetric(horizontal: 4),
-            width: 40, // Total width of the switch
-            height: 20, // Total height of the switch
-            duration: duration * 2,
-            decoration: BoxDecoration(
-              color: Colors.transparent,
-              borderRadius: BorderRadius.circular(10),
-              border: Border.all(
-                color: AppColors.primaryDark,
+    return BlocBuilder<ThemeBloc, ThemeState>(
+      builder: (context, themeState) {
+        const duration = Duration(milliseconds: 200);
+        final isLightTheme = themeState.themeMode == ThemeMode.light;
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            AnimatedOpacity(
+              curve: Curves.easeIn,
+              opacity: isLightTheme ? 0.0 : 1.0,
+              duration: duration,
+              child: SvgPicture.asset(
+                Assets.icons.icLightMode,
               ),
             ),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 3),
-              child: AnimatedAlign(
-                duration: Duration(milliseconds: 100),
-                alignment:
-                    isLightTheme ? Alignment.centerRight : Alignment.centerLeft,
-                child: Container(
-                  width: 14, // Thumb width
-                  height: 14, // Thumb height
-                  decoration: BoxDecoration(
+            // Switch
+            GestureDetector(
+              onTap: () {
+                context.read<ThemeBloc>().add(
+                      ThemeChanged(
+                        theme: isLightTheme ? ThemeMode.dark : ThemeMode.light,
+                      ),
+                    );
+              },
+              child: AnimatedContainer(
+                margin: EdgeInsets.symmetric(horizontal: 4),
+                width: 40, // Total width of the switch
+                height: 20, // Total height of the switch
+                duration: duration * 2,
+                decoration: BoxDecoration(
+                  color: Colors.transparent,
+                  borderRadius: BorderRadius.circular(10),
+                  border: Border.all(
                     color: AppColors.primaryDark,
-                    borderRadius: BorderRadius.circular(7),
                   ),
                 ),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 3),
+                  child: AnimatedAlign(
+                    duration: Duration(milliseconds: 100),
+                    alignment: isLightTheme
+                        ? Alignment.centerRight
+                        : Alignment.centerLeft,
+                    child: Container(
+                      width: 14, // Thumb width
+                      height: 14, // Thumb height
+                      decoration: BoxDecoration(
+                        color: AppColors.primaryDark,
+                        borderRadius: BorderRadius.circular(7),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            // Sun icon (right side)
+            AnimatedOpacity(
+              curve: Curves.easeIn,
+              opacity: isLightTheme ? 1.0 : 0.0,
+              duration: duration,
+              child: SvgPicture.asset(
+                Assets.icons.icDarkMode,
               ),
             ),
-          ),
-        ),
-        // Sun icon (right side)
-        AnimatedOpacity(
-          curve: Curves.easeIn,
-          opacity: isLightTheme ? 1.0 : 0.0,
-          duration: duration,
-          child: SvgPicture.asset(
-            Assets.icons.icDarkMode,
-          ),
-        ),
-      ],
+          ],
+        );
+      },
     );
   }
 }
diff --git a/lib/src/core/enums/theme_modes.dart b/lib/src/core/enums/theme_modes.dart
diff --git a/lib/src/features/main/theme/bloc/theme_bloc.dart b/lib/src/features/main/theme/bloc/theme_bloc.dart
@@ -1,27 +1,21 @@
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:gui/src/core/enums/theme_modes.dart';
-import 'package:pactus_gui_widgetbook/app_styles.dart';
 
 part 'theme_event.dart';
 part 'theme_state.dart';
 
 class ThemeBloc extends Bloc<ThemeEvent, ThemeState> {
   ThemeBloc()
       : super(
-          ThemeState.initial(AppThemeData.lightTheme()),
+          ThemeState.initial(ThemeMode.light),
         ) {
     on<ThemeChanged>(_onThemeChanged);
   }
 
   void _onThemeChanged(ThemeChanged event, Emitter<ThemeState> emit) {
-    final isLightTheme = event.theme == ThemeModes.light;
-
-    final themeData =
-        isLightTheme ? AppThemeData.lightTheme() : AppThemeData.darkTheme();
-
+    final toggleThemeMode=event.theme==ThemeMode.light?ThemeMode.dark:ThemeMode.light;
     emit(
-      ThemeState.initial(themeData),
+      ThemeState.initial(event.theme),
     );
   }
 }
diff --git a/lib/src/features/main/theme/bloc/theme_event.dart b/lib/src/features/main/theme/bloc/theme_event.dart
@@ -4,5 +4,5 @@ abstract class ThemeEvent {}
 
 class ThemeChanged extends ThemeEvent {
   ThemeChanged({required this.theme});
-  final ThemeModes theme;
+  final ThemeMode theme;
 }
diff --git a/lib/src/features/main/theme/bloc/theme_state.dart b/lib/src/features/main/theme/bloc/theme_state.dart
@@ -1,10 +1,10 @@
 part of 'theme_bloc.dart';
 
 class ThemeState {
-  ThemeState._({required this.themeData});
+  ThemeState._({required this.themeMode,});
 
-  factory ThemeState.initial(FluentThemeData themeData) {
-    return ThemeState._(themeData: themeData);
+  factory ThemeState.initial(ThemeMode themeMode) {
+    return ThemeState._(themeMode: themeMode);
   }
-  final FluentThemeData themeData;
+  final ThemeMode themeMode;
 }
diff --git a/lib/src/features/main/theme/presentation/widgets/theme_selector.dart b/lib/src/features/main/theme/presentation/widgets/theme_selector.dart
diff --git a/lib/src/features/password/presentation/screen/password_page.dart b/lib/src/features/password/presentation/screen/password_page.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:gui/src/core/common/widgets/theme_switcher.dart';
 import 'package:gui/src/core/router/route_name.dart';
 
 class PasswordPage extends StatelessWidget {
@@ -15,6 +16,7 @@ class PasswordPage extends StatelessWidget {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
+            ThemeSwitcher(),
             fromRegistrationRoute
                 ? MaterialButton(
                     onPressed: () {

diff --git a/lib/src/features/splash_screen/presentation/screen/home_page.dart b/lib/src/features/splash_screen/presentation/screen/home_page.dart
@@ -4,7 +4,6 @@ import 'package:gui/src/core/common/widgets/theme_switcher.dart';
 import 'package:gui/src/core/common/widgets/toolbar_logo.dart';
 import 'package:gui/src/core/utils/gen/localization/locale_keys.g.dart';
 import 'package:gui/src/features/main/language/presentation/widget/language_widget.dart';
-import 'package:gui/src/features/main/theme/presentation/widgets/theme_selector.dart';
 import 'package:pactus_gui_widgetbook/app_styles.dart';
 
 class MyHomePage extends StatefulWidget {
@@ -47,7 +46,7 @@ class _MyHomePageState extends State<MyHomePage> {
               ),
             ),
             const SizedBox(height: 20),
-            const ThemeSelector(),
+            const ThemeSwitcher(),
             const SizedBox(height: 20),
             const LanguageSelector(), // Add the language selector here
           ],

diff --git a/lib/src/features/welcome/presentation/screen/welcome_page.dart b/lib/src/features/welcome/presentation/screen/welcome_page.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:gui/src/core/router/route_name.dart';
-import 'package:gui/src/features/main/theme/presentation/widgets/theme_selector.dart';
 
 class WelcomePage extends StatelessWidget {
   const WelcomePage({super.key});