Flutter如何修改顶部状态栏文字颜色

在Flutter开发中，如何修改顶部状态栏的文字颜色？默认情况下状态栏文字是白色的，但我的应用背景色较浅，导致文字看不清。尝试过修改SystemChrome.setSystemUIOverlayStyle，但没效果。请问正确的方法是什么？需要针对iOS和Android分别处理吗？

2 回复

在Flutter中，通过SystemChrome.setSystemUIOverlayStyle修改状态栏文字颜色。例如：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

或自定义颜色：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarIconBrightness: Brightness.light, // 浅色图标
));

更多关于Flutter如何修改顶部状态栏文字颜色的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过 AppBar 的 systemOverlayStyle 属性修改顶部状态栏（系统 UI）的文字和图标颜色，适用于 Android 和 iOS（仅限亮/暗模式适配）。以下是具体方法：

1. 使用 systemOverlayStyle（推荐）

在 AppBar 中设置 systemOverlayStyle 属性，并指定 SystemUiOverlayStyle。需导入 services.dart。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('修改状态栏颜色'),
          // 设置状态栏样式
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Colors.transparent, // 状态栏背景色（可选）
            statusBarIconBrightness: Brightness.light, // Android 图标颜色（亮色为黑，暗色为白）
            statusBarBrightness: Brightness.dark, // iOS 状态栏亮度（暗色为白字，亮色为黑字）
          ),
        ),
        body: Container(),
      ),
    );
  }
}

参数说明：

  • statusBarIconBrightness：
    • Brightness.light：状态栏图标为白色（适合深色背景）。
    • Brightness.dark：状态栏图标为黑色（适合浅色背景）。
      仅 Android 有效。
  • statusBarBrightness：
    • Brightness.dark：iOS 状态栏文字为白色。
    • Brightness.light：iOS 状态栏文字为黑色。
      仅 iOS 有效。

2. 全局设置状态栏

若需在整个应用中统一修改，可在 MaterialApp 的 build 方法中调用 SystemChrome.setSystemUIOverlayStyle。

示例代码：

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarIconBrightness: Brightness.light,
  ));
  return MaterialApp(
    // ...
  );
}

注意事项：

  • Android：通过 statusBarIconBrightness 直接控制图标颜色。
  • iOS：通过 statusBarBrightness 间接控制文字颜色（根据亮度自动适配）。
  • 背景色透明时，需确保内容区域不与状态栏重叠（使用 SafeArea 组件）。

以上方法可灵活适配不同平台，按需选择局部或全局配置即可。

回到顶部