将 API 颜色值（“#1db8ce”或“White”）转换为实际 RGB 颜色答案

【问题标题】：Convert API color value ("#1db8ce" OR "White") to Actual RGB color将 API 颜色值（“#1db8ce”或“White”）转换为实际 RGB 颜色
【发布时间】：2022-01-16 23:40:17
【问题描述】：

如果 API 响应为 HEx 代码 "ProductColor": "#20d6ee"，我可以成功转换 API 颜色值，我在我的应用程序中通过以下方式将其转换为真实颜色：

 color: Color( int?.parse(colorListListVar.productColor.replaceAll('#','0xff') ?? "",), ),

colorListListVar.productColor 我的 API 响应值在哪里。

但是硬编码颜色（白色，黑色等）中的一些 API 颜色值。这导致我的应用程序崩溃。如果颜色值WHITE / BLACK 响应，我如何也显示真实颜色

API 响应：

{
"Status": 1,
"Message": "",
"ProductList": [
    {
        "CategoryId": "11",
        "CategoryName": "FURNITURES",
        "SubCategoryId": "38",
        "SubCategoryName": "Lamp Shades",
        "ColorList": [
            {
                "ProductId": "10363",
                "ProductColor": "#20d6ee"
            }
        ]
    },
  
  
    {
        "CategoryId": "11",
        "CategoryName": "FURNITURES",
        "SubCategoryId": "38",
        "SubCategoryName": "Lamp Shades",
        "ColorList": [
            {
                "ProductId": "10362",
                "ProductColor": "WHITE"
            }
        ]
    },
]

}

用户界面代码：

child: Row(
                                        children: [
                                          for (var colorListListVar in snapshot.data.productList[index].colorList)
                                            Container(
                                              margin: EdgeInsets.only(right: 2),
                                              padding: EdgeInsets.all(getProportionateScreenWidth(8)),
                                              height:getProportionateScreenWidth(40),
                                              width:getProportionateScreenWidth(40),
                                              decoration: BoxDecoration(
                                                color: Colors.transparent,
                                                //border: Border.all(color: kPrimaryColor),
                                                shape: BoxShape.circle,
                                              ),
                                              child: DecoratedBox(
                                                decoration: BoxDecoration(
                                                  color: Color( int?.parse(colorListListVar.productColor.replaceAll('#','0xff') ?? "",), ),
                                                  shape:BoxShape.circle,
                                                ),
                                              ),
                                            ),
                                          Spacer(),
                                        ],
                                      ),

【问题讨论】：

标签： json flutter dart

【解决方案1】：

为此，我建议您让您的后端开发人员将single(hex) 格式响应而不是color name 但对于这种情况，您可以使用if else 或ternary operator 来检查它们

if(colorListListVar.productColor == "white") {
return Colors.white
}

colorListListVar.productColor == "white" ? Colors.white : Color( int?.parse(colorListListVar.productColor.replaceAll('#','0xff') ?? "",), )

【讨论】：

【解决方案2】：

您可以使用该十六进制值创建一个 Color 对象，例如“#20d6ee”值，您可以这样做Color(0xff20d6ee)

【讨论】：

对不起，我不明白 color: Color( int?.parse(colorListListVar.productColor.replaceAll('#','0xff') ?? "",), ), 这就是我的意思 Color(0xff20d6ee) 但是如果我的 API 响应中颜色 = 白色怎么办？我需要放入 if-else 块{} 吗？
您可以创建一个映射，例如 final colorNames = {"WHITE": 0xFFFFFF, "BLACK": 0x000000} 并在使用颜色之前检查该值是否在 colorNames 映射中，如果是，请使用值而不是键