I'm try to understand how to store and change a two different color for button in light and dark theme:
/// light
ThemeData lightTheme() => ThemeData(
brightness: Brightness.light,
...
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: const Color(0xffffffff),
backgroundColor: const Color(0xff5063EE), // blue
),
),
);
/// dark
ThemeData darkTheme() => ThemeData(
brightness: Brightness.dark,
...
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: const Color(0xffffffff),
backgroundColor: const Color(0xff40A076), // green
),
),
);
When I change theme all it's fine, this button theme data applied for my button. But I have second TextButton with eg. orange color for light theme and X color for dark, now it's look like this:
/// first button
TextButton(
onPressed: () {},
child: Text("first button"),
),
/// in second button widget
TextButton(
onPressed: () {},
child: Text("second button"),
style: Theme.of(context).textButtonTheme.style.copyWith(
backgroundColor: MaterialStateProperty.resolveWith(
(states) => Color(0xffF99543), // orange. <= need to change depends on theme.
),
),
),
How to change second button color dynamically depend on my theme? Where to store this color for light and dark themes? What if I will have three different colors?...
User contributions licensed under CC BY-SA 3.0