Flutter: Add custom color to existing theme-CodePudding

I am using Flutters built-in themes like this:

 return MaterialApp(
          theme: ThemeData.light().copyWith(
            primaryColor: const Color(0xFF5E975A),
            bottomAppBarColor: const Color(0xff282828),
            // ... And so on
          ),

As you can see I am modifying the existing theme with copyWith. Now let's say I want a certain button to always have the Color(0xFFFF0000). Is there a way to add a new key to the existing theme?

Something like this:

ThemeData.light().copyWith(
            ...
          ).addKey(myCustomColor: const Color(0xFFFF0000))

If not, what is the best-practice way to define my custom color? I feel like just declaring a global static variable is not the intended way to implement this.

CodePudding user response：

I am still finding the best practice way of defining ThemeData. For now, I have already used 2 ways to achieve the custom colors:

1 Use Extension

// use it with "Theme.of(context).myCustomColor"
extension CustomThemeDataExt on ThemeData {
  Color get myCustomColor {
    if(brightness == Brightness.light){
      return Color(0xFFFF0000);
    } else {
      ...
    }
  }
  ...
}

...

2 Define a custom theme

// use it with "CustomTheme.of(context).myCustomColor"
class CustomTheme {
  final BuildContext context;

  const CustomTheme(this.context);

  static CustomTheme of(BuildContext context) => CustomTheme(context);

  Color get myCustomColor {
    if(Theme.of(context).brightness == Brightness.light){
      return Color(0xFFFF0000);
    } else {
      ...
    }
  }
}

Both need to import the relative file.