抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

本文所用方法借助GetX,以实现暗黑模式、明亮模式为例阐述如何实现自定义主题切换

一、功能实现

1.编写自定义主题

分别编写两套不同主题,其中需注意,brightness 分别指定为 Brightness.lightBrightness.dark ,而样式可根据自己需求做调整。

class AppTheme {
  static const darkBg = Color.fromRGBO(21, 22, 26, 1);
  static const primary = Color.fromRGBO(43, 100, 246, 1);
  
  static ThemeData theme() {
    return ThemeData(
      platform: TargetPlatform.iOS,
      brightness: Brightness.light,
      primaryColor: primary,
      appBarTheme: const AppBarTheme(
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0.2,
        iconTheme: IconThemeData(color: Colors.black),
      ),
    );
  }

  static ThemeData darkTheme() {
    return ThemeData(
      platform: TargetPlatform.iOS,
      scaffoldBackgroundColor: darkBg,
      primaryColor: primary,
      brightness: Brightness.dark,
      appBarTheme: const AppBarTheme(
        centerTitle: true,
        elevation: 1,
        backgroundColor: darkBg,
      ),
    );
  }
}

2.入口函数

分别指定默认主题和深色主题的样式,并可通过themeMode配置默认主题。

themeMode可选有

  • 跟随系统ThemeMode.system
  • 明亮模式ThemeMode.light
  • 深色模式ThemeMode.dark
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      ...
      themeMode: ThemeMode.dark,
      theme: AppTheme.theme(),
      darkTheme: AppTheme.darkTheme(),
      ...
    );
  }
}

3.借助GetX切换主题

Get.changeThemeMode(Get.isDarkMode ? ThemeMode.light : ThemeMode.dark);

二、实现主题缓存

主题缓存需要借助缓存库,如 shared_preferences

1.修改入口

void main() {
  // Uni.spInit()为自己编写的工具类,主要异步初始化shared_preferences全局实例
  Uni.spInit().then((value) {
    runApp(const MyApp());
  });
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    // 启动时从缓存获取
    bool isDark = Uni.getStorage("is_dark");
  
    return GetMaterialApp(
      ...
      themeMode: isDark ? ThemeMode.dark : ThemeMode.light ,
      ...
    );
  }
}

2.改变主题时缓存

Get.changeThemeMode(Get.isDarkMode ? ThemeMode.light : ThemeMode.dark);
Uni.setStorage("is_dark", Get.isDarkMode);

评论