Flutter 中使用 Color 的最优方案
在 Flutter 中使用 Color 的最优方案,核心是统一管理 + 按需扩展,既保证代码可维护性,又兼顾灵活性。
1. 基础:统一颜色管理(核心方案)
避免在 UI 中硬写Color(0xFFxxxxxx),通过专门的类集中管理颜色,是最关键的优化。
推荐实现:创建AppColors工具类
class AppColors {// 主色调(品牌色)static const Color primary = Color(0xFF2196F3); // 蓝色主色static const Color primaryDark = Color(0xFF1976D2); // 主色深色static const Color primaryLight = Color(0xFFBBDEFB); // 主色浅色// 辅助色(功能色:成功、警告、错误等)static const Color success = Color(0xFF4CAF50);static const Color warning = Color(0xFFFFC107);static const Color error = Color(0xFFF44336);// 中性色(文本、背景、边框等)static const Color textPrimary = Color(0xFF333333); // 主要文本static const Color textSecondary = Color(0xFF666666); // 次要文本static const Color bgMain = Color(0xFFFFFFFF); // 主背景static const Color border = Color(0xFFE0E0E0); // 边框色
}
使用场景:UI 中直接调用,如 Text("内容", style: TextStyle(color: AppColors.textPrimary)),后续修改颜色只需改AppColors,无需全局搜索。