Flutter如何修改顶部电池栏颜色

在Flutter开发中，我想修改App顶部状态栏（电池、信号图标等）的颜色，但不知道如何实现。目前状态栏总是默认黑色或白色，与我的App主题不协调。请问应该使用哪个插件或方法？需要针对iOS和Android分别处理吗？求具体代码示例。

2 回复

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.red,
));

需导入services.dart包。注意：此方法仅适用于Android，iOS需使用Cupertino主题或原生配置。

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


在 Flutter 中，修改顶部电池栏（状态栏）的颜色可以通过以下方法实现：

1. 使用 SystemChrome.setSystemUIOverlayStyle

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

代码示例：

import 'package:flutter/services.dart';

// 在页面初始化时调用（如 initState）
void setStatusBarColor() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // 状态栏背景色（设为透明或具体颜色）
      statusBarIconBrightness: Brightness.light, // 图标亮度（亮色背景用 dark，暗色用 light）
      statusBarBrightness: Brightness.dark, // 状态栏亮度（仅iOS）
    ),
  );
}

// 在 State 类中使用
@override
void initState() {
  super.initState();
  setStatusBarColor();
}

2. 在 MaterialApp 中全局设置

通过 theme 属性统一配置所有页面的状态栏样式。

代码示例：

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.blue,
        statusBarIconBrightness: Brightness.light,
      ),
    ),
  ),
  home: MyHomePage(),
);

3. 使用 AnnotatedRegion

在特定页面中通过包裹 Scaffold 动态调整状态栏样式。

代码示例：

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarIconBrightness: Brightness.light,
    ),
    child: Scaffold(
      appBar: AppBar(title: Text('页面标题')),
      body: ...,
    ),
  );
}

注意事项：

  • 图标亮度：根据背景色调整 statusBarIconBrightness（深色背景用 Brightness.light，浅色用 Brightness.dark）。
  • 安卓与iOS差异：statusBarBrightness 主要影响 iOS，安卓通常依赖 statusBarIconBrightness。
  • 沉浸式状态栏：设置 statusBarColor: Colors.transparent 可实现沉浸式效果。

选择适合项目需求的方法即可快速修改状态栏颜色！

回到顶部