Flutter Android开发 梳理Google Material Design颜色体系

前言

做安卓开发(Kotlin语言),Flutter开发的人员应该都听说过谷歌一直推崇的Material Design,而Material Design Color是其推崇的颜色体系,具体来说,Material Design Color是一套旨在帮助设计师和开发者创建视觉吸引力和一致性界面的指南。它不仅包括了丰富的颜色选择,还提供了如何有效使用这些颜色的建议

正文

而我们深入了解MaterialDesign Color,会发现是一堆定义在Theme内的颜色(当然这些颜色是互相协调符合MD规范的颜色)

具体的,开发人员可以使用这些颜色,flutter用法如下

Color primaryColor = Theme.of(context).primaryColor;

同时在flutter3.3.0版本后,部分颜色需要这样访问

Theme.of(context).colorScheme.onError,同时不能被定义在const widget

不过初次接触可能会眼花撩乱,如下整理了这套颜色体系需要了解的内容


主色(Primary Color)

  • 定义:应用的主要颜色,广泛用于导航栏、按钮、链接和活动状态指示器。
  • 使用场景:用作界面中最显眼的颜色,代表品牌或应用的主题。

主色变体(Primary Color Variant)

  • 定义:主色的一个较深或较浅的版本。
  • 使用场景:在需要对主色进行强调或分层时使用,比如状态栏或者浮动按钮的背景。

辅色(Secondary Color)

  • 定义:用来补充主色的颜色,为UI提供更多色彩。
  • 使用场景:用于浮动操作按钮、选择控件、高亮部分等,可以帮助区分不同的界面元素或功能。

辅色变体(Secondary Color Variant)

  • 定义:辅色的一个较深或较浅的版本。
  • 使用场景:同主色变体,用于需要对辅色进行强调或分层的地方。

背景色(Background Color)

  • 定义:应用的背景色,通常是一个非常浅的颜色。
  • 使用场景:用于页面的背景,提供一个干净的画布,上面可以放置其他颜色和元素。

表面色(Surface Color)

  • 定义:用于材料表面(如卡片、菜单和弹窗)的颜色。
  • 使用场景:创建阴影和深度效果,以区分应用中的各个界面层次。

错误色(Error Color)

  • 定义:用来指示错误或需要用户注意的颜色,通常是红色或其变体。
  • 使用场景:表单验证、失败消息提示等,引起用户注意。

在颜色之上(On Colors)

  • 定义:指的是在主色、辅色、背景色、表面色或错误色之上使用的颜色,通常是用来确保足够的对比度,比如文字和图标。
  • 使用场景 :例如,onPrimary用于主色上的文字和图标,onSecondary用于辅色上的文字和图标,以此类推。
相关推荐
橙子家4 小时前
浏览器缓存之【基础键值存储】:Local storage 和 Session storage
前端
星星在线6 小时前
MusicFree:一个「All in One」的个人音乐服务器,让听歌回归简单
前端·后端
IT_陈寒7 小时前
Redis的SETNX并发问题让我加了三天班
前端·人工智能·后端
demo007x7 小时前
Docling 文档转换以及技术架构分析
前端·后端·程序员
京东云开发者8 小时前
京东市民服务又“上新”!这次是黑龙江“龙易办”
前端
袋鱼不重9 小时前
我的神奇同事,AI 用多了居然写了个 Open In Codex
前端·后端·ai编程
Fireworks9 小时前
深入vue3源码解读 -- 1、响应式的基础概念
前端
程序员黑豆9 小时前
JDK 下载安装与配置详细教程
java·前端·ai编程
hunterandroid9 小时前
文件存储:内部存储与外部存储
前端
NorBugs10 小时前
飞机大战 Low 版 (Made in AI)
前端