Flutter中如何校验用户输入是否为有效颜色（支持命名色/HEX/RGB）？

Dart没有内置和浏览器一致的全量CSS颜色解析逻辑，我们可以通过正则匹配+标准色值枚举校验的组合，完全覆盖三类合法颜色场景（命名颜色、HEX值、RGB值），最终效果和参考的JavaScript函数完全一致，全程不需要引入任何外部依赖包。

核心实现逻辑 #

校验规则完全对齐浏览器的CSS颜色解析标准，覆盖所有常见合法格式：

• HEX格式：支持#fff、#ffffff、#ff0000ff这类带3/4/6/8位、含透明度的写法，忽略大小写
• RGB/RGBA格式：支持值之间的任意空格写法、整数/百分比取值、0-1区间的透明度值，额外校验RGB分量的取值范围不超上限
• 命名颜色：内置和CSS标准对齐的140+个通用颜色名集合，做大小写无关的匹配

可直接复用的实现代码 #

bool isColor(String strColor) {
  // 校验HEX格式
  final hexReg = RegExp(r'^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$');
  if (hexReg.hasMatch(strColor)) return true;

  // 校验RGB/RGBA格式
  final rgbReg = RegExp(r'^rgba?\(\s*(\d{1,3}|(?:\d{1,3}\.\d+|\.\d+)%)\s*,\s*(\d{1,3}|(?:\d{1,3}\.\d+|\.\d+)%)\s*,\s*(\d{1,3}|(?:\d{1,3}\.\d+|\.\d+)%)\s*(?:,\s*(0|1|0?\.\d+)\s*)?\)$');
  if (rgbReg.hasMatch(strColor)) {
    final match = rgbReg.firstMatch(strColor);
    final r = double.parse(match!.group(1)!.replaceAll('%', ''));
    final g = double.parse(match.group(2)!.replaceAll('%', ''));
    final b = double.parse(match.group(3)!.replaceAll('%', ''));
    final maxVal = strColor.contains('%') ? 100 : 255;
    return r <= maxVal && g <= maxVal && b <= maxVal;
  }

  // 校验CSS标准命名颜色
  const namedColors = {
    'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
    'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet',
    'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral',
    'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan',
    'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki',
    'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred',
    'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray',
    'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue',
    'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite',
    'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod',
    'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred',
    'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen',
    'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow',
    'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon',
    'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey',
    'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta',
    'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple',
    'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise',
    'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
    'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered',
    'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred',
    'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple',
    'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon',
    'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
    'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
    'tan', 'teal', 'thistle', 'tomato', 'transparent', 'turquoise', 'violet',
    'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen'
  };
  return namedColors.contains(strColor.toLowerCase());
}

使用注意点 #

这个实现的行为和参考的JS函数完全一致：仅判断输入字符串是否符合合法颜色格式，不负责将字符串转换为可直接渲染的Flutter Color对象。如果后续需要转换逻辑，可以在当前校验通过的基础上，补充对应格式的解析分支即可。

内容的提问来源于stack exchange，提问作者Coding Glass