Flutter中如何自定义状态栏文字与图标的颜色？

系统限制说明 #

• iOS：仅支持通过statusBarIconBrightness切换亮色/暗色方案，无法直接设置自定义RGB颜色，受限于系统接口。
• Android：API 30及以上版本支持自定义状态栏图标/文字颜色，需通过原生窗口配置实现，AnnotatedRegion本身不支持该功能。

具体实现代码 #

完整兼容版示例 #

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    // Android端设置自定义状态栏图标颜色
    if (Platform.isAndroid) {
      WidgetsBinding.instance.window.statusBarIconColor = Colors.orange; // 替换为你的自定义颜色
    }
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<SplashViewModelCubit, SplashViewModelState>(
      builder: (context, state) {
        return AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            // iOS端只能切换亮度，自定义颜色不支持
            statusBarIconBrightness: Platform.isIOS ? Brightness.dark : null,
          ),
          child: const Scaffold(
            body: Container(),
          ),
        );
      },
    );
  }
}

关键注意事项 #

• Android API 30以下版本：只能通过statusBarIconBrightness切换亮色/暗色，无法设置自定义颜色，属于系统层面限制。
• iOS平台：无论版本，都仅支持系统提供的亮色/暗色状态栏图标样式，无自定义颜色接口。

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