How to pass variable content to a parameter value in dart/flutter?

Question

I may be missing something obvious, but I'm having trouble passing a variable to a parameter or widget in flutter/dart. For example, let's say I have some variable:

String col = 'red';

and I want to pass this to a color parameter to get the equivalent of

color: Colors.red

The difficult thing is that any way I try to pass the value ends up passing a string (which isn't accepted), including trying to pass just the value of col directly or trying to build a function that returns Colors.col.

I think what I need is something like a function like

setColor(String str) {
    return Colors.str;
  }

but, as you might expect, this returns "The getter 'str' isn't defined for the type 'Colors'." (And similarly for:

setColor(String str) {
    return Colors.$str;
}

I know one option is to create a function using a bunch of if's, like

setColor(String str) {
 if (str==red) return Colors.red;
 if (str==blue) return Colors.blue;
 if (str==green) return Colors.green;
etc.
}

but I'd prefer a more elegant option if one is available.

EDIT: It looks like this isn't quite as easy as I'd hoped (see answers and comments to answers below).

Solution

The library Supercharged is your best solution. You can try it this way (Hex text or HTML color):

"#ff00ff".toColor();  // pink
"ff0000".toColor();   // red
"00f".toColor();      // blue
"red".toColor();      // red (HTML color name)
"deeppink".toColor(); // deep pink (HTML color name)

Of course, this function depends on extension. Extension methods, introduced in Dart 2.7.

Edit:

extension MainAxisAlignmentExtension on String {
  MainAxisAlignment get mainAxis {
    switch (this.toUpperCase()) {
      case "BETWEEN":
        return MainAxisAlignment.spaceBetween;
      case "AROUND":
        return MainAxisAlignment.spaceAround;
      case "EVENLY":
        return MainAxisAlignment.spaceEvenly;
      case "CENTER":
        return MainAxisAlignment.center;
      case "START":
        return MainAxisAlignment.start;
      case "END":
        return MainAxisAlignment.end;
      default:
        return MainAxisAlignment.start;
    }
  }
}

print("Between".mainAxis);
print("AROUND".mainAxis);

Comments

[Mik]

This doesn't quite do what I need, I don't think. In general, I want to be able to define a (stateless) widget that takes a few parameters, and then uses these parameters to build itself. For example, I want to be able to call Widget(col: 'red') and then have it build a red version of itself with components that depend on the input. (Thus I could have it include widgets that have different numerical values of the same color - red[800], red[600], etc.) I hope this clarifies.

[CoderUni]

@Mik it is also answered above in Then you can pass it to a widget as an argument: Hope this helps :)

[Mik]

I don't quite follow here. If the variable col can take multiple values ("red", "blue", etc.), I don't see how this can pass this value without knowing what it is ahead of time.

[Shubham Gupta]

You will actually need a mechanism to convert the color as flutter doesn't know what is "red".So what I meant was instead of passing red you can pass hex codes of color and use the function to convert it to color. If you want to continue using "red", "green", what you can do is make a Map<String, Color> like {"red":Colors.red} and you will be good to go.

[Mik]

Right, but in this case I'll need to have individual variable definitions for each possible value of the color String, correct? Thus I need "if col==red then Color redColor=Colors.red; if col==blue then Color redColor=Colors.blue; etc.", don't I? (In this case I can create a function that does what I need, but I'm hoping to avoid this.) Thanks

[CoderUni]

@Mik As far as I know, there is no possible way to avoid what you are trying to avoid. In this case, you can use a switch statement to make your code cleaner and easier to read. Sorry about that.

[Mik]

This looks promising for the color case - I'll have to try it out. In general though, is there no way to pass values of string to parameters? For example, say I wanted to define a widget MyRow that was composed of a row such that the mainAxisAlignment value was determined by a parameter of MyRow. Similar to my example here, I'd want to pass something like "around" or "Between" to get MainAxisAlignment.spaceAround or .spaceBetween.

[CoderUni]

@Mik You're Welcome. Please mark this as an answer so that it can help people who are having a similar problem. Thanks. You can also help me by upvoting on this answer.

[Gauris Javier]

Well, following the same extension approach I edit my answer to achieve that, although you'll have to do your own snippets to it. Please check it out.

[Mik]

Thanks for the reply. I was just playing with SuperCharged and realized what you're referring to here, which is that this still required a function that contains an if clause for each case. I was hoping to avoid this, but it seems like this is the way to go.