Implement theme switching functionality with light/dark modes

Copilot · Jason-chen-coder · Copilot · commit 60ebc9fdfd15 · 2025-07-14T09:59:32.000Z
Co-authored-by: Jason-chen-coder &lt;53551357+Jason-chen-coder@users.noreply.github.com&gt;
diff --git a/lib/main.dart b/lib/main.dart
@@ -3,9 +3,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_easy_flow/pages/custom_flow_chart.dart';
 import 'package:flutter_easy_flow/pages/default_flow_chart.dart';
+import 'package:flutter_easy_flow/services/theme_service.dart';
+import 'package:provider/provider.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(
+    ChangeNotifierProvider(
+      create: (_) => ThemeService(),
+      child: const MyApp(),
+    ),
+  );
 }
 
 class MyApp extends StatelessWidget {
@@ -14,22 +21,17 @@ class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      debugShowCheckedModeBanner: false,
-      title: 'Flutter Flow',
-      theme: ThemeData(
-        hintColor: Colors.orange,
-        chipTheme: ChipThemeData(
-          backgroundColor: Colors.blueAccent, // 设置ActionChip的背景色
-          labelStyle: TextStyle(color: Colors.white), // 设置ActionChip的文本样式
-        ),
-        listTileTheme: ListTileThemeData(
-          selectedTileColor: Colors.blue[50],
-          selectedColor: Colors.blue,
-        ),
-        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue),
-      ),
-      home: const MyHomePage(),
+    return Consumer<ThemeService>(
+      builder: (context, themeService, child) {
+        return MaterialApp(
+          debugShowCheckedModeBanner: false,
+          title: 'Flutter Flow',
+          theme: ThemeService.lightTheme,
+          darkTheme: ThemeService.darkTheme,
+          themeMode: themeService.themeMode,
+          home: const MyHomePage(),
+        );
+      },
     );
   }
 }
