How to change color dynamically in Flutter?

Question

I would like to dynamically change color to some elements. Is there a way to get colors using a variable? Something like

Colors[myvar] where myvar = "green"

Answer 1

1. Using a Function

You could use functions with a Color parameter, i.e., the type of the input parameter would be Color. For example, in a simple widget:

Container buildContainer({Color color}) {
  return Container(
    color: color,
  );
}

In this block, we specified the return type as being the widget Container class. And we've also specified a named parameter called color, which takes a Color type. Later, if we wish to call this function we would do it like this (you might need to replace the ; for a ,):

buildContainer(color: Colors.red);

2. final vs const

I still think the question has insufficient description, but, if this answer above didn't solve it, I suspect this other StackOverflow question might be of help.

As for the keyword final, it is used when you want to declare constants inside (custom) widgets. That's because widgets will need constants defined at runtime, not at compile-time, like const. Otherwise, whenever a widget is destroyed and rebuilt, it wouldn't know how to properly do it if the constant was related to something that happened during runtime. As per the docs:

If you never intend to change a variable, use final or const, either instead of var or in addition to a type. A final variable can be set only once; a const variable is a compile-time constant. (Const variables are implicitly final.) A final top-level or class variable is initialized the first time it’s used.

3. Using a Class

For example, another way of doing the same thing I mentioned above, but now creating a new class for a new widget, instead of returning modifications on a widget with a function is:

class CustomContainer extends StatelessWidget {
  final Color customColor;

  CustomContainer({this.customColor});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 10.0,
        width: 10.0,
        color: customColor,
      ),
    );
  }
}

Answer 2

What you can do is have a list of colors that you want like this -

    static const List<_MyColor> myBgColors = const <_MyColor>[
     const _MyColor(null, 'Clear'),
     const _MyColor(const Color(0xFFFFC100), 'Orange'),
     const _MyColor(const Color(0xFF91FAFF), 'Light Blue'),
     const _MyColor(const Color(0xFF00D1FF), 'Cyan'),
     const _MyColor(const Color(0xFF00BCFF), 'Cerulean'),
     const _MyColor(const Color(0xFF009BEE), 'Blue'),
  ];

Here _MyColor is a class like -

class _MyColor {
  const _MyColor(this.color, this.name);

  final Color color;
  final String name;
}

You can then use this list to access the colors in view you want.

Hope this helps.