[英]Flutter GetX Theme Mode Issue
I am currently working on an application where I have implemented the dark mode.我目前正在开发一个实现了暗模式的应用程序。 It's all working good when I switch it from light mode to dark mode.当我将它从浅色模式切换到深色模式时,一切正常。 The problem starts when I switch back from dark mode to light mode.当我从暗模式切换回亮模式时,问题就开始了。 All the primary color and theme configurations I have added in the app they just get lost.我在应用程序中添加的所有原色和主题配置都丢失了。
This is the code from my app start:这是我的应用程序启动时的代码:
class TradeWixApp extends StatelessWidget {
bool darkMode;
TradeWixApp({Key? key, required this.darkMode}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
translations: Languages(),
locale: Locale('en'),
debugShowCheckedModeBanner: false,
darkTheme: ThemeData(
textTheme: TextTheme(
titleMedium: TextStyle(color: Colors.white70),
bodyMedium: TextStyle(color: Colors.white70),
),
shadowColor: Colors.grey.shade900,
brightness: Brightness.dark,
backgroundColor: Colors.black,
scaffoldBackgroundColor: Color.fromARGB(255, 37, 36, 36),
appBarTheme: AppBarTheme(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
)),
color: Color.fromARGB(200, 174, 242, 135),
elevation: 0,
foregroundColor: Colors.black,
),
primaryColor: Color.fromARGB(200, 174, 242, 135),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.black,
elevation: 0,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(primary: Colors.grey),
),
),
themeMode: darkMode ? ThemeMode.dark : ThemeMode.light,
theme: ThemeData(
backgroundColor: Colors.white,
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
)),
color: Color.fromARGB(255, 174, 242, 135),
elevation: 0,
foregroundColor: Colors.black,
),
primaryColor: Color.fromARGB(255, 174, 242, 135),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.black,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(primary: Colors.grey),
)),
home: const SplashScreen(),
);
}
}
and the code where I am switching the dark mode is:我切换暗模式的代码是:
Obx(() {
return ListTile(
title: Text('Dark Mode'.tr),
trailing: Switch(
value: darkMode.value,
onChanged: (value) async {
darkMode.value = value;
Get.changeTheme(
!value ? ThemeData.light() : ThemeData.dark());
Get.changeThemeMode(
!value ? ThemeMode.light : ThemeMode.dark);
Get.reloadAll();
final prefs = await SharedPreferences.getInstance();
await prefs.setBool('darkMode', value);
},
));
})
This is the light before switching这是切换前的灯
This is the dark mode这是深色模式 This is the light mode after switching这是切换后的灯光模式
I don't see why your using Get.changeTheme
in your piece of code, you have set a theme
, and darkTheme
on your GetMaterialApp
, so to toggle between them, you will need simply to call Get.changeThemeMode
, but this:我不明白你为什么在你的代码中使用Get.changeTheme
,你已经在你的GetMaterialApp
上设置了一个theme
和darkTheme
,所以要在它们之间切换,你只需要调用Get.changeThemeMode
,但是这个:
Get.changeTheme( !value ? ThemeData.light() : ThemeData.dark());
The ThemeData.dark()
and ThemeData.light()
are new whole themes, I guess your goal is to toggle between light mode and dark mode, not to set a theme between a list of themes for example. ThemeData.dark()
和ThemeData.light()
是新的整个主题,我猜你的目标是在亮模式和暗模式之间切换,而不是在主题列表之间设置主题。 so when you call Get.changeTheme()
, you reset your app themes to the default light a dark ones ( which gives you the behavior that your themes are reset )所以当你调用Get.changeTheme()
时,你将你的应用程序主题重置为默认的浅色主题(这给了你主题被重置的行为)
Try to add尝试添加
themeMode: ThemeMode.system,
to your GetMaterialApp.到您的 GetMaterialApp。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.