@@ -60,6 +62,19 @@ class _MyHomePageState extends State<MyHomePage> {
     return Scaffold(
       appBar: AppBar(
         title: Text(_titles[_currentIndex]),
+        actions: [
+          Consumer<ThemeService>(
+            builder: (context, themeService, child) {
+              return IconButton(
+                icon: Icon(
+                  themeService.isDarkMode ? Icons.light_mode : Icons.dark_mode,
+                ),
+                onPressed: () => themeService.toggleTheme(),
+                tooltip: themeService.isDarkMode ? '切换到浅色主题' : '切换到深色主题',
+              );
+            },
+          ),
+        ],
       ),
       // drawer: Drawer(
       //   child: ListView(
diff --git a/lib/pages/code_editor_theme.dart b/lib/pages/code_editor_theme.dart
diff --git a/lib/pages/custom_flow_chart.dart b/lib/pages/custom_flow_chart.dart
@@ -132,11 +132,11 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                     width: 480,
                     height: double.infinity,
                     decoration: BoxDecoration(
-                      color: Color(0xffffffff),
+                      color: Theme.of(context).cardColor,
                     ),
                     child: Container(
                       width: 480,
-                      color: Colors.white,
+                      color: Theme.of(context).cardColor,
                       child: JsonEditor(
                         key: _jsonEditorKey,
                         onChanged: (value) {
@@ -147,6 +147,7 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                         enableValueEdit: false,
                         enableKeyEdit: false,
                         json: jsonData,
+                        themeColor: Theme.of(context).primaryColor,
                       ),
                     )),
                 Expanded(
@@ -192,7 +193,7 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                               child: ElevatedButton(
                                 style: ElevatedButton.styleFrom(
                                   padding: EdgeInsets.zero,
-                                  backgroundColor: Color(0xFFffffff),
+                                  backgroundColor: Theme.of(context).cardColor,
                                   shape: RoundedRectangleBorder(
                                     borderRadius: BorderRadius.circular(5),
                                   ),
@@ -203,7 +204,7 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                                 },
                                 child: Icon(
                                   Icons.cleaning_services_outlined,
-                                  color: const Color(0xFF8D8C8D),
+                                  color: Theme.of(context).iconTheme.color,
                                   size: 20,
                                 ),
                               ),
@@ -217,7 +218,7 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                               child: ElevatedButton(
                                 style: ElevatedButton.styleFrom(
                                   padding: EdgeInsets.zero,
-                                  backgroundColor: Color(0xFFffffff),
+                                  backgroundColor: Theme.of(context).cardColor,
                                   shape: RoundedRectangleBorder(
                                     borderRadius: BorderRadius.circular(5),
                                   ),
@@ -226,9 +227,9 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                                   dashboard.setZoomFactor(
                                       1.5 * dashboard.zoomFactor);
                                 },
-                                child: const Icon(
+                                child: Icon(
                                   Icons.add,
-                                  color: Color(0xFF8D8C8D),
+                                  color: Theme.of(context).iconTheme.color,
                                   size: 20,
                                 ),
                               ),
@@ -242,7 +243,7 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                               child: ElevatedButton(
                                 style: ElevatedButton.styleFrom(
                                   padding: EdgeInsets.zero,
-                                  backgroundColor: Color(0xFFffffff),
+                                  backgroundColor: Theme.of(context).cardColor,
                                   shape: RoundedRectangleBorder(
                                     borderRadius: BorderRadius.circular(5),
                                   ),
@@ -251,9 +252,9 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                                   dashboard.setZoomFactor(
                                       dashboard.zoomFactor / 1.5);
                                 },
-                                child: const Icon(
+                                child: Icon(
                                   Icons.remove,
-                                  color: Color(0xFF8D8C8D),
+                                  color: Theme.of(context).iconTheme.color,
                                   size: 20,
                                 ),
                               ),
@@ -267,15 +268,15 @@ class _CustomFlowChartState extends State<CustomFlowChart> {
                               child: ElevatedButton(
                                 style: ElevatedButton.styleFrom(
                                   padding: EdgeInsets.zero,
-                                  backgroundColor: Color(0xFFffffff),
+                                  backgroundColor: Theme.of(context).cardColor,
                                   shape: RoundedRectangleBorder(
                                     borderRadius: BorderRadius.circular(5),
                                   ),
                                 ),
                                 onPressed: dashboard.setFullView,
-                                child: const Icon(
+                                child: Icon(
                                   Icons.fullscreen,
-                                  color: Color(0xFF8D8C8D),
+                                  color: Theme.of(context).iconTheme.color,
                                   size: 20,
                                 ),
                               ),
diff --git a/lib/services/theme_service.dart b/lib/services/theme_service.dart
@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+class ThemeService extends ChangeNotifier {
+  static const String _themeKey = 'theme_mode';
+  
+  ThemeMode _themeMode = ThemeMode.light;
+  
+  ThemeMode get themeMode => _themeMode;
+  
+  bool get isDarkMode => _themeMode == ThemeMode.dark;
+  
+  ThemeService() {
+    _loadTheme();
+  }
+  
+  Future<void> _loadTheme() async {
+    final prefs = await SharedPreferences.getInstance();
+    final isDark = prefs.getBool(_themeKey) ?? false;
+    _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
+    notifyListeners();
+  }
+  
+  Future<void> toggleTheme() async {
+    _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_themeKey, _themeMode == ThemeMode.dark);
+    notifyListeners();
+  }
+  
+  static ThemeData get lightTheme {
+    return ThemeData(
+      brightness: Brightness.light,
+      primarySwatch: Colors.blue,
+      hintColor: Colors.orange,
+      chipTheme: const ChipThemeData(
+        backgroundColor: Colors.blueAccent,
+        labelStyle: TextStyle(color: Colors.white),
+      ),
+      listTileTheme: ListTileThemeData(
+        selectedTileColor: Colors.blue[50],
+        selectedColor: Colors.blue,
+      ),
+      colorScheme: ColorScheme.fromSwatch(
+        primarySwatch: Colors.blue,
+        brightness: Brightness.light,
+      ),
+      appBarTheme: const AppBarTheme(
+        backgroundColor: Colors.blue,
+        foregroundColor: Colors.white,
+        elevation: 4,
+      ),
+      scaffoldBackgroundColor: Colors.white,
+      cardColor: Colors.white,
+      iconTheme: const IconThemeData(
+        color: Color(0xFF8D8C8D),
+      ),
+    );
+  }
+  
+  static ThemeData get darkTheme {
+    return ThemeData(
+      brightness: Brightness.dark,
+      primarySwatch: Colors.blue,
+      hintColor: Colors.orangeAccent,
+      chipTheme: const ChipThemeData(
+        backgroundColor: Colors.blueAccent,
+        labelStyle: TextStyle(color: Colors.white),
+      ),
+      listTileTheme: ListTileThemeData(
+        selectedTileColor: Colors.blue[900],
+        selectedColor: Colors.blueAccent,
+      ),
+      colorScheme: ColorScheme.fromSwatch(
+        primarySwatch: Colors.blue,
+        brightness: Brightness.dark,
+      ),
+      appBarTheme: const AppBarTheme(
+        backgroundColor: Color(0xFF1E1E1E),
+        foregroundColor: Colors.white,
+        elevation: 4,
+      ),
+      scaffoldBackgroundColor: const Color(0xFF121212),
+      cardColor: const Color(0xFF1E1E1E),
+      iconTheme: const IconThemeData(
+        color: Colors.white70,
+      ),
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -42,6 +42,8 @@ dependencies:
   flutter_svg: ^2.0.5
   highlight: 0.7.0
   flutter_highlight: ^0.7.0
+  shared_preferences: ^2.2.2
+  provider: ^6.1.1
 dev_dependencies:
   flutter_test:
     sdk: flutter
diff --git a/test/widget_test.dart b/test/widget_test.dart
@@ -7,24 +7,47 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:provider/provider.dart';
 
 import 'package:flutter_easy_flow/main.dart';
+import 'package:flutter_easy_flow/services/theme_service.dart';
 
 void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
+  testWidgets('Theme switching test', (WidgetTester tester) async {
     // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
+    await tester.pumpWidget(
+      ChangeNotifierProvider(
+        create: (_) => ThemeService(),
+        child: const MyApp(),
+      ),
+    );
 
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
+    // Verify that the app starts with light theme
+    final materialApp = tester.widget<MaterialApp>(find.byType(MaterialApp));
+    expect(materialApp.themeMode, ThemeMode.light);
 
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
+    // Find and tap the theme toggle button
+    final themeToggleButton = find.byIcon(Icons.dark_mode);
+    expect(themeToggleButton, findsOneWidget);
+    
+    await tester.tap(themeToggleButton);
     await tester.pump();
 
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
+    // Verify the icon changed to light mode icon (indicating dark theme is active)
+    expect(find.byIcon(Icons.light_mode), findsOneWidget);
+  });
+
+  testWidgets('App title and navigation test', (WidgetTester tester) async {
+    // Build our app and trigger a frame.
+    await tester.pumpWidget(
+      ChangeNotifierProvider(
+        create: (_) => ThemeService(),
+        child: const MyApp(),
+      ),
+    );
+
+    // Verify that the app title shows correctly
+    expect(find.text('Flutter-EasyFlow'), findsOneWidget);
+    expect(find.byType(AppBar), findsOneWidget);
   });
 }
