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 表示跟随系统。
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];
}
}
