迁移AccentColor:如何修改RadioListTile、SwitchListTile的颜色?
Flutter 2.5+ 全局替换accentColor适配表单组件方案
Flutter 2.5及以上版本废弃ThemeData的accentColor属性后,仅配置colorScheme.secondary无法覆盖所有原accentColor的生效场景,CheckboxListTile、SwitchListTile等组件的颜色需要在ThemeData中单独配置对应组件的全局主题参数,即可实现全App生效,无需逐个组件传参。
具体配置方式参考如下完整示例:
theme: ThemeData( primaryColor: const Color(0xFF4BD1FF), colorScheme: ColorScheme.fromSwatch().copyWith(secondary: const Color(0xFFD8A21B)), // 全局配置Checkbox、CheckboxListTile样式 checkboxTheme: CheckboxThemeData( fillColor: MaterialStateProperty.resolveWith((states) { // 选中状态使用自定义的secondary色值 if (states.contains(MaterialState.selected)) { return const Color(0xFFD8A21B); } // 其余状态保留系统默认样式 return null; }), ), // 全局配置Switch、SwitchListTile样式 switchTheme: SwitchThemeData( thumbColor: MaterialStateProperty.resolveWith((states) { if (states.contains(MaterialState.selected)) { return const Color(0xFFD8A21B); } return null; }), trackColor: MaterialStateProperty.resolveWith((states) { if (states.contains(MaterialState.selected)) { return const Color(0xFFD8A21B).withOpacity(0.5); } return null; }), ), // 其他同类型组件按需配置即可: // 全局配置Radio、RadioListTile样式 radioTheme: RadioThemeData( fillColor: MaterialStateProperty.resolveWith((states) { if (states.contains(MaterialState.selected)) { return const Color(0xFFD8A21B); } return null; }), ), // textTheme and others ),
如果后续需要统一修改色值,只需同步修改colorScheme.secondary和组件主题中绑定的色值即可,也可将自定义色值抽离为全局常量,减少重复修改成本。
内容的提问来源于stack exchange,提问作者David L
相关产品推荐
相关产品推荐

