Best way to store two different color for element and change both when theme changed in flutter?

0

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?...

flutter
dart
themes
asked on Stack Overflow Jan 28, 2021 by Max Mayers

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0