Flutter开启immersiveSticky模式后Android12状态栏区域黑屏异常求助

问题原因 #

Flutter 2.5.x默认Scaffold会自动为body添加顶部安全区域padding，避开状态栏位置；同时Android 12默认对未配置透明属性的状态栏区域会填充黑色占位背景，两个原因叠加导致你遇到的问题。

解决方案 #

你需要补充3项配置：

1. 提前初始化WidgetsBinding，在应用启动时就配置沉浸式相关属性，避免在build方法重复调用
2. 配套设置状态栏背景为透明
3. 给Scaffold开启extendBodyBehindAppBar属性，允许body内容延伸到状态栏区域

修改后的核心代码 #

启动入口调整

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 配置沉浸式粘性模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  // 配置状态栏透明，可同步调整状态栏图标明暗
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  ));
  runApp(const MyApp());
}

Scaffold配置调整

@override
Widget build(BuildContext context) => Scaffold(
      // 允许body延伸到状态栏区域
      extendBodyBehindAppBar: true,
      body: Column(
        children: <Widget>[
          const Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    );

可选补充配置（如仍无效可添加） #

打开android/app/src/main/res/values/styles.xml以及对应values-v31的样式文件，在应用主题节点下添加：

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

第二项是适配刘海屏、挖孔屏区域的配置，允许内容延伸到挖孔区域。

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