How to change color dynamically in Flutter? - dart

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

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.

Answer 2

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 3

using final works for me.
final text_color = Colors.blue;
below is an example of how i use it in my class
class ColorTest extends StatefulWidget {
ColorTest();
#override
_ColorTest createState() => _ColorTest();
}
class _ColorTest extends State<ColorTest> {
#override
Widget build(
BuildContext context,
) {
final my_color_variable = Colors.red; // my_color_variable is now the color red
return new Container(
width: 100,
height: 100,
color: my_color_variable, // its red
);
}
}

Answer 4

I have found another solution.
In my app,
1. I want the color from the number A to change when I change this value with a slider.
2. But when I use the slider for the number B I want the color of B the change and that the number A is normal.
What have I done:
I have made constants for my text style:
const numbers = TextStyle(
fontFamily: 'B612 Mono',
fontSize: 18.0,
color: white,
);
const changeValueAB = TextStyle(
fontFamily: 'B612 Mono',
fontSize: 18.0,
color: cRelayMiddle,
backgroundColor: white,
);
I have made two booleans:
bool aActive = false;
bool bActive = false;
Then I made two functions:
void changeColorA() {
aActive = true;
bActive = false;
}
void changeColorB() {
aActive = false;
bActive = true;
}
Then when I change the values (I take now only as example value A.
B you just have to place the right void in it:
onPressed: () {
setState(() {
// your commands AND the void the change the booleans:
changeColorA();
});
},
Where the textcolor has to change I use:
Text(
'$inputNumberA',
style: aActive ? changeValueAB : numbers,),
It worked for me.

Answer 5

100% working and easy method
just create a variable
final Color myColor;
create a constructor to pass the color dynamically
required this.myColor
print the color
return Container(
color: myColor,
);
Pass the color as like - myColor: Colors.red

Answer 6

Start with 2 bracket pairs...
color: () (),
Then add anonymous function: (){} to the first brackets ...
color: ( (){} ) (),
Finally add code to it...
color: ( (){ if (true) return Colors.green;} ) (),
Done