Flutter 颤振主题化

我已经创建了一个他们从一个配色方案和一个文本主题。这是我的主题文件

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

然而，在我意想不到的地方，我会得到奇怪的颜色和结果

---

比如说。当《我的脚手架之子：抽屉》被重建时，它的主题是所有东西都是白色的。我的原色不见了。我的画布颜色消失了。弗利特从哪里得到这些看似随机的东西？有没有指南可以告诉我颤振从哪里获得各种小部件的主题信息。我知道抽屉没有使用我的主题，那么抽屉主题是从哪里来的呢？

我确实解决了这个问题。结果我没有完全理解ThemeData.from（ColorScheme，TextTheme）是如何工作的

显然，如果您的配色方案使用的亮度为brighty.light，则您的原色将是您传入的原色。如果选择亮度的亮度。深色颤振将使用表面颜色作为主颜色。请注意下面来自主题的代码。来自（…）

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

我的解决办法是将配色方案改为亮度.light，我得到了预期的颜色

---

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

Flatter 2.0.6•通道稳定•框架•版本1d9032c7e1（13天前）•2021-04-29 17:37:58-0700引擎•版本05e680e202工具•Dart 2.12.3Hi！你能提供你抽屉的代码吗？

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