Change Colors with variable

Hello,

Is it possible in flutter to change color with variable? if yes how can I do please
Thank you for your help

Color Cols=“Colors.red”;

Text(‘Cliquez ici’,textScaleFactor: 2,style: TextStyle(color: Cols)),

Hi,

You can do this :

Color cols= Colors.red;

Text(‘Cliquez ici’,textScaleFactor: 2,style: TextStyle(color: cols)),

Hello thank you for your anwser
The problem is now I have an error in my Json file in Color.blue because I dont put a quote (")
Then I put quote in my json and I did it

String cols = decoded[param][‘backgroundcolor’];
print(cols);
Color newColor = cols as Color;

in the print i have Colors.blue is ok
But in Colors newColor = cols as Color;

I have the error message below
type ‘String’ is not a subtype of type ‘Color’ in type cast

if you have a solution thank you

Hi,

You can do this :

Color cols= Colors.blue;

Text(‘Cliquez ici’,textScaleFactor: 2,style: TextStyle(color: cols)),

Hello Carl,
In your json you will encode colors with string values, “red”, “blue”… Then you need a function that takes a string and returns a Colors constant. You can implement it with a switch…case statement, one case for each encoded color. Then you will call this function passing the string from the json object to get back a proper Colors class constant.

Edit: something like the following function,

 Color getColor (String color) {
   var _color = Colors.white;  
   switch(color) {
      case "red": { 
         _color = Colors.red;
      } 
      break; 
  
      case "blue": { 
         _color = Colors.blue; 
      } 
      break; 
      
      default: { 
         _color = Colors.yellow;  
      }
      break; 
   } 
   return _color;
}

Hth

Hello Patrick your solution is very simple :wink: Thank you a lot Patrick

Hello Carl, you are welcome. Keep it stupid simple (kiss) is a pillar of programming. Fancy solutions often turns out to be counterproductive too-early optimizations, and you end up shooting your own foot. Alway aim at the simple way to go. There is plenty of time then to refactor and optimize when your projects get to the point you are not going to make big changes anymore.

I also have an approach which would be more scalable IMO.

  List<Map<String, dynamic>> allColors = [
    {"name": "red", "value": Colors.red},
    {"name": "yellow", "value": Colors.yellow},
    {"name": "blue", "value": Colors.blue},
    {"name": "green", "value": Colors.green},
  ];

allColors.firstWhere((element) => element["name"] == "red")["value"]; 

\\ this will return Colors.red.
1 Like

I like this approach @sakina, what do you think about a simplified version, using a plain map, like the following:

Map<String, dynamic> colors = {
  "red": Colors.red,
  "yellow": Colors.yellow,
  "blue": Colors.blue,
  "green": Colors.green
};
  

String jsonColor = "red";
// assign Colors.red to the flutterColor variable
Color flutterColor = colors[jsonColor];

yeah, even better! :slight_smile:

1 Like

use the below class to show color from hex.

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));

}

you can select any hex value as color as

Container(
color: Color(HexColor.getColorFromHex(hexValue))
)
2 Likes