flutter如何修改状态栏颜色

在Flutter中如何修改状态栏的颜色？我尝试使用SystemChrome.setSystemUIOverlayStyle方法，但效果不太理想。请问有没有更可靠的方式在不同平台上都能正确修改状态栏颜色？另外，是否需要针对Android和iOS分别处理？

2 回复

在Flutter中，使用SystemChrome.setSystemUIOverlayStyle()修改状态栏颜色。例如：

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarColor: Colors.blue, // 设置颜色
  ),
);

需导入services.dart包。

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


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

1. 使用 SystemChrome 类（推荐）

在 main.dart 的 main() 函数或页面 initState() 中设置：

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 状态栏颜色
    statusBarIconBrightness: Brightness.dark, // 图标亮度（暗色/亮色）
  ));
  runApp(MyApp());
}

2. 在 Scaffold 中使用 backgroundColor

Scaffold(
  backgroundColor: Colors.blue, // 同时影响状态栏颜色
  appBar: AppBar(
    backgroundColor: Colors.blue,
  ),
  body: ...,
)

3. 使用 AnnotatedRegion

import 'package:flutter/services.dart';

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    statusBarColor: Colors.red,
  ),
  child: Scaffold(...),
)

参数说明：

  • statusBarColor：状态栏背景色
  • statusBarIconBrightness：图标颜色（Brightness.light/暗色，Brightness.dark/亮色）
  • statusBarBrightness：状态栏亮度（已弃用）

注意事项：

  1. 需要导入 services.dart 包
  2. 在全面屏设备上可能需要配合 SafeArea 使用
  3. 某些安卓版本可能需要设置沉浸式状态栏

建议使用 SystemChrome.setSystemUIOverlayStyle 方法，控制最灵活。

回到顶部