Flutter中如何根据深色/浅色主题设置容器对应背景颜色?
Flutter Container 深浅模式背景色适配方案
- 首先提前定义好全局深浅两套配色常量
const kLightColor = Color(0xFFFFFFFF); // 自定义浅色背景色 const kDarkColor = Color(0xFF121212); // 自定义深色背景色
- 调整你提供的Container代码,需要先去掉
decoration的const修饰(动态值不能用const修饰会报错),通过判断当前系统主题动态匹配颜色即可,修改后的代码如下:
Container( padding: const EdgeInsets.all(kDefaultPadding), decoration: BoxDecoration( // ), child: ... , )
如果你已经在项目中配置了全局
ThemeData主题,也可以直接复用主题内的预设颜色,更便于全局统一管理配色:
// 全局主题配置示例 ThemeData lightTheme = ThemeData( brightness: Brightness.light, // 可以直接使用自带属性或者自定义扩展字段存储背景色 scaffoldBackgroundColor: kLightColor, ); ThemeData darkTheme = ThemeData( brightness: Brightness.dark, scaffoldBackgroundColor: kDarkColor, ); // Container中调用方式 color: Theme.of(context).scaffoldBackgroundColor,
内容的提问来源于stack exchange,提问作者Jitan Gupta
相关产品推荐
相关产品推荐

