【问题标题】:How to use Flutter AppTheme TextTheme without overriding automatic text color如何在不覆盖自动文本颜色的情况下使用 Flutter AppTheme TextTheme
【发布时间】:2020-03-05 15:50:46
【问题描述】:

当我使用我的应用程序中的文本主题时,Theme.of(context).textTheme.subhead 文本更新为适当的大小和重量,但颜色也始终为黑色。 如何使用定义的文本主题,同时仍然允许颜色自动更改(例如:从黑色变为白色,放置在深色按钮上时?

我的应用主题使用默认文本主题,(减去一些重量变化)

我环顾四周,我认为我正在正确使用它,但我不确定。


TextTheme _customizeTextTheme(TextTheme base) {
  return base.copyWith(
    title: base.title.copyWith(
      fontWeight: FontWeight.bold,
    ),
    body2: base.body2.copyWith(
      fontWeight: FontWeight.bold,
    ),
  );
}

ThemeData _buildLightTheme() {
  const Color primaryColor = Colors.white;
  const Color secondaryColor = Colors.red;
  final ColorScheme colorScheme = const ColorScheme.light().copyWith(
    primary: primaryColor,
    secondary: secondaryColor,
  );
  final ColorScheme buttonColorScheme = const ColorScheme.light().copyWith(
    primary: secondaryColor,
    secondary: primaryColor,
  );
  final ThemeData base = ThemeData(
//    typography: Typography(
//      englishLike: Typography.englishLike2018,
//      dense: Typography.dense2018,
//      tall: Typography.tall2018,
//    ), //This is for another stackOverflowQuestion.  I can't get this to do anything
    fontFamily: 'Avenir',
    brightness: Brightness.light,
    accentColorBrightness: Brightness.dark,
    colorScheme: colorScheme,
    primaryColor: primaryColor,
    buttonColor: primaryColor,
    indicatorColor: Colors.white,
    toggleableActiveColor: const Color(0xFF1E88E5),
    splashColor: Colors.white24,
    splashFactory: InkRipple.splashFactory,
    accentColor: secondaryColor,
    errorColor: const Color(0xFFB00020),
    disabledColor: Colors.grey,
    hintColor: ServerColors.greenAccent,
    buttonTheme: ButtonThemeData(
      colorScheme: buttonColorScheme,
      textTheme: ButtonTextTheme.primary,
    ),
  );
  return base.copyWith(
    textTheme: _customizeTextTheme(base.textTheme),
    primaryTextTheme: _customizeTextTheme(base.primaryTextTheme),
    accentTextTheme: _customizeTextTheme(base.accentTextTheme),
  );
}

当我构建我的应用程序时:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ServerThemes.lightTheme,
        initialRoute: Routes.home,
        routes: {
          Routes.home: (context) => AppHomePage(),
        },
        onUnknownRoute: (settings) => MaterialPageRoute(
            builder: (context) => UndefinedRoute(
                  badPathName: settings.name,
                )),
      ),
    );
  }
}

当我使用它时:

FloatingActionButton.extended(
        onPressed: () {},
        label: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
                "View Cart",
                style: Theme.of(context).textTheme.title, // <---- RIGHT HERE
              ),
        ),
        icon: Icon(Icons.shopping_cart),
      ),

目前 FAB 是红色的,如果没有样式,文本是白色的,如预期的那样。但是当我添加样式线时,文本变黑了。

我想有一种方法可以在不禁用自动颜色调整的情况下使用 textTheme。?

【问题讨论】:

  • 你是如何使用 2018 文本主题的?
  • @Casanova 你的意思是,我最终得到了注释掉的排版工作吗?是的,它已经在工作了,我只是没有注意到,因为变化相当微妙。 (只有参数englishLike 适用于我的应用程序,只有英语,其他参数densetall,仅适用于其他类型的语言)现在,我在 Flutter beta 分支上运行,它更新了整个类型系统以匹配 2018 Material 类型系统。其他已弃用。例如:textTheme.title 现在将是 textTheme.headline6。等

标签: flutter themes


【解决方案1】:

好的,解决方案很简单。我在flutter material中theme_data.dart的flutter code cmets中找到了它:

  /// Text with a color that contrasts with the card and canvas colors.
  final TextTheme textTheme;

  /// A text theme that contrasts with the primary color.
  final TextTheme primaryTextTheme;

  /// A text theme that contrasts with the accent color.
  final TextTheme accentTextTheme;

我使用的是文本主题,而我应该使用主要的文本主题。

解决方案:

FloatingActionButton.extended(
        onPressed: () {},
        label: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
                "View Cart",
                style: Theme.of(context).primaryTextTheme.headline6, // <---- RIGHT HERE
              ),
        ),
        icon: Icon(Icons.shopping_cart),
      ),

【讨论】:

  • 标题已弃用。改用headline6
猜你喜欢
  • 1970-01-01
  • 2018-03-21
  • 1970-01-01
  • 1970-01-01
  • 2016-01-30
  • 1970-01-01
  • 2022-12-16
  • 2011-11-18
  • 1970-01-01
相关资源
最近更新 更多