颤振主题

Question

我从配色方案和文本主题创建了它们。这是我的主题文件。

import 'package:google_fonts/google_fonts.dart';
import 'package:intellaview_mobile/constants/constants.dart';

extension AppTextStyleVariants on TextStyle {
  TextStyle get italic => copyWith(fontStyle: FontStyle.italic);
  TextStyle get regular => copyWith(fontWeight: FontWeight.normal);
  TextStyle get semiBold => copyWith(fontWeight: FontWeight.w600);
  TextStyle get bold => copyWith(fontWeight: FontWeight.bold);
  TextStyle colorize(Color color) => copyWith(color: color);
}

extension NamedTextStylesFromTextTheme on TextTheme {
  TextStyle get listItem1 => headline4!;
  TextStyle get listItem2 => headline5!;
  TextStyle get button1 => button!;
  TextStyle get button2 => headline6!;
}

class AppTheme {
  static final TextTheme _appTextTheme = TextTheme(
    headline1: GoogleFonts.openSans(
      fontWeight: FontWeight.bold,
      fontSize: 20.0,
      color: AppColors.primary,
    ),
    headline2: GoogleFonts.openSans(
      fontWeight: FontWeight.bold,
      fontSize: 16.0,
      color: AppColors.primary,
    ),
    headline3: GoogleFonts.openSans(
      fontWeight: FontWeight.bold,
      fontSize: 14.0,
      color: AppColors.primary,
    ),
    // listItem1
    headline4: GoogleFonts.openSans(
      // semiBold
      fontWeight: FontWeight.normal,
      fontSize: 16.0,
      color: AppColors.primary,
    ),
    // listItem2
    headline5: GoogleFonts.openSans(
      fontWeight: FontWeight.w600,
      fontSize: 14.0,
      color: AppColors.primary,
    ),
    // button2
    headline6: GoogleFonts.openSans(
      fontWeight: FontWeight.bold,
      fontSize: 12.0,
      color: AppColors.primary,
    ),
    subtitle1: GoogleFonts.openSans(
      // semiBold
      fontWeight: FontWeight.w600,
      fontSize: 16.0,
      color: AppColors.primary,
    ),
    subtitle2: GoogleFonts.openSans(
      // semiBold
      fontWeight: FontWeight.w600,
      fontSize: 12.0,
      color: AppColors.primary,
    ),
    bodyText1: GoogleFonts.openSans(
      fontWeight: FontWeight.bold,
      fontSize: 12.0,
      color: AppColors.primary,
    ),
    bodyText2: GoogleFonts.openSans(
      fontWeight: FontWeight.normal,
      fontSize: 12.0,
      color: AppColors.primary,
    ),
    button: GoogleFonts.openSans(
      fontWeight: FontWeight.w600,
      fontSize: 14.0,
      color: AppColors.primary.shade500,
    ),
    overline: GoogleFonts.openSans(
      // semiBold
      fontWeight: FontWeight.w600,
      fontSize: 10.0,
      color: AppColors.primary.shade500,
    ),
    caption: GoogleFonts.openSans(
      fontWeight: FontWeight.w600,
      fontSize: 8.0,
      color: AppColors.primary.shade300,
    ),
  );

  static final TextTheme _onPrimaryTextTheme = _appTextTheme.apply(
    bodyColor: AppColors.onPrimary,
    displayColor: AppColors.onPrimary,
  );

  static final ColorScheme _appColorScheme = ColorScheme(
    brightness: Brightness.dark,
    primary: AppColors.primary.shade800,
    primaryVariant: AppColors.primary.shade500,
    secondary: AppColors.secondary.shade500,
    secondaryVariant: AppColors.secondary.shade800,
    background: Colors.white,
    surface: Colors.white,
    error: AppColors.error,
    onPrimary: Colors.white,
    onSecondary: AppColors.primary.shade800,
    onBackground: AppColors.primary.shade800,
    onSurface: AppColors.primary.shade800,
    onError: Colors.white,
  );

  static ThemeData? finalAppTheme;

  static DividerThemeData _dividerThemeData(ThemeData themeData) {
    return themeData.dividerTheme.copyWith(space: 1, thickness: 1);
  }

