Question 76530 in Flutter Question posted in
The official Flutter documentation can be found here.

Change Color values from List<Map<String, – Flutter

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),
..
)```
Tags:

2

Answers


  1. 0

    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?

    Login or Signup to reply.
  2. 0

    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
),
..
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search