flutter使用getx实现主题色切换

第一步实现 我们先封装好 themeController进行控制import package:flutter/material.dart; import package:get/get.dart; class ThemeController extends GetxController { // 主题模式system / light / dark final _themeMode ThemeMode.system.obs; ThemeMode get themeMode _themeMode.value; // 主题色种子 final _seedColor const Color(0xFF2196F3).obs; Color get seedColor _seedColor.value; void setThemeMode(ThemeMode mode) { _themeMode.value mode; Get.changeThemeMode(mode); } void setSeedColor(Color color) { _seedColor.value color; // 切换主题色后根据当前模式刷新对应主题 if (_themeMode.value ThemeMode.dark) { Get.changeTheme(_buildDarkTheme()); } else { Get.changeTheme(_buildLightTheme()); } } ThemeData _buildLightTheme() { return ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: _seedColor.value, brightness: Brightness.light, ), useMaterial3: true, ); } ThemeData _buildDarkTheme() { return ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: _seedColor.value, brightness: Brightness.dark, ), useMaterial3: true, ); } ThemeData get lightTheme _buildLightTheme(); ThemeData get darkTheme _buildDarkTheme(); }暗色和亮色 这是getx自带的ElevatedButton( onPressed: () themeController.setThemeMode(ThemeMode.dark), child: const Text(切换成暗黑), ), const SizedBox(width: 20), ElevatedButton( onPressed: () themeController.setThemeMode(ThemeMode.light), child: const Text(切换成亮色), ),实现多种颜色的主题色更改Wrap( spacing: 12, runSpacing: 12, children: _colors.map((color) { return Obx(() { final selected themeController.seedColor color; return GestureDetector( onTap: () themeController.setSeedColor(color), child: Container( width: 44, height: 44, decoration: BoxDecoration( color: color, shape: BoxShape.circle, border: Border.all( color: selected ? Colors.black : Colors.transparent, width: 3, ), ), child: selected ? const Icon(Icons.check, color: Colors.white, size: 24) : null, ), ); }); }).toList(), ), const SizedBox(height: 30), Obx( () Text( 当前主题色${_colorName(themeController.seedColor)}, style: Theme.of(context).textTheme.titleMedium, ), ), // 可选主题色 static const ListColor _colors [ Color(0xFF2196F3), // 蓝色 Color(0xFFF44336), // 红色 Color(0xFF4CAF50), // 绿色 Color(0xFFFF9800), // 橙色 Color(0xFF9C27B0), // 紫色 Color(0xFF795548), // 棕色 ]; String _colorName(Color color) { switch (color.value) { case 0xFF2196F3: return 蓝色; case 0xFFF44336: return 红色; case 0xFF4CAF50: return 绿色; case 0xFFFF9800: return 橙色; case 0xFF9C27B0: return 紫色; case 0xFF795548: return 棕色; } return 未知; }