  static final AppBarTheme _appBarTheme = AppBarTheme(
    color: AppColors.primary,
    brightness: Brightness.dark,
    iconTheme: IconThemeData(color: AppColors.onPrimary),
    actionsIconTheme: IconThemeData(color: AppColors.onPrimary),
    textTheme: _onPrimaryTextTheme,
    titleTextStyle: GoogleFonts.openSans(
      fontWeight: FontWeight.bold,
      fontSize: 20.0,
      color: Colors.white,
    ),
    elevation: 4,
  );

  static ThemeData get app {
    if (null == finalAppTheme) {
      ThemeData themeData = ThemeData.from(
        colorScheme: _appColorScheme,
        textTheme: _appTextTheme,
      );

      finalAppTheme = themeData.copyWith(
        buttonColor: themeData.colorScheme.secondary,
        // selectedRowColor: AppColors.selectedRowColor,
        appBarTheme: _appBarTheme,
        dividerTheme: _dividerThemeData(themeData),
        canvasColor: AppColors.primary,
        disabledColor: AppColors.primary.shade100,
      );
    }
    return finalAppTheme!;
  }
}

我用那个主题创建了我的材料应用程序。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: Strings.lang.kIntellaViewMobile,
      theme: AppTheme.app,
      initialRoute: LoginScreen.route,
      routes: {
        AddEditSwitch.route: (context) => AddEditSwitch(),
        AlertsScreen.route: (context) => AlertsScreen(),
        BladesScreen.route: (context) => BladesScreen(),
        ConnectionsScreen.route: (context) => ConnectionsScreen(),
        DashboardScreen.route: (context) => DashboardScreen(),
        SwitchesScreen.route: (context) => SwitchesScreen(),
        EnableBluetoothScreen.route: (context) => EnableBluetoothScreen(),
        FactoryResetScreen.route: (context) => FactoryResetScreen(),
        HealthCheckScreen.route: (context) => HealthCheckScreen(),
        IntellaViewHomePage.route: (context) => IntellaViewHomePage(title: Strings.lang.kIntellaViewMobile),
        LoginScreen.route: (context) => LoginScreen(),
        MaintenanceScreen.route: (context) => MaintenanceScreen(),
        SwitchInfoScreen.route: (context) => SwitchInfoScreen(),
        UsersScreen.route: (context) => UsersScreen(),
      },
      navigatorObservers: [AppState.instance],
    );
  }
}

但是，我在意想不到的地方得到了奇怪的颜色和结果。

例如。当我的 Scaffold : Drawer 的孩子被重建时，它带有一个一切都是白色的主题。我的原色消失了。我的画布颜色消失了。颤动从哪里得到这些看似随机的？是否有指南告诉我颤振从哪里获取各种小部件的主题信息。我知道抽屉没有使用我的主题，那么抽屉主题是从哪里来的？

Answer 1

我确实发现了问题。原来我没有完全理解 ThemeData.from(ColorScheme, TextTheme) 的工作原理。

显然，如果您的 ColorScheme 使用 Brightness.light 的亮度，那么您的原色将是您传入的原色。如果您选择 Brightness of Brightness.dark Flutter 将使用 surfaceColor 作为原色。请注意以下来自 Theme.from(...) 的代码

    final Color primarySurfaceColor = isDark ? colorScheme.surface : colorScheme.primary;
    final Color onPrimarySurfaceColor = isDark ? colorScheme.onSurface : colorScheme.onPrimary;

所以我得到了与我预期相反的颜色。

我的解决方法是将配色方案更改为 Brightness.light，我得到了预期的颜色。

我还没有看到关于构建更复杂的浅色/深色主题的好教程。与我正在开发的应用程序相比，它们似乎都过于简单了。如果您知道，请在 cmets 中发布。

Answer 2

由于某些默认小部件直接使用 ThemeData 中的颜色，因此在 ColorScheme 中设置颜色可能不够。

一些默认小部件中的示例：

// this may be used
Theme.of(context).backgroundColor

// instead of this
Theme.of(context).colorScheme.background.

你可以这样做：

ColorScheme scheme = isDarkMode ? ThemeConstant.darkScheme : ThemeConstant.lightScheme;

return ThemeData(
  primaryColor: scheme.primary,
  backgroundColor: scheme.background,
  scaffoldBackgroundColor: scheme.background,
  colorScheme: scheme,
  ...
);