Great question! When coming from iOS's colorWithDynamicProvider, it's totally reasonable to feel limited by Flutter's default ThemeData properties for one-off or custom dynamic colors. Here are the top approaches to handle this cleanly:

1. Use ThemeExtension for Reusable Custom Colors #

If you find yourself needing the same dynamic color across multiple widgets, extending the theme with a custom ThemeExtension is the most scalable and maintainable approach. It keeps all your color definitions centralized, just like iOS's dynamic provider but integrated with Flutter's theme system.

Step 1: Define a Custom Theme Extension #

Create a class that extends ThemeExtension to hold your custom colors:

class AppCustomColors extends ThemeExtension<AppCustomColors> {
  final Color specialCardBackground;
  final Color accentText;

  AppCustomColors({
    required this.specialCardBackground,
    required this.accentText,
  });

  @override
  ThemeExtension<AppCustomColors> copyWith({
    Color? specialCardBackground,
    Color? accentText,
  }) {
    return AppCustomColors(
      specialCardBackground: specialCardBackground ?? this.specialCardBackground,
      accentText: accentText ?? this.accentText,
    );
  }

  @override
  ThemeExtension<AppCustomColors> lerp(ThemeExtension<AppCustomColors>? other, double t) {
    if (other is! AppCustomColors) return this;
    return AppCustomColors(
      specialCardBackground: Color.lerp(specialCardBackground, other.specialCardBackground, t)!,
      accentText: Color.lerp(accentText, other.accentText, t)!,
    );
  }
}

Step 2: Add the Extension to Your Light/Dark Themes #

Configure your MaterialApp to include the extension in both light and dark themes:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    extensions: [
      AppCustomColors(
        specialCardBackground: Colors.white,
        accentText: const Color(0xFF2D2D2D),
      ),
    ],
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.dark),
    extensions: [
      AppCustomColors(
        specialCardBackground: const Color(0xFF121212),
        accentText: Colors.white,
      ),
    ],
  ),
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

Step 3: Access the Custom Colors in Widgets #

Retrieve the dynamic colors anywhere in your widget tree:

Card(
  color: Theme.of(context).extension<AppCustomColors>()?.specialCardBackground,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text(
      'One-of-a-kind dynamic text',
      style: TextStyle(
        color: Theme.of(context).extension<AppCustomColors>()?.accentText,
        fontSize: 18,
      ),
    ),
  ),
)

2. Direct Brightness Check for One-Off Colors #

If the color is only used in a single place, there's no need to clutter your theme with an extension. You can directly check the current theme brightness and return the appropriate color:

Option A: Use Theme.of(context).brightness #

Container(
  width: 200,
  height: 200,
  color: Theme.of(context).brightness == Brightness.dark 
      ? const Color(0xFF000000) 
      : const Color(0xFFFFFFFF),
)

Option B: Use MediaQuery #

You can also get the system brightness directly via MediaQuery:

Text(
  'Dynamic text color',
  style: TextStyle(
    color: MediaQuery.of(context).platformBrightness == Brightness.dark 
        ? Colors.white 
        : Colors.black,
  ),
)

Which Approach Should You Choose? #

• Use ThemeExtension if the dynamic color is used across multiple widgets or screens. It keeps your code DRY and makes it easy to update colors globally.
• Use direct brightness checks for one-off colors where adding an extension would be overkill.

内容的提问来源于stack exchange，提问作者ximmyxiao