flutter - 如何在不覆盖自动文本颜色的情况下使用 Flutter AppTheme TextTheme
问题描述
当我使用我的应用程序中的文本主题时,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。?
解决方案
好的,解决方案很简单。我在颤振材料中的theme_data.dart的颤振代码注释中找到了它:
/// 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),
),
推荐阅读
- c# - EF Core 6 ThenInclude 引用错误
- javascript - JavaScript 中的语法 x:y 是什么意思?
- javascript - 按下 Enter 按钮后将光标保持在文本框上
- javascript - 为什么 WebView.evaluateJavascript 方法被调用了两次?
- python - 无法安装scrapy
- swift - 如何在快速长按集合视图的特定行时打开视图?
- python - Python中最近空间点组的质心
- android - Scaffold Messenger 的问题:在 null 上调用了“showSnackBar”方法
- kubernetes-helm - 无法在 kubernetes 上的服务监视器 yaml 中使用正则表达式删除普罗米修斯中的指标
- java - 如何将片段edittext数据发送到片段中没有按钮的活动