新闻详情

新闻详情

首页 / 资讯中心 / 详情

flutter使用getx实现主题色切换

发布时间:2026/9/2 17:36:16来源:尧图网络
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 未知; }
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

语音驱动自动化:基于GPT Voice构建智能开发助手实践 2026/9/2 17:35:26

语音驱动自动化:基于GPT Voice构建智能开发助手实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
AI基座采购渠道 2026/9/2 17:35:26

AI基座采购渠道

在刚刚落幕的全国教育装备展上,一位来自西部某市教育局信息中心的主任跟我抱怨,局里去年投入近千万引入的智慧课堂项目,如今变成了“数据坟墓”——学生行为数据、教学质量数据、资产数据散落在五个不同的业务系统里,彼此无法打通…

阅读更多 →
JVM内存模型与GC调优:CMS/G1/ZGC及Arthas实战指南 2026/9/2 17:35:26

JVM内存模型与GC调优:CMS/G1/ZGC及Arthas实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
数据分析从业者必看,10 个加速 python 数据分析的简单的小技巧 2026/9/2 17:35:26

数据分析从业者必看,10 个加速 python 数据分析的简单的小技巧

数据科学爱好者 Parul 在近日发表了一篇博文, 分享了在数据科学中非常实用的 10 个小技巧, 雷锋网 AI 科技评论随之将他所说的文章编译整理如下, 按此来说, 一些小的技巧在编程领域可能会非常有用, 在数据科学领域同样是这样的情况。 有的时候, 一点不算大的黑客行为能够节省时…

阅读更多 →
8-10代酷睿i5性能全解析:从日常办公到游戏创作,2024年是否还够用? 2026/9/2 17:35:26

8-10代酷睿i5性能全解析:从日常办公到游戏创作,2024年是否还够用?

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
Intel大小核架构深度解析:CPU-Z专项测试与超频实战指南 2026/9/2 17:32:25

Intel大小核架构深度解析:CPU-Z专项测试与超频实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