英文:
Flutter ColorScheme CopyWith brightness not working
问题
在我的Flutter项目的app_theme.dart文件中,我有以下代码:
class AppTheme {
  static const primaryColor = Color.fromARGB(255, 106, 49, 185);
  static ThemeData lightTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(
        seedColor: primaryColor,
        brightness: Brightness.light,
      ),
    );
  }
  
  static ThemeData darkTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(
        seedColor: primaryColor,
        brightness: Brightness.dark,
      ),
    );
  }
}
然后在main.dart中,我的Material App小部件像这样实现:
theme: AppTheme.lightTheme(),
darkTheme: AppTheme.darkTheme(),
这样可以正常工作,在Android模拟器中,在设置中切换暗黑模式时,应用会自动更改。
但是我想要单独声明ColorScheme(这样我可以覆盖某些颜色等),然后只需使用copyWith在ThemeData中声明亮度:
class AppTheme {
  static const primaryColor = Color.fromARGB(255, 106, 49, 185);
  static ColorScheme colorScheme = ColorScheme.fromSeed(
    seedColor: primaryColor,
    // 这里进行自定义
  );
  static ThemeData lightTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: colorScheme.copyWith(
        brightness: Brightness.light,
      ),
    );
  }
  
  static ThemeData darkTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: colorScheme.copyWith(
        brightness: Brightness.dark,
      ),
    );
  }
}
但是这并不起作用。它一直保持在亮度模式下,尽管没有抛出错误。
有没有什么想法我做错了?
英文:
In my Flutter project app_theme.dart file I have this code:
class AppTheme {
  static const primaryColor = Color.fromARGB(255, 106, 49, 185);
  static ThemeData lightTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(
        seedColor: primaryColor,
        brightness: Brightness.light,
      ),
    );
  }
  static ThemeData darkTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(
        seedColor: primaryColor,
        brightness: Brightness.dark,
      ),
    );
  }
Then in main.dart, my Material App widget implements this like so:
theme: AppTheme.lightTheme(),
darkTheme: AppTheme.darkTheme(),
This works correctly, so that in the Android emulator, when I switch between dark and light mode (within settings), the app automatically changes.
But what I wanted to do was declare the ColorScheme separately (so I can override certain colors etc) and then just use copyWith to declare the brightness in the ThemeData:
class AppTheme {
  static const primaryColor = Color.fromARGB(255, 106, 49, 185);
  static ColorScheme colorScheme = ColorScheme.fromSeed(
    seedColor: primaryColor,
    // Customisation goes here
  );
  static ThemeData lightTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: colorScheme.copyWith(
        brightness: Brightness.light,
      ),
    );
  }
  static ThemeData darkTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: colorScheme.copyWith(
        brightness: Brightness.dark,
      ),
    );
  }
But this does not work. It just stays in light mode all the time, although no errors are thrown.
Any ideas what I'm doing wrong?
答案1
得分: 3
[ColorScheme.fromSeed][1] 构造函数基于给定的 seedColor 生成一个 `ColorScheme`。显然,复制生成的对象并不会再次生成颜色。类似这样的方法可以运行:
class AppTheme {
  static const primaryColor = Color.fromARGB(255, 106, 49, 185);
  static ColorScheme fromBrightness({required Brightness brightness}) {
    return ColorScheme.fromSeed(
      brightness: brightness,
      seedColor: primaryColor,
      // 在这里进行自定义
    );
  }
  static ThemeData lightTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: AppTheme.fromBrightness(
        brightness: Brightness.light,
      ),
    );
  }
  static ThemeData darkTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: AppTheme.fromBrightness(
        brightness: Brightness.dark,
      ),
    );
  }
}
英文:
ColorScheme.fromSeed constructor generates a ColorScheme derived from the given seedColor. Copying the generated object obviously does not generate colours again. Something like this would work:
class AppTheme {
  static const primaryColor = Color.fromARGB(255, 106, 49, 185);
  static ColorScheme fromBrightness({required Brightness brightness}) {
    return ColorScheme.fromSeed(
      brightness: brightness,
      seedColor: primaryColor,
      // Customisation goes here
    );
  }
  static ThemeData lightTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: AppTheme.fromBrightness(
        brightness: Brightness.light,
      ),
    );
  }
  static ThemeData darkTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: AppTheme.fromBrightness(
        brightness: Brightness.dark,
      ),
    );
  }
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论