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 List<Color> _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 "未知"; }