Flutter如何设置状态栏颜色 设置白色状态栏显示为灰色求解

想要将状态栏颜色修改为白色，但实际显示效果偏灰色。开发中未使用AppBar组件，而是使用SafeArea组件，尝试将SafeArea包裹在Container组件中设置白色状态栏，相关实现代码如下：

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white, // statusbar color
      child: SafeArea(
          child: Scaffold(
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        body: Column(
          children: [
            appBarContainer(),
            Expanded(
              child: GetX<PostDetailController>(
                builder: (controller) {
                  return Scrollbar(
                      child: ListView.builder(
                    itemBuilder: (context, index) {
                      return postContainer(context, controller);
                    },
                    itemCount: controller.post.length,
                  ));
                },
              ),
            )
          ],
        ),
      )),
    );
  }
}

问题效果参考截图：

出现灰色偏差的核心原因是状态栏属于系统原生控制的UI层级，不在Flutter组件渲染树内，给外层Container设置的白色仅作用于Flutter组件层，系统状态栏默认自带的半透明蒙层会盖在组件上方，最终就会呈现偏灰的效果。

优先使用AnnotatedRegion显式配置系统状态栏样式，这是无AppBar场景下修改状态栏样式的标准实现：

• 第一步：引入系统服务依赖

import 'package:flutter/services.dart';

• 第二步：修改页面build逻辑，在外层添加状态栏样式配置，将状态栏背景设为透明，直接显示下层Container的纯白色，同时配置适配白底的深色状态栏图标：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      // Android端深色图标适配
      statusBarIconBrightness: Brightness.dark,
      // iOS端深色图标适配
      statusBarBrightness: Brightness.light,
    ),
    child: Container(
      color: Colors.white,
      child: SafeArea(
        child: Scaffold(
          backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          body: Column(
            children: [
              appBarContainer(),
              Expanded(
                child: GetX<PostDetailController>(
                  builder: (controller) {
                    return Scrollbar(
                        child: ListView.builder(
                      itemBuilder: (context, index) {
                        return postContainer(context, controller);
                      },
                      itemCount: controller.post.length,
                    ));
                  },
                ),
              )
            ],
          ),
        ),
      ),
    ),
  );
}

如果不想使用AnnotatedRegion，也可以给SafeArea添加top: false参数，取消SafeArea对顶部状态栏区域的自动适配，手动通过MediaQuery.of(context).padding.top获取状态栏高度，给页面顶部内容设置对应高度的上边距即可。

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