Change Colors with variable


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

Color Cols=“”;

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


You can do this :

Color cols=;

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 because I dont put a quote (")
Then I put quote in my json and I did it

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

in the print i have 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


You can do this :

Color cols=;

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 =;
      case "blue": { 
         _color =; 
      default: { 
         _color = Colors.yellow;  
   return _color;


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":},
    {"name": "yellow", "value": Colors.yellow},
    {"name": "blue", "value":},
    {"name": "green", "value":},

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

\\ this will return
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 = {
  "yellow": Colors.yellow,

String jsonColor = "red";
// assign 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

color: Color(HexColor.getColorFromHex(hexValue))