Flutter：修改状态栏电池/WiFi/时钟图标深色失败求助

你当前代码里把statusBarIconBrightness设为Brightness.light，这是让图标显示浅色，要改成深色需要调整参数，同时还要处理AppBar的样式覆盖问题，具体修改如下：

1. 修正全局状态栏样式设置 #

把statusBarIconBrightness改为Brightness.dark，同时根据平台差异调整statusBarBrightness（适配iOS状态栏显示逻辑）：

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 和页面透明AppBar、自定义背景色适配
    statusBarIconBrightness: Brightness.dark, // Android：状态栏图标改为深色
    statusBarBrightness: Brightness.light, // iOS：配合深色图标设置状态栏亮度
  ));
  runApp(const MyApp());
}

2. 覆盖AppBar的状态栏样式 #

因为你使用了AppBar，它的默认样式会覆盖全局设置，所以需要在AppBar中显式声明systemOverlayStyle：

AppBar(
  title: Text(
    'Flutter',
    style: GoogleFonts.poppins(color: Colors.black),
  ),
  elevation: 0,
  backgroundColor: Colors.transparent,
  systemOverlayStyle: const SystemUiOverlayStyle(
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  ),
)

完整修改后的代码 #

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

// 假设backgroundUL是你定义的颜色常量
const Color backgroundUL = Colors.white;

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  ));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
          appBar: AppBar(
            title: Text(
              'Flutter',
              style: GoogleFonts.poppins(color: Colors.black),
            ),
            elevation: 0,
            backgroundColor: Colors.transparent,
            systemOverlayStyle: const SystemUiOverlayStyle(
              statusBarIconBrightness: Brightness.dark,
              statusBarBrightness: Brightness.light,
            ),
          ),
          extendBodyBehindAppBar: true,
          body: Container(
            child: const Center(child: Text("Hello")),
            color: backgroundUL,
          )),
    );
  }
}

关键说明 #

• Android平台通过statusBarIconBrightness: Brightness.dark直接控制状态栏图标为深色
• iOS平台需要配合statusBarBrightness: Brightness.light，才能让状态栏图标显示深色
• 只要页面使用了AppBar，就必须在AppBar内单独设置systemOverlayStyle，否则AppBar的默认样式会覆盖全局配置

内容的提问来源于stack exchange，提问作者Caio Salgado