1:provider管理暗黑模式
步驟一：編寫provider?管理全局Theme
extension ThemeModeExtensionon ThemeMode {
Stringget value => ['System', 'Light', 'Dark'][index];
}
class ThemeProviderextends ChangeNotifier {
void syncTheme() {
final String theme = SpUtil.getString(StringUtils.theme);
? ? if (theme.isNotEmpty && theme != ThemeMode.system.value) {
notifyListeners();
? ? }
}
void setTheme(ThemeMode themeMode) {
SpUtil.putString(StringUtils.theme, themeMode.value);
? ? notifyListeners();
? }
ThemeModegetThemeMode(){
final String theme = SpUtil.getString(StringUtils.theme);
? ? switch(theme) {
case 'Dark':
return ThemeMode.dark;
? ? ? case 'Light':
return ThemeMode.light;
? ? ? default:
return ThemeMode.system;
? ? }
}
ThemeDatagetTheme({bool isDarkMode =false}) {
return ThemeData(
errorColor: isDarkMode ? ColorR.dark_red : ColorR.red,
? ? ? brightness: isDarkMode ? Brightness.dark : Brightness.light,
? ? ? primaryColor: isDarkMode ? ColorR.dark_app_main : ColorR.app_main,
? ? ? accentColor: isDarkMode ? ColorR.dark_app_main : ColorR.app_main,
? ? ? // Tab指示器顏色
? ? ? indicatorColor: isDarkMode ? ColorR.dark_app_main : ColorR.app_main,
? ? ? // 頁面背景色
? ? ? scaffoldBackgroundColor: isDarkMode ? ColorR.dark_bg_color : Colors.white,
? ? ? // 主要用于Material背景色
? ? ? canvasColor: isDarkMode ? ColorR.dark_material_bg : Colors.white,
? ? ? // 文字選擇色（輸入框復制粘貼菜單）
? ? ? textSelectionColor: ColorR.app_main.withAlpha(70),
? ? ? textSelectionHandleColor: ColorR.app_main,
//? ? ? textTheme: TextTheme(
//? ? ? ? // TextField輸入文字顏色
//? ? ? ? subtitle1: isDarkMode ? TextStyles.textDark : TextStyles.text,
//? ? ? ? // Text文字樣式
//? ? ? ? bodyText2: isDarkMode ? TextStyles.textDark : TextStyles.text,
//? ? ? ? subtitle2: isDarkMode ? TextStyles.textDarkGray12 : TextStyles.textGray12,
//? ? ? ),
//? ? ? inputDecorationTheme: InputDecorationTheme(
//? ? ? ? hintStyle: isDarkMode ? TextStyles.textHint14 : TextStyles.textDarkGray14,
//? ? ? ),
? ? ? appBarTheme:AppBarTheme(
elevation:0.0,
? ? ? ? color: isDarkMode ? ColorR.dark_bg_color : Colors.white,
? ? ? ? brightness: isDarkMode ? Brightness.dark : Brightness.light,
? ? ? ),
? ? ? dividerTheme:DividerThemeData(
color: isDarkMode ? ColorR.dark_line : ColorR.line,
? ? ? ? ? space:0.6,
? ? ? ? ? thickness:0.6
? ? ? ),
? ? ? cupertinoOverrideTheme:CupertinoThemeData(
brightness: isDarkMode ? Brightness.dark : Brightness.light,
? ? ? ),
? ? ? pageTransitionsTheme:NoTransitionsOnWeb(),
? ? );
? }
}
步驟二:在manin.dart中設置provider
@override
? Widget build(BuildContext context) {
? ? //全局的App主題管理
? return ChangeNotifierProvider(
create: (_)=>ThemeProvider(),
? ? ? child:Consumer(
builder: (_, provider, __) {
return? MaterialApp(
? ? ? ? theme: provider.getTheme(),
? ? ? ? darkTheme: provider.getTheme(isDarkMode:true),
? ? ? ? themeMode: provider.getThemeMode(),
? ? ? ? supportedLocales: Platform.isIOS ? ios : android,
? ? ? ? home:TabPage(),
? ? ? ? /// 因為使用了fluro悉患，這里設置主要針對Web
? ? ? );
? ? ? },
? ? ? )
);
? }
}
步驟三:在需要設置暗黑模式的地方使用
// dark表示淺色党觅，light表示深色篮迎，system?表示跟隨系統(tǒng)碰酝。
ThemeMode themeMode =? ThemeMode.system ;
/// 與上方等價楣黍，provider 4.1.0添加的拓展方法
context.read<ThemeProvider>().setTheme(themeMode);
最后:提供一個主題工具欄（用于判斷當前的主題）
class ThemeUtils {
///判斷當前主題是不是暗黑模式
? static boolisDark(BuildContext context) {
return Theme.of(context).brightness == Brightness.dark;
? }
static ColorgetDarkColor(BuildContext context, Color darkColor) {
return isDark(context) ? darkColor :null;
? }
static ColorgetIconColor(BuildContext context) {
return isDark(context) ? ColorR.dark_text :null;
? }
static ColorgetBackgroundColor(BuildContext context) {
return Theme.of(context).scaffoldBackgroundColor;
? }
static ColorgetDialogBackgroundColor(BuildContext context) {
return Theme.of(context).canvasColor;
? }
static ColorgetStickyHeaderColor(BuildContext context) {
return isDark(context) ? ColorR.dark_bg_gray_ : ColorR.bg_gray_;
? }
static ColorgetDialogTextFieldColor(BuildContext context) {
return isDark(context) ? ColorR.dark_bg_gray_ : ColorR.bg_gray;
? }
static ColorgetKeyboardActionsColor(BuildContext context) {
return isDark(context) ? ColorR.dark_bg_color : Colors.grey[200];
? }
}
