Change Color values from List

Question

I'm trying to change color of Decoration in ListView builder from static List Map values, failed with _castError (type 'String' is not a subtype of type 'Color' in type cast).

What is the correct way to pass color values as Map in Dart with other types of data?

Map:

static const List<Map<String, String>> labels = [
    {
      'label': 'Water',
      'image': 'assets/images/ic_water.png',
      'colors': 'Color.fromARGB(255, 100, 216, 221)' tried //255, 100, 216, 221
    },
    {
      'label': 'Food',
      'image': 'assets/images/ic_food.png',
      'colors': 'Color.fromARGB(255, 100, 216, 221)'
    },];

Placement:

ListView.builder(
     ....
      return Container(
          decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color:  ConstantValues.labels[i]['colors']! as Color),
..
)```

JuniorBOMB · Accepted Answer · 2023-02-14T05:19:56.950

This is not working because your are parsing string type in color property which need Color type.

I suggest you should use hex value in map:

static const List<Map<String, String>> labels = [
    {
      'label': 'Water',
      'image': 'assets/images/ic_water.png',
      'colors': '64d8dd'
    },
    {
      'label': 'Food',
      'image': 'assets/images/ic_food.png',
      'colors': '64d8dd'
    },
];

Converting Hexcode to Color

special thanks to jossef

you can convert hexcolor code to Color type:

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

Usage:

Color color1 = HexColor("64d8dd");
Color color2 = HexColor("#64d8dd");
Color color3 = HexColor("#8864d8dd"); // If you wish to use ARGB format

You can use this in container like this,

ListView.builder(
     ....
      return Container(
          decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color:  HexColor(ConstantValues.labels[i]['colors']!) // make sure to import HexColor class
),
..
)

score 0 · Answer 2 · answered Feb 13 '23 at 09:16

The code coming from labels[i]['colors'] is of type String. It looks like this: 'Color.fromARGB(255, 100, 216, 221)'. This code is not evaluated, it's just an array of characters. You will need to try and find a different way to store your color. For example, use hexadecimal representation.

static const List<Map<String, String>> labels = [
    {
      'label': 'Water',
      'image': 'assets/images/ic_water.png',
      'colors': '0xffb74093'
    },
    {
      'label': 'Food',
      'image': 'assets/images/ic_food.png',
      'colors': '0xffb74093'
    },
];

Still, the colors are still represented as type String, not int as the Color class expects: https://api.flutter.dev/flutter/dart-ui/Color-class.html

You will need to make your code convert the string to a Color class, not just by using as.

ListView.builder(
    ...
    return Container(color: fromHex(labels[i]['colors']));

Where the fromHex function can be used from the following answer in SO: How do I use hexadecimal color strings in Flutter?

Change Color values from List

2 Answers2

Converting Hexcode to Color

You can use this in container like this,