Flutter开发之——getX-改变主题(09)

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

浅色主题 深色主题

二 getX中切换主题API

2.1 当前是什么模式主题

1
Get.isDarkMode

2.2 改变当前主题

设置为浅色主题

1
Get.changeTheme(ThemeData.light());

设置为深色主题

1
Get.changeTheme(ThemeData.dark());

放在一个onPressed中，根据Get.isDarkMode判断

1
Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark());

三 示例

3.1 GetMaterialApp中设置默认主题

1
2
3
4
5
6
7
8
void main()=>runApp(GetMaterialApp(
    theme:  ThemeData.light(),
    darkTheme: ThemeData.dark(),
    themeMode: ThemeMode.light,
    getPages: [
      GetPage(name: '/', page: ()=>IndexWidget(),binding: IndexBinding())
    ]
));

3.2 浅色/深色主题按钮

按钮界面相关

1
2
3
4
5
appBar: AppBar(title: Text('Theme'),
         actions: <Widget>[
           IconButton(icon: Icon(Icons.wb_sunny_rounded),onPressed:()=>controller.changeLight()),
           IconButton(icon: Icon(Icons.nightlight_round),onPressed:()=>controller.changeNight())
         ]),

Controller中对应的浅色/深色主题切换逻辑

1
2
3
4
5
6
void changeNight() {
  Get.changeTheme(ThemeData.dark());
}
void changeLight(){
  Get.changeTheme(ThemeData.light());
}

说明：

  • 本文只做简单演示，若要持久化存储，可将配置信息进行持久化存储

四 自定义主题

4.1 如何自定义主题

  • 单独创建一个theme文件，分别配置lightTheme和darkTheme
  • lightTheme是ThemeData.light().copyWith重写方法，设置浅色主题的样式配置
  • darkTheme是ThemeData.dark().copyWith重写方法，设置深色主题的样式配置
  • 默认配置时，在GetMaterialApp中，将上述的lightTheme设置给theme，darkTheme设置给darkTheme
  • 调用Get.changeTheme改变主题时，同理

4.2 自定义主题文件(theme)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
///白天模式
ThemeData lightTheme = ThemeData.light().copyWith(
  primaryColor: Colors.blue,
  splashColor: Colors.white12,
  appBarTheme: AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle.dark,
    elevation: 0,
    backgroundColor: ThemeData.light().scaffoldBackgroundColor,
    iconTheme: const IconThemeData(color: Colors.black),
  ),
  scaffoldBackgroundColor: ThemeData.light().scaffoldBackgroundColor,
  backgroundColor: Colors.white,
  iconTheme: const IconThemeData(
    color: Colors.red,
  ),
  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
    selectedItemColor: Colors.blue,
    unselectedItemColor: Colors.tealAccent
  ),
);

///夜间模式
ThemeData darkTheme = ThemeData.dark().copyWith(
  appBarTheme: AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle.light,
    elevation: 0,
    backgroundColor: ThemeData.dark().scaffoldBackgroundColor,
    iconTheme: const IconThemeData(color: Colors.white),
  ),
  scaffoldBackgroundColor: ThemeData.dark().scaffoldBackgroundColor,
  backgroundColor: Colors.black,
  iconTheme: const IconThemeData(
    color: Colors.blue,
  ),
  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      selectedItemColor: Colors.tealAccent,
      unselectedItemColor: Colors.blue
  ),
);

4.3 自定义主题文件使用

GetMaterialApp

1
2
3
4
5
6
7
8
9
10
void main()=>runApp(GetMaterialApp(
    theme:  lightTheme,
    darkTheme: darkTheme,
    // theme:  ThemeData.light(),
    // darkTheme: ThemeData.dark(),
    themeMode: ThemeMode.light,
    getPages: [
      GetPage(name: '/', page: ()=>IndexWidget(),binding: IndexBinding())
    ]
));

onPressed按钮方法

1
2
3
4
5
6
void changeNight() {
  Get.changeTheme(darkTheme);
}
void changeLight(){
  Get.changeTheme(lightTheme);
}

五 参考

  • Github-getX-改变主题
  • CSDN下载-示例代码