Flutter ColorScheme CopyWith 亮度不起作用

huangapple go评论65阅读模式
英文:

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,
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年2月18日 04:06:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/75488807.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定