如何在 Flutter 中通过更改主题来更改文本颜色
Posted
技术标签:
【中文标题】如何在 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 ...
【讨论】:
以上是关于如何在 Flutter 中通过更改主题来更改文本颜色的主要内容,如果未能解决你的问题,请参考以下文章
Flutter - 如何更改 TextField 边框颜色?
Flutter:如何在 Flutter 中使用 Switch 更改主题 - 我已经使用 Provider 实现了这个明暗主题,但不能使用 switch 更改
在 xul 和 javascript 中通过按钮单击事件上的另一个工具提示文本更改工具提示文本