Flutter 自习室 Color

本文已参与「新人创作礼」活动，一起开启掘金创作之路

ARGB32位颜色值

Color的创建

通过 32 位 颜色值

Color(0xFF42A5F5)

ARGB

Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5)

Color.fromARGB(255, 66, 165, 245)

RGBO

Color.fromRGBO(66, 165, 245, 1.0)

如果您在使用颜色时遇到问题，其中您的颜色似乎无法绘制，请检查以确保您指定的是完整的 8 个十六进制数字。 如果您只指定六个，则假定前两位数字为零，这意味着完全透明：

Colors

我们可以通过Colors快速的获取一种颜色

Colors.accents

一组配色板

Colors.amber

Colors.amberAccent

Colors.black

Colors.black12

Colors.black26

Colors.black38

Colors.black45

Colors.black54

Colors.black87

Colors.blue

Colors.blueAccent

Colors.blueGrey

Colors.brown

Colors.cyan

Colors.cyanAccent

Colors.deepOrange

Colors.deepOrangeAccent

Colors.deepPurple

Colors.deepPurpleAccent

Colors.green

Colors.greenAccent

Colors.grey

Colors.indigo

Colors.indigoAccent

Colors.lightBlue

Colors.lightBlueAccent

Colors.lightGreen

Colors.lightGreenAccent

Colors.lime

Colors.limeAccent

Colors.orange

Colors.orangeAccent

Colors.pink

Colors.pinkAccent

Colors.primaries

Colors.purple

Colors.purpleAccent

Colors.red

Colors.redAccent

Colors.teal

Colors.tealAccent

Colors.transparent(透明)

Colors.white

Colors.white10

Colors.white12

Colors.white24

Colors.white30

Colors.white38

Colors.white54

Colors.white60

Colors.white70

Colors.yellow

Colors.yellowAccent

ColorSwatch

一种颜色的色板

MaterialAccentColor

定义一种强调色，分别有100 200 400 700,颜色的值和200相等。

MaterialAccentColor.value == MaterialAccentColor.shade200

MaterialColor

定义单一颜色，分别50 100 200 300 400 500 600 700 800 900,颜色值和500相等

MaterialColor.value == MaterialColor.shade500

CupertinoDynamicColor

属性

属性	类型	含义
color	Color	light模式正常对比度 基本界面亮度使用颜色
darkColor	Color	Dark模式正常对比度 基本界面亮度使用颜色
darkElevatedColor	Color	Dark模式 正常对比度 提升界面亮度 使用颜色
darkHighContrastColor	Color	Dark模式 高对比度 基本界面亮度使用颜色
elevatedColor	Color	light模式 正常对比度 提升界面亮度颜色
highContrastColor	Color	light模式高对比度 基本界面亮度颜色
highContrastElevatedColor	Color	light模式高对比度 提升界面亮度颜色
darkHighContrastElevatedColor	Color	dark模式高对比度 提升界面亮度颜色

构造方法

CupertinoDynamicColor()

创建BuildContext自动适应的颜色，所有属性必须初始化。

CupertinoDynamicColor.withBrightness()

创建一个自适应颜色，它根据给定的 BuildContext 的亮度（来自 MediaQueryData.platformBrightness 或 CupertinoThemeData.brightness）更改其有效颜色。 默认的有效颜色是颜色。

属性	值
color	color
elevatedColor	color
highContrastColor	color
highContrastElevatedColor	color
darkColor	darkColor
darkElevatedColor	darkColor
darkHighContrastColor	darkColor
darkHighContrastElevatedColor	darkColor

CupertinoDynamicColor.withBrightnessAndContrast

创建一个自适应颜色，它根据给定的 BuildContext 的亮度（来自 MediaQueryData.platformBrightness 或 CupertinoThemeData.brightness）更改其有效颜色。 默认的有效颜色是颜色。

属性	值
color	color
elevatedColor	color
highContrastColor	highContrastColor
highContrastElevatedColor	highContrastColor
darkColor	darkColor
darkElevatedColor	darkColor
darkHighContrastColor	darkHighContrastColor
darkHighContrastElevatedColor	darkHighContrastColor

根据黑暗模式自动切换颜色

CupertinoButton(
  color: const CupertinoDynamicColor.withBrightness(
    color: Colors.black,
    darkColor: Colors.white,
  ),
  child: const Text(
    "登录",
    style: TextStyle(
      color: CupertinoDynamicColor.withBrightness(
        color: Colors.white,
        darkColor: Colors.black,
      ),
    ),
  ),
  onPressed: () {},
)

必须在CupertinoApp内部才有效果

CupertinoDynamicColor.withBrightness在Text不起作用(这个不知道是不是bug)

主题色

CupertinoButton(
  color: CupertinoTheme.of(context).primaryColor,
  child: const Text("登录"),
  onPressed: () {},
)

通过 resolve 生成 CupertinoDynamicColor

CupertinoDynamicColor.resolve(CupertinoColors.darkBackgroundGray, context)

MaterialStateColor

定义一个 Color，它也是一个 MaterialStateProperty。

此类的存在是为了使具有 Color 值属性的小部件也接受 MaterialStateProperty 值。材质状态颜色属性表示取决于小部件的“交互状态”的颜色。此状态表示为一组 MaterialState，如 MaterialState.pressed、MaterialState.focused 和 MaterialState.hovered。

MaterialStateColor 只能与记录其支持的小部件一起使用，例如 TimePickerThemeData.dayPeriodColor。

要使用 MaterialStateColor，您可以：

创建 MaterialStateColor 的子类并实现抽象的 resolve 方法。 使用 MaterialStateColor.resolveWith 并传入一个回调，该回调将用于解析给定状态下的颜色。 如果 MaterialStateColor 用于不支持解析 MaterialStatePropertys 的属性或参数，则其默认颜色值将用于所有状态。

要定义 const MaterialStateColor，您需要扩展 MaterialStateColor 并覆盖其解析方法。您还需要为超级构造函数提供一个 defaultValue，以便我们可以在编译时知道它的默认颜色是什么。

自定义 TimeDatePicker Theme

class CustomTimeDayPeriodColor extends MaterialStateColor {
  CustomTimeDayPeriodColor() : super(_defaultColor);

  static const int _defaultColor = 0xcafefeed;
  static const int _pressedColor = 0xdeadbeef;

  @override
  Color resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return const Color(_pressedColor);
    }
    return const Color(_defaultColor);
  }
}

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (context, child) {
    return TimePickerTheme(
      data: TimePickerTheme.of(context).copyWith(
        dayPeriodColor: CustomTimeDayPeriodColor(),
      ),
      child: child ?? Container(),
    );
  },
);