8.4 设置系统栏样式

8.4 设置系统栏样式

问题描述

系统栏颜色有的时候会变成白色，这样就不能看清楚系统栏信息了。

img

实现步骤：

第 1 步：theme 样式定义

lib/common/style/theme.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/// 主题
class AppTheme {
  /// 亮色
  static ThemeData light = ThemeData(
    ...
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle.dark, // appBar 暗色 , 和主题色相反
    ),
  );

  /// 暗色
  static ThemeData dark = ThemeData(
    ...
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle.light, // appBar 亮色 , 和主题色相反
    ),
  );
}

样式正好和我们的 app 样式相反，这样才能反显文字。

第 2 步：Android 配置

lib/global.dart

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
// 系统样式
static void setSystemUi() {
  if (GetPlatform.isMobile) {
    // 屏幕方向 竖直上
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    // 透明状态栏
    // SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    //   statusBarColor: Colors.transparent, // transparent status bar
    // ));
  }

  if (GetPlatform.isAndroid) {
    // 去除顶部系统下拉和底部系统按键
    // SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
    // 去掉底部系统按键
    // SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
    //     overlays: [SystemUiOverlay.bottom]);

    // 自定义样式
    SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      // 顶部状态栏颜色
      statusBarColor: Colors.transparent,
      // 该属性仅用于 iOS 设备顶部状态栏亮度
      // statusBarBrightness: Brightness.light,
      // 顶部状态栏图标的亮度
      // statusBarIconBrightness: Brightness.light,

      // 底部状态栏与主内容分割线颜色
      systemNavigationBarDividerColor: Colors.transparent,
      // 底部状态栏颜色
      systemNavigationBarColor: Colors.white,
      // 底部状态栏图标样式
      systemNavigationBarIconBrightness: Brightness.dark,
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}
1
2
3
4
5
6
7
8
class Global {
  static Future<void> init() async {
    WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
    FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

    // 系统样式
    setSystemUi();
    ...

具体效果大家可以自己尝试，每次需要冷启动，热更新无效。

提交代码到 git