我有一个用于明暗模式的自定义 ThemeData
。但是我想根据 ThemeMode 提供特定的不同颜色或样式的小部件很少,即覆盖自定义的深色或浅色 ThemeData。
在这里,我有一个容器,亮模式激活时颜色为灰色,暗模式激活时为黑色 12,但当 isDarkMode
分别为 true
或 false
时颜色不会改变.
我正在使用 GetX 状态管理。
代码如下:
材料应用:
return GetMaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeController().lightTheme,
darkTheme: ThemeController().darkTheme,
themeMode: ThemeController().getThemeMode(),
home: _dataController.onBoarding == null ? OnBoarding1() : HomeScreen(),
);
主题控制器:
class ThemeController extends GetxController {
// Dark theme bool
bool isDarkTheme = false;
// Change theme method
changeTheme() {
if (isDarkTheme == false) {
isDarkTheme = true;
changeThemeMode();
print(isDarkTheme);
update();
} else if (isDarkTheme == true) {
isDarkTheme = false;
changeThemeMode();
print(isDarkTheme);
update();
}
}
//
void changeThemeMode() {
Get.changeThemeMode(isDarkTheme ? ThemeMode.dark : ThemeMode.light);
update();
}
//
ThemeMode getThemeMode() {
return isDarkTheme ? ThemeMode.dark : ThemeMode.light;
}
// Light Theme
final lightTheme = ThemeData.light().copyWith(
brightness: Brightness.light,
backgroundColor: Color(0xfff5f5f5),
scaffoldBackgroundColor: Color(0xfff5f5f5),
primaryColor: Colors.blueAccent.shade100,
appBarTheme: AppBarTheme(
brightness: Brightness.light,
backgroundColor: Colors.grey[200],
),
cardTheme: CardTheme(
color: Color(0xfff5f5f5),
),
);
// Dark Theme
final darkTheme = ThemeData.dark().copyWith(
brightness: Brightness.dark,
appBarTheme: AppBarTheme(
brightness: Brightness.dark,
backgroundColor: Color(0xFF212121),
),
);
}
界面:
return GetBuilder<ThemeController>(
builder: (_themeController) => Container(
height: 75.0,
color: _themeController.isDarkTheme ? Colors.black26 : Colors.grey[200],
child: Con....));
当 isDarkTheme
为真时,颜色不会改变。