Flutter Material3 颜色是如何计算的?

huangapple go评论63阅读模式
英文:

Flutter material3 how are colors calculated?

问题

最近我开始使用带有"material3"选项的主题。我使用Figma生成器创建了一个颜色方案。我注意到组件的颜色略有不同。下拉菜单、卡片和页面标题都有不同的颜色。更有趣的是,这些颜色在我的颜色方案中并不存在。出于某种原因,我需要获取对话框背景所使用的确切颜色。这些颜色是如何创建或计算的?

编辑:
例如,我的对话框的背景颜色是"E4EDF7",这在我的颜色方案中不存在。我在源代码中进行了一些搜索,评论中提到它使用高程和surfaceTint来获取颜色。不幸的是,我没有找到具体的实现方法。

下拉菜单是另一种颜色,在我的情况下是"E9EFF7"。

颜色方案:

const ColorScheme lightColorScheme = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF0061A4),
    onPrimary: Color(0xFFFFFFFF),
    primaryContainer: Color(0xFFD1E4FF),
    onPrimaryContainer: Color(0xFF001D36),
    secondary: secondairyLight,
    onSecondary: Color(0xFFFFFFFF),
    secondaryContainer: Color(0xFFD9E2FF),
    onSecondaryContainer: Color(0xFF001945),
    tertiary: Color(0xFF006494),
    onTertiary: Color(0xFFFFFFFF),
    tertiaryContainer: Color(0xFFCBE6FF),
    onTertiaryContainer: Color(0xFF001E30),
    error: Color(0xFFBA1A1A),
    errorContainer: Color(0xFFFFDAD6),
    onError: Color(0xFFFFFFFF),
    onErrorContainer: Color(0xFF410002),
    background: Color(0xFFFDFCFF),
    onBackground: Color(0xFF1A1C1E),
    outline: Color(0xFF73777F),
    onInverseSurface: Color(0xFFF1F0F4),
    inverseSurface: Color(0xFF2F3033),
    inversePrimary: Color(0xFF9ECAFF),
    shadow: Color(0xFF000000),
    surfaceTint: Color(0xFF0061A4),
    outlineVariant: Color.fromARGB(255, 232, 232, 232), //用于分隔线
    scrim: Color(0xFF000000),
    surface: Color(0xFFFAF9FC),
    onSurface: Color(0xFF43474E), //文本(以及来自文本的图标颜色)
    surfaceVariant: Color(0xFFDFE2EB),
    onSurfaceVariant: Color(0xFF43474E)
);

希望这对你有所帮助。

英文:

Recently I started using a theme with the material3 option.` I created a colorscheme using the Figma generator. I noticed components have a slightly different color. Dropdowns, cards and pagetitles are all a different color. What is more interesting, these colors do not occur in my colorscheme. For some reason I need to get the exact color used for dialog backgrounds. How are these colors created or calculated?

EDIT:
For example, the background color of my dialogs is E4EDF7, which does not occur in my colour scheme. I did some searching in de source and comments say it uses the elevation and sufaceTint to get the color. Unfortunately I could not found how it is done.

Dropdowns are another color. In my case E9EFF7.

Color scheme:

const ColorScheme lightColorScheme = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF0061A4),
    onPrimary: Color(0xFFFFFFFF),
    primaryContainer: Color(0xFFD1E4FF),
    onPrimaryContainer: Color(0xFF001D36),
    secondary: secondairyLight,
    onSecondary: Color(0xFFFFFFFF),
    secondaryContainer: Color(0xFFD9E2FF),
    onSecondaryContainer: Color(0xFF001945),
    tertiary: Color(0xFF006494),
    onTertiary: Color(0xFFFFFFFF),
    tertiaryContainer: Color(0xFFCBE6FF),
    onTertiaryContainer: Color(0xFF001E30),
    error: Color(0xFFBA1A1A),
    errorContainer: Color(0xFFFFDAD6),
    onError: Color(0xFFFFFFFF),
    onErrorContainer: Color(0xFF410002),
    background: Color(0xFFFDFCFF),
    onBackground: Color(0xFF1A1C1E),
    outline: Color(0xFF73777F),
    onInverseSurface: Color(0xFFF1F0F4),
    inverseSurface: Color(0xFF2F3033),
    inversePrimary: Color(0xFF9ECAFF),
    shadow: Color(0xFF000000),
    surfaceTint: Color(0xFF0061A4),
    outlineVariant: Color.fromARGB(255, 232, 232, 232), //For divider
    scrim: Color(0xFF000000),
    surface: Color(0xFFFAF9FC),
    onSurface: Color(0xFF43474E), //Text (and icons if color from text)
    surfaceVariant: Color(0xFFDFE2EB),
    onSurfaceVariant: Color(0xFF43474E)
);

答案1

得分: 1

我之前已经在这里尝试回答这个问题:https://stackoverflow.com/a/75391246/16569443

基本上,除了颜色方案之外,Material3根据高程使用相同颜色的不同不透明度。
参考:
设计文档:https://m3.material.io/styles/elevation/tokens#61fc2883-15c8-439a-bea6-b24bb307146b
实现映射:https://github.com/flutter/flutter/blob/100cf21e27d82a881771fcf4934a3275fcada5f8/packages/flutter/lib/src/material/elevation_overlay.dart#L165

这对对话框/下拉框等有什么影响?
许多Flutter小部件内部使用名为'Material'的小部件。此小部件依赖于高程以提供表面色调。https://github.com/flutter/flutter/blob/fda9ecfef76b57ae459675fdf262342a77c2c6ba/packages/flutter/lib/src/material/material.dart#L502

因为这些颜色在运行时为每个颜色方案生成,所以您不会找到颜色引用。再次提醒,如果只更改不透明度,为什么会有不同的颜色呢?正如您所看到的,这里调用了Color.alphaBlend方法,这会创建一种颜色,其不透明度为1,类似于相同颜色。

英文:

I have tried answering this question previously as well here https://stackoverflow.com/a/75391246/16569443

Basically apart from color scheme, material3 works with different opacity of same color based on elevation.
Ref.
Design doc: https://m3.material.io/styles/elevation/tokens#61fc2883-15c8-439a-bea6-b24bb307146b
Implementation map: https://github.com/flutter/flutter/blob/100cf21e27d82a881771fcf4934a3275fcada5f8/packages/flutter/lib/src/material/elevation_overlay.dart#L165

How does it affects dialogs/dropdown etc?
Many of the flutter widgets used a widget internally called 'Material'. This widget is dependent on elevation to provide surface tint. https://github.com/flutter/flutter/blob/fda9ecfef76b57ae459675fdf262342a77c2c6ba/packages/flutter/lib/src/material/material.dart#L502

Because these colors are generate at runtime for every color scheme, you won't find color references. Again, you might ask if only opacity is changed, why there is different color? As you may see, there is Color.alphaBlend method called, this creates a color which resembles same color with 1 opacity.

huangapple
  • 本文由 发表于 2023年4月10日 20:05:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75976958.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定