Flutter 如何在flatter中随着主题的变化而改变文本的颜色
我正在Flitter中开发一个应用程序,它会根据系统的主题更改其主题数据,即如果用户已为其设备启用暗模式,则应用程序将自动更改为暗模式,反之亦然。在这里,我也想更改应用程序的文本颜色 我已经创建了自定义文本主题,因为我不想更改默认的文本主题数据。其代码如下所示 文本主题。省道Flutter 如何在flatter中随着主题的变化而改变文本的颜色,flutter,Flutter,我正在Flitter中开发一个应用程序,它会根据系统的主题更改其主题数据,即如果用户已为其设备启用暗模式,则应用程序将自动更改为暗模式,反之亦然。在这里,我也想更改应用程序的文本颜色 我已经创建了自定义文本主题,因为我不想更改默认的文本主题数据。其代码如下所示 文本主题。省道 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; extension CustomTextStyles on
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);
}
}
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(),
},
),
);
}
}
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,
),
),
],
),
问题是,每当我切换主题时,文本颜色都不会改变。我试过使用
color:ThemeData.dark()==null?颜色.蓝色[800]:颜色.白色,
及
color:brighty.dark()==null?颜色.蓝色[800]:颜色.白色,
但什么都没用
Main.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);
}
}
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(),
},
),
);
}
}
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,
),
),
],
),
import'package:firebase_auth/firebase_auth.dart';
进口“包装:颤振/材料.省道”;
导入“包:kjssc/models/user_data.dart”;
导入“包:kjssc/screens/edit_profile_screen.dart”;
导入“包:kjssc/screens/home_screen.dart”;
导入“包:kjssc/screens/sign_-up_-screen.dart”;
导入“包:provider/provider.dart”;
导入“screens/login_screen.dart”;
导入“screens/sign_up_in_screen.dart”;
导入“package:shared_preferences/shared_preferences.dart”;
void main()=>runApp(MyApp());
类MyApp扩展了无状态小部件{
静态SharedReferences MainSharedReferences;
小部件_getScreenID(){
返回流生成器(
流:FirebaseAuth.instance.onAuthStateChanged,
生成器:(BuildContext上下文,快照){
if(snapshot.hasData){
Provider.of(context).currentUserID=snapshot.data.uid;
返回主屏幕();
}否则{
返回注册屏幕();
}
},
);
}
@凌驾
小部件构建(构建上下文){
返回ChangeNotifierProvider(
create:(context)=>UserData(),
孩子:MaterialApp(
标题:“我的KJSSC”,
debugShowCheckedModeBanner:false,
主页:_getScreenID(),
//主题:state.themeData,
主题:主题数据(
亮度:亮度,亮度,
指示颜色:颜色。白色,
原色:颜色。浅蓝色[800],
PrimaryContheme:IconThemeData(
颜色:颜色,白色,
),
塔巴塞姆:塔巴塞姆(
labelColor:Colors.white,
未选择的标签颜色:Colors.white70,
指标化:TabBarIndicatorSize.tab,
labelStyle:TextStyle(fontWeight:fontWeight.bold),
),
),
黑暗主题:主题数据(
亮度:亮度。暗,
指示颜色:颜色。白色,
PrimaryContheme:IconThemeData(
颜色:颜色,白色,
),
塔巴塞姆:塔巴塞姆(
labelColor:Colors.white,
未选择的标签颜色:Colors.white54,
指标化:TabBarIndicatorSize.tab,
labelStyle:TextStyle(fontWeight:fontWeight.bold),
),
),
路线:{
LoginScreen.id:(上下文)=>LoginScreen(),
SignupScreen.id:(上下文)=>SignupScreen(),
EditProfileScreen.id:(上下文)=>EditProfileScreen(),
},
),
);
}
}
homescreen.dart(代码片段)
子项:行(
儿童:[
容器(
子:文本(
'电子邮件Id:',
样式:Theme.of(context).textTheme.d1
),
),
容器(
子:文本(
'user1@gmail.com',
样式:Theme.of(context).textTheme.d2,
溢出:TextOverflow.省略号,
),
),
],
),
这是否回答了您的问题@Taha20不,我已经创建了主题和自定义主题数据。我希望它在不同的主题模式下变为蓝色或不同的颜色如果你在主题数据上使用而不是TextTheme
,你就可以做color:brightness==brightness.dark?Colors.blue:Colors.white,
您找到解决方案了吗?