Flutter 日记App-日夜模式切换

get 配置

同样，使用get进行日夜模式开发，先配置.

javascript 复制代码

Widget build(BuildContext context) {
  return GetMaterialApp(
  //主题
    theme: sslUI.currentTheme,
  );
}

颜色配置

日夜模式枚举

scss 复制代码

enum SSLTheme{
  auto(0),
  light(1),
  dark(2);
   //初始化
  const SSLTheme(this.mode);
  final int mode;
  static SSLTheme getType(int mode){
    return SSLTheme.values.firstWhereOrNull((element) => element.mode == mode) ?? SSLTheme.auto;
  }
}

主题颜色类

php 复制代码

class SSLUIManager{
//这里写成单例类
SSLUIManager._internal(){
  listenPlatformModeChange();
}
//工厂模式初始化
static final SSLUIManager colorMan = SSLUIManager._internal();
factory SSLUIManager(){
  return colorMan;
}
以上是单例模式常用的初始化方式

全局的key 用于获取当前的context
  static GlobalKey<NavigatorState> sslNavKey = GlobalKey();
  static const scaffoldBackLight = Color.fromRGBO(220, 220, 220, 1);
  //APPBar主题色
  static const primaryLight = Colors.white;
  //分割线颜色
  static const dividerLight = Color.fromRGBO(230, 230, 230, 1);
  //主文本字体颜色
  static const mainTextLight = Color.fromRGBO(47, 47, 47, 1);
  //二级文本颜色
  static const subTextLight = Color.fromRGBO(153, 153, 153, 1);
  //底部TabBar背景色
  static const tabBackgroundLight = Colors.white;
  //底部TabBar Item 选中色
  static const tabItemSelLight = Color.fromRGBO(17, 17, 17, 1);
  //底部TabBar Item 未选中色
  static const tabItemNorLight = Color.fromRGBO(114, 114, 114, 1);

  static const scaffoldBackDark = Color.fromRGBO(17, 17, 17, 1);
...等等
  var themeMode = SSLTheme.auto;
  var showDarkMode = false;

  set localMode(int mode){
    themeMode = SSLTheme.getType(mode);
  }
   //获取系统当前的主题
  void listenPlatformModeChange(){
    Get.window.onPlatformBrightnessChanged = (){
      if (themeMode == SSLTheme.auto){
        Get.changeTheme(currentTheme);
      }
    };
  }
  ///获取主题色
  Color get priColor{
    if (showDarkMode){
      return primaryDark;
    }
    return primaryLight;
  }
  ///获取Widget主要背景色
  Color get scrollBgColor{
    if (showDarkMode){
      return scaffoldBackDark;
    }
    return scaffoldBackLight;
  }
  ...等等一些方法
 //配置两种主题对应的颜色
 //黑夜模式对应的主题色
static final darkTheme = ThemeData.dark().copyWith(
  scaffoldBackgroundColor: scaffoldBackDark,
    primaryColor: primaryDark,
    dividerColor: dividerDark,
  iconTheme: const IconThemeData(
    color: primaryDark
  ),
  //顶部导航颜色
  appBarTheme: const AppBarTheme(
    backgroundColor: primaryDark,
    titleTextStyle: TextStyle(color: mainTextDark, fontSize: 20)
  ),
  //底部tabbar 颜色
  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
    backgroundColor: tabBackgroundDark,
    selectedItemColor: tabItemSelDark,
    unselectedItemColor: tabItemNorDark
  )
);
//浅色主题对应的主题色
static final lightTheme = ThemeData.light().copyWith(
    scaffoldBackgroundColor: scaffoldBackLight,
    primaryColor: primaryLight,//主题色
    dividerColor: dividerLight,//分割线颜色
    iconTheme: const IconThemeData(
    //icon颜色
        color: primaryLight
    ),
    //顶部Bar 设置
    appBarTheme: const AppBarTheme(
        backgroundColor: primaryLight,
        titleTextStyle: TextStyle(color: mainTextLight, fontSize: 20)
    ),
    //底部Bar设置
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
        backgroundColor: tabBackgroundLight,
        selectedItemColor: tabItemSelLight,
        unselectedItemColor: tabItemNorLight
    )

);

设置主题

ini 复制代码

void changeThemeMode(int mode) async {
  if (mode != themeMode.mode){
  //本地存储设置的主题类型
    bool success = await shareSetIntData(themeKey, mode);
    if (success){
    //设置当前的主题类型标识
      themeMode = SSLTheme.getType(mode);
      Get.changeTheme(currentTheme);
    }
  }
}
//获取当前的主题
ThemeData get currentTheme{
  debugPrint("ssl current theme mode $themeMode");
  if (themeMode == SSLTheme.auto){
    if (Get.window.platformBrightness == Brightness.light){
      showDarkMode = false;
      return lightTheme;
    }
    showDarkMode = true;
    return darkTheme;
  }
  else if (themeMode == SSLTheme.light){
    showDarkMode = false;
    return lightTheme;
  }
  showDarkMode = true;
  return darkTheme;
}

大概就这些，基本上源码都在这里。整个功能实现较为简单，主要是一些API的使用。欢迎大家指正、讨论。