除默认主题外,Flutter是否提供其他标准内置主题及Material配色?
Flutter 内置主题及Material颜色主题相关说明
除默认的Material浅色主题(ThemeData.light())外,Flutter框架本身预置了3套可直接使用的标准内置主题,无需引入任何第三方依赖:
ThemeData.dark():符合Material Design规范的标准深色模式主题,组件默认样式、文字对比度都适配暗黑场景的基础使用要求ThemeData.highContrastLight():浅色模式高对比度主题,专门适配系统开启高对比度无障碍设置的场景,文字、交互组件和背景的对比度满足最高等级无障碍标准ThemeData.highContrastDark():深色模式高对比度主题,对应深色场景下的高对比度无障碍适配
关于Material颜色相关的主题选项,框架没有直接预置几十套固定配色的成品主题,但提供了完整的工具链和内置色板,可以快速生成符合规范的自定义配色主题:
- 框架内置了完整的Material Design标准色板,所有官方定义的主色、色阶、强调色都封装在
Colors类中,比如Colors.indigo、Colors.orange等主色都自带100-900深浅梯度的色值、对应的强调色选项,可以直接取用 - 针对Material 3版本,可以直接调用
ColorScheme.fromSeed()方法,传入任意一个内置色值(或自定义色值)作为种子色,自动生成一整套包含主色、次色、表面容器色、错误态色、各类组件状态色的完整配色方案,直接传入ThemeData即可全局生效,不需要手动逐个配置组件样式 - 针对仍在使用Material 2的项目,可以直接给
ThemeData的primarySwatch参数传入内置的MaterialColor类型色值,快速生成同色系的全局主题。
举个最常用的自定义配色主题示例:
// 以靛蓝色为种子色生成Material 3标准主题 final ThemeData myIndigoTheme = ThemeData( useMaterial3: true, colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo), );
注意:不建议手动逐个修改组件颜色来做主题,基于官方提供的配色生成方法产出的主题,会自动适配所有官方Material组件的交互态、明暗状态样式,不会出现配色不统一、状态色缺失的问题。
内容的提问来源于stack exchange,提问作者ziad
相关产品推荐
相关产品推荐

