Flutter中如何使用后端返回的文本格式颜色设置背景色

方案一：使用css_colors包（推荐） #

这个包内置了所有CSS标准颜色名称到Flutter Color的映射，无需手动维护颜色对应关系：

1. 在pubspec.yaml中添加依赖：

dependencies:
  css_colors: ^2.0.0

2. 修改你的函数：

import 'package:css_colors/css_colors.dart';

Color setBackgroundColor(String item) {
  var itemValue = item;
  for (var fieldItem in screenJson['fieldDetails']['fields']) {
    if (fieldItem['key'] == "issue_type") {
      var fieldDetails = fieldItem['option_values'];
      for (var option in fieldDetails) {
        if (option['value'] == itemValue) {
          final colorStr = option['color'];
          // 先解析十六进制颜色
          if (colorStr.startsWith('#')) {
            return Color(int.parse(colorStr.replaceAll('#', '0xFF')));
          }
          // 再解析颜色名称
          return CSSColors.get(colorStr) ?? Colors.green;
        }
      }
    }
  }
  return Colors.green;
}

方案二：手动实现颜色映射（无需额外包） #

如果不想引入第三方包，可以创建覆盖常用标准颜色的映射表，适配大部分后端可能返回的颜色值：

Color stringToColor(String colorStr) {
  // 处理十六进制颜色
  if (colorStr.startsWith('#')) {
    return Color(int.parse(colorStr.replaceAll('#', '0xFF')));
  }
  // 处理标准颜色名称（转为小写兼容大小写差异）
  final colorName = colorStr.toLowerCase();
  final colorMap = {
    'red': Colors.red,
    'green': Colors.green,
    'yellow': Colors.yellow,
    'blue': Colors.blue,
    'black': Colors.black,
    'white': Colors.white,
    'grey': Colors.grey,
    'gray': Colors.grey, // 兼容美式拼写
    'orange': Colors.orange,
    'purple': Colors.purple,
    'pink': Colors.pink,
    'teal': Colors.teal,
    'cyan': Colors.cyan,
    'amber': Colors.amber,
    'brown': Colors.brown,
    'indigo': Colors.indigo,
    'lime': Colors.lime,
    'magenta': Colors.magenta,
    'olive': Colors.olive,
    'violet': Colors.violet,
    'gold': Colors.gold,
    'navy': Colors.blue[900],
    // 可根据需求补充更多颜色
  };
  return colorMap[colorName] ?? Colors.green;
}

Color setBackgroundColor(String item) {
  var itemValue = item;
  for (var fieldItem in screenJson['fieldDetails']['fields']) {
    if (fieldItem['key'] == "issue_type") {
      var fieldDetails = fieldItem['option_values'];
      for (var option in fieldDetails) {
        if (option['value'] == itemValue) {
          return stringToColor(option['color']);
        }
      }
    }
  }
  return Colors.green;
}

注意事项 #

• 函数已兼容颜色名称的大小写差异，无需担心后端返回格式问题
• 若后端返回的颜色名称不在映射表或包的支持范围内，会默认返回Colors.green，可根据需求修改默认值

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