flutter如何修改statusbar颜色

在Flutter中如何修改状态栏的颜色？我尝试了使用SystemChrome.setSystemUIOverlayStyle方法，但颜色没有变化。是否需要额外的配置或插件？希望了解具体的实现步骤和注意事项。

2 回复

在Flutter中，使用AnnotatedRegion<SystemUiOverlayStyle>包裹页面内容，通过SystemUiOverlayStyle设置statusBarColor属性即可修改状态栏颜色。

更多关于flutter如何修改statusbar颜色的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过以下方法修改状态栏（StatusBar）的颜色：

1. 使用 SystemChrome.setSystemUIOverlayStyle

这是最常用的方法，可以全局设置状态栏的颜色和样式。

示例代码：

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.blue, // 状态栏背景色
    statusBarIconBrightness: Brightness.light, // 图标亮度（亮色背景用暗色图标）
  ));
  runApp(MyApp());
}

2. 在特定页面中设置

可以在 build 方法中使用 AnnotatedRegion 来覆盖单个页面的状态栏样式。

示例代码：

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // 透明背景
      statusBarIconBrightness: Brightness.dark,
    ),
    child: Scaffold(
      appBar: AppBar(title: Text('页面')),
      body: Container(),
    ),
  );
}

参数说明：

  • statusBarColor：状态栏背景颜色（仅 Android 有效，iOS 状态栏背景始终为透明）。
  • statusBarIconBrightness：状态栏图标亮度（Brightness.light 为白色，Brightness.dark 为黑色）。
  • statusBarBrightness：状态栏亮度（通常与图标亮度配合使用）。

注意事项：

  • Android 与 iOS 差异：iOS 状态栏背景默认透明，通常通过调整页面顶部颜色实现效果。
  • 图标适配：深色背景用 Brightness.light（浅色图标），浅色背景用 Brightness.dark。

通过以上方法即可灵活控制状态栏的显示样式。

回到顶部