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 小时前
从零打造 Linux 终端 MP3 播放器!用 C 语言实现音乐自由
linux·c语言·开发语言·前端·vscode·ci/cd·vim
weixin_425543734 小时前
TRAE CN3.3.25 构建的Electron简易DEMO应用
前端·typescript·electron·vite·nestjs
Mr Xu_5 小时前
【Vue3 + ECharts 实战】正确使用 showLoading、resize 与 dispose 避免内存泄漏
前端·信息可视化·vue·echarts
0思必得05 小时前
[Web自动化] Selenium设置相关执行文件路径
前端·爬虫·python·selenium·自动化
一起养小猫5 小时前
Flutter for OpenHarmony 进阶:体育计分系统与数据持久化深度解析
flutter·harmonyos
雯0609~5 小时前
hiprint:实现项目部署与打印1-官网提供普通html版本
前端·html
不绝1916 小时前
UGUI——进阶篇
前端
ujainu6 小时前
Flutter + OpenHarmony 游戏开发进阶:主菜单架构与历史最高分持久化
flutter·游戏·架构·openharmony
Exquisite.6 小时前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
STCNXPARM6 小时前
Linux camera之V4L2子系统详解
android·linux·camera·v4l2架构