关键词：
【中文标题】如何在 Flutter 中通过更改主题来更改文本颜色【英文标题】：How to change the Text color with change of theme in Flutter 【发布时间】：2020-03-19 12:22:57 【问题描述】：我正在开发一个应用程序，它会根据系统的主题更改其主题数据，即如果用户为他的设备启用了暗模式，则应用程序将自动更改为暗模式，反之亦然。我想在这里也改变 App 的文字颜色。
我创建了自定义文本主题，因为我不想更改默认的TextThemeData。相同的代码如下
text_themes.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
extension CustomTextStyles on TextTheme
TextStyle get h1
return TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
);
TextStyle get d1
return TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Brightness.dark == null ? Colors.blue:Colors.white,
);
TextStyle get d2
return TextStyle(fontSize: 16.0);
问题是每当我切换主题时，文本颜色都不会改变。我试过使用
color: ThemeData.dark() == null ? Colors.blue[800] : Colors.white,
和
color: Brightness.dark() == null ? Colors.blue[800] : Colors.white,
但没有任何效果。
这是我在上述代码行之后的预期输出
这是我当前的输出
Main.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:kjssc/models/user_data.dart';
import 'package:kjssc/screens/edit_profile_screen.dart';
import 'package:kjssc/screens/home_screen.dart';
import 'package:kjssc/screens/sign_up_screen.dart';
import 'package:provider/provider.dart';
import 'screens/login_screen.dart';
import 'screens/sign_up_in_screen.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
static SharedPreferences mainSharedPreferences;
Widget _getScreenID()
return StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (BuildContext context, snapshot)
if (snapshot.hasData)
Provider.of<UserData>(context).currentUserID = snapshot.data.uid;
return HomeScreen();
else
return SignUpInScreen();
,
);
@override
Widget build(BuildContext context)
return ChangeNotifierProvider(
create: (context) => UserData(),
child: MaterialApp(
title: 'My KJSSC',
debugShowCheckedModeBanner: false,
home: _getScreenID(),
// theme: state.themeData,
theme: ThemeData(
brightness: Brightness.light,
indicatorColor: Colors.white,
primaryColor: Colors.lightBlue[800],
primaryIconTheme: IconThemeData(
color: Colors.white,
),
tabBarTheme: TabBarTheme(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
labelStyle: TextStyle(fontWeight: FontWeight.bold),
),
),
darkTheme: ThemeData(
brightness: Brightness.dark,
indicatorColor: Colors.white,
primaryIconTheme: IconThemeData(
color: Colors.white,
),
tabBarTheme: TabBarTheme(
labelColor: Colors.white,
unselectedLabelColor: Colors.white54,
indicatorSize: TabBarIndicatorSize.tab,
labelStyle: TextStyle(fontWeight: FontWeight.bold),
),
),
routes:
LoginScreen.id: (context) => LoginScreen(),
SignupScreen.id: (context) => SignupScreen(),
EditProfileScreen.id: (context) => EditProfileScreen(),
,
),
);
homescreen.dart（代码 sn-p）
child: Row(
children: <Widget>[
Container(
child: Text(
'Email Id : ',
style: Theme.of(context).textTheme.d1
),
),
Container(
child: Text(
'user1@gmail.com',
style: Theme.of(context).textTheme.d2,
overflow: TextOverflow.ellipsis,
),
),
],
),
【问题讨论】：
这能回答你的问题吗？ Changing text color for dark mode in Flutter(with Dynamic Theme)? @Taha20 不，我也已经创建了主题和自定义主题数据。我希望将其更改为不同主题模式的蓝色或不同颜色 如果你使用on ThemeData而不是TextTheme，你就可以使用color: brightness == Brightness.dark ? Colors.blue : Colors.white,
你找到解决办法了吗？
【参考方案1】：
在 Flutter 上更改主题应该会触发 Widget 重建。我的方法是检查当前主题并更新要在 Text 小部件上使用的样式。
TextStyle? _textStyle;
@override
Widget build(BuildContext context)
var brightness = MediaQuery.of(context).platformBrightness;
bool isDarkMode = (brightness == Brightness.dark);
/// Update TextStyle depending on the theme
if (isDarkMode)
_textStyle = CustomTextStyleDark();
else
_textStyle = CustomTextStyleDefault();
return ...
【讨论】：
如何在颤动中通用更改应用栏的字体系列？
】如何在颤动中通用更改应用栏的字体系列？【英文标题】：Howtochangefontfamilyofappbaruniversallyinflutter?【发布时间】：2021-04-0508:44:35【问题描述】：我想普遍地更改我的应用程序中的应用栏字体，但我没有找到任何合适的答案。有... 查看详情
在angularjs中通过history.replacestate更改url时如何停止页面刷新？
】在angularjs中通过history.replacestate更改url时如何停止页面刷新？【英文标题】：Howtostoppagerefreshwhenchangingurlbyhistory.replacestateinangularjs?【发布时间】：2019-09-3004:33:02【问题描述】：我正在通过在我的angularjs+jade+nodejs应用程序中单击... 查看详情
Flutter - 如何更改 TextField 边框颜色？
】Flutter-如何更改TextField边框颜色？【英文标题】：Flutter-howtochangeTextFieldbordercolor?【发布时间】：2019-11-2316:22:55【问题描述】：我已经尽一切努力尝试更改文本字段的边框颜色，但它似乎被忽略了。我尝试过sideBorder（甚至宽度... 查看详情
Flutter：如何在 Flutter 中使用 Switch 更改主题 - 我已经使用 Provider 实现了这个明暗主题，但不能使用 switch 更改
】Flutter：如何在Flutter中使用Switch更改主题-我已经使用Provider实现了这个明暗主题，但不能使用switch更改【英文标题】：Flutter:HowICanChangeThemeUsingSwitchinFlutter-IhaveImplementedthisLightandDarkThemeUsingProvider,Butcannotchangewithswitch【发布时间】... 查看详情
如何在 SwiftUI 中通过 ViewModel 传播模型更改？
】如何在SwiftUI中通过ViewModel传播模型更改？【英文标题】：HowtopropagateModelchangesthroughViewModelinSwiftUI?【发布时间】：2020-09-1023:52:36【问题描述】：我试图了解SwiftUI中的MVVM模式，但我不完全了解ViewModel如何侦听和传播来自Model对象... 查看详情
在 xul 和 javascript 中通过按钮单击事件上的另一个工具提示文本更改工具提示文本
】在xul和javascript中通过按钮单击事件上的另一个工具提示文本更改工具提示文本【英文标题】：changetooltiptextbyanothertooltiptextonbuttonclickeventinxul&javascript【发布时间】：2011-03-0206:09:13【问题描述】：嗨我正在创建Firefox插件。我... 查看详情
在 React 中通过更改父级的道具来更新子组件
】在React中通过更改父级的道具来更新子组件【英文标题】：UpdatingChildComponentViaChangeofPropsfromParentinReact【发布时间】：2016-12-1002:27:33【问题描述】：我有一个组件，其状态作为道具传递给子组件。我注意到即使父组件的状态发生... 查看详情
Flutter：不使用AppBar时如何在Android和iOS上更改状态栏文本颜色[重复]
】Flutter：不使用AppBar时如何在Android和iOS上更改状态栏文本颜色[重复]【英文标题】：Flutter:HowtochangethestatusbartextcoloronAndroidandiOSwhennotusingAppBar[duplicate]【发布时间】：2020-09-0304:47:30【问题描述】：我是Flutter的新手，我在Google上搜... 查看详情
如何在 Visual Studio 2019 中通过单击按钮来重复数组上的元素
】如何在VisualStudio2019中通过单击按钮来重复数组上的元素【英文标题】：HowtorepeatelementsonarraywithbuttonclickinVisualStudio2019【发布时间】：2021-11-1200:27:30【问题描述】：我正在制作一个简单的算术运算符数学游戏。我希望每次单击“... 查看详情
如何在添加窗口中通过 html 助手更改弹出剑道网格的标题
】如何在添加窗口中通过html助手更改弹出剑道网格的标题【英文标题】：howtoChangeCaptionofpopupkendogridbyhtmlhelperinaddwindow【发布时间】：2014-02-1214:34:54【问题描述】：我正在使用弹出剑道网格，我使用添加新记录和编辑模式，我想... 查看详情
如何更改 Flutter (Dart) 中的文本？
】如何更改Flutter(Dart)中的文本？【英文标题】：HowtochangetextinFlutter(Dart)?【发布时间】：2021-11-1321:37:03【问题描述】：我是Flutter的新手！我想在单击和按钮“更改文本”时更改“文本”的内容见以下代码：voidmain()runApp(MaterialApp(h... 查看详情
在Android中通过ArrayAdapter在ListView中单击单个ImageView背景后如何更改它？
...在Android中通过ArrayAdapter在ListView中单击单个ImageView背景后如何更改它？【英文标题】：HowcanIchangesingleImageViewbackgroundafterclickingonitinListViewviaArrayAdapterinAndroid?【发布时间】：2021-06-3002:45:06【问题描述】：我的Fragment活动中有一个List... 查看详情
Flutter - 如何使用主题更改 IconButtons 的大小
】Flutter-如何使用主题更改IconButtons的大小【英文标题】：Flutter-HowtochangeIconButtonssizewithTheme【发布时间】：2019-12-0819:39:58【问题描述】：我有一个包含多个图标按钮的行，我需要更改它们的颜色和大小。我设法更改了颜色，但无... 查看详情
如何在 Flutter 中更改文本字段的字体大小？
】如何在Flutter中更改文本字段的字体大小？【英文标题】：HowtochangefontsizeoftextfieldinFlutter?【发布时间】：2021-10-1602:18:30【问题描述】：我有一个文本字段，我想更改它的字体大小，因为我的应用程序可用于iPad和手机。文本字段... 查看详情
如何在主题中全局更改android按钮文本颜色
】如何在主题中全局更改android按钮文本颜色【英文标题】：Howtochangeandroidbuttontextcolorgloballyintheme【发布时间】：2016-07-1515:47:35【问题描述】：如何更改所有按钮的文本颜色？我知道我可以如下设置背景颜色：<stylename="AppTheme.Ba... 查看详情
Flutter-如何在深色模式下更改状态栏文字颜色？
】Flutter-如何在深色模式下更改状态栏文字颜色？【英文标题】：Flutter-HowtochangetheStatusbartextcolorinDarkMode?【发布时间】：2020-02-0801:19:03【问题描述】：我希望在iOS13深色模式下控制状态栏文本颜色。当不打开暗模式时，我可以通... 查看详情
我的 Flutter FutureBuilder 如何在布局中的多个位置更改文本？
】我的FlutterFutureBuilder如何在布局中的多个位置更改文本？【英文标题】：HowcanmyFlutterFutureBuilderchangetextatmultipleplacesinmylayout?【发布时间】：2019-03-1710:13:06【问题描述】：我仔细阅读了Flutter教程；从互联网获取数据：https://flutter.... 查看详情
在 C++ 11 线程中通过引用传递；更改已本地化
】在C++11线程中通过引用传递；更改已本地化【英文标题】：passingbyreferenceinC++11threads;changesarelocalized【发布时间】：2015-02-1506:20:43【问题描述】：我正在尝试使用C++11线程加快对opencv代码的一些处理。与此同时，我正在使用矢量... 查看详情