[Android]Switching between immersive and edgeToEdge system UI modes shows black status bar

When I change SystemUiMode when rebuilding the app, the page's widgets are being moved and status bar area becomes completely black. This behavior occurs on my physical Android device which is Redmi Note 10 with operating system MIUI 12.

However, it works as expected on Android emulator and also on my previous physical device with Android One operating system.

Steps to Reproduce

bool _fullscreenEnabled = false;

@override
Widget build(BuildContext context) {
  SystemChrome.setEnabledSystemUIMode(
    _fullscreenEnabled ? SystemUiMode.immersive : SystemUiMode.edgeToEdge,
  );
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent,
  ));

  return Scaffold(
    body: GestureDetector(
      onTap: () {
        setState(() => _fullscreenEnabled = !_fullscreenEnabled);
      },
      child:
          Image.network('https://www.wallpaperuse.com/wallp/83-836965_m.jpg'),
    ),
  );
}

Expected results:

This video recording is from Android emulator, Nexus 5 and it works as expected.

Android.Emulator.-.nexus-5_5554.2021-12-16.16-43-04.mp4

Actual results:

And this recording is from my physical Redmi Note 10 device with MIUI 12 operating system. As you can see, area of the statusbar becomes completely black when I switch to immersive mode.

Screenrecorder-2021-12-16-16-41-03-7.mp4

Logs

flutter run --verbose

[  +70 ms] executing: [D:\SDK\flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +66 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +1 ms] cf4400006550b70f28e4b4af815151d1e74846c6
[        ] executing: [D:\SDK\flutter/] git tag --points-at cf4400006550b70f28e4b4af815151d1e74846c6
[  +52 ms] Exit code 0 from: git tag --points-at cf4400006550b70f28e4b4af815151d1e74846c6
[        ] 2.8.0
[   +7 ms] executing: [D:\SDK\flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +34 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/stable
[        ] executing: [D:\SDK\flutter/] git ls-remote --get-url origin
[  +32 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter
[ +107 ms] executing: [D:\SDK\flutter/] git rev-parse --abbrev-ref HEAD
[  +37 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] stable
[  +81 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +4 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +53 ms] executing: D:\SDK\android-sdk\platform-tools\adb.exe devices -l
[  +47 ms] List of devices attached
           5974a77a               device product:sunny_global model:M2101K7AG device:sunny transport_id:5
           emulator-5554          device product:sdk_gphone_x86_64 model:Android_SDK_built_for_x86_64 device:generic_x86_64 transport_id:3
[   +9 ms] D:\SDK\android-sdk\platform-tools\adb.exe -s 5974a77a shell getprop
[ +121 ms] D:\SDK\android-sdk\platform-tools\adb.exe -s emulator-5554 shell getprop
[  +39 ms] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[  +14 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +72 ms] Multiple devices found:
[   +3 ms] ro.hardware = qcom
[   +1 ms] ro.hardware = ranchu
[  +26 ms] M2101K7AG (mobile)                    • 5974a77a      • android-arm64  • Android 11 (API 30)
[   +1 ms] Android SDK built for x86 64 (mobile) • emulator-5554 • android-x64    • Android 10 (API 29) (emulator)
[        ] Chrome (web)                          • chrome        • web-javascript • Google Chrome 96.0.4664.110
[        ] Edge (web)                            • edge          • web-javascript • Microsoft Edge 96.0.1054.53
[   +2 ms] [1]: M2101K7AG (5974a77a)
[        ] [2]: Android SDK built for x86 64 (emulator-5554)
[        ] [3]: Chrome (chrome)
[        ] [4]: Edge (edge)

flutter analyze

Analyzing playground...                                                 
No issues found! (ran in 3.2s)

flutter doctor -v

[√] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.19043.1348], locale en-US)
    • Flutter version 2.8.0 at D:\SDK\flutter
    • Upstream repository https://github.com/flutter/flutter
    • Framework revision cf44000065 (8 days ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at D:\SDK\android-sdk
    • Platform android-30, build-tools 29.0.3
    • ANDROID_SDK_ROOT = D:\SDK\android-sdk
    • Java binary at: C:\Program Files\Common Files\Oracle\Java\javapath\java.exe
    • Java version Java(TM) SE Runtime Environment (build 15.0.2+7-27)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] VS Code (version 1.63.1)
    • VS Code at C:\Users\rasit\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.29.0

[√] Connected device (4 available)
    • M2101K7AG (mobile)                    • 5974a77a      • android-arm64  • Android 11 (API 30)
    • Android SDK built for x86 64 (mobile) • emulator-5554 • android-x64    • Android 10 (API 29) (emulator)
    • Chrome (web)                          • chrome        • web-javascript • Google Chrome 96.0.4664.110
    • Edge (web)                            • edge          • web-javascript • Microsoft Edge 96.0.1054.53

! Doctor found issues in 1 category.

(I don't use Android Studio)

@rasitayaz

HI @rasitayaz, Thanks for filing the issue. I am not able to reproduce the issue on Xiaomi k20 pro (Android 11), neither on stable 2.8.0 nor on master 2.9 . It looks like this issue is device-specific.

Screen.Recording.2021-12-17.at.2.16.59.PM.mov

flutter doctor -v

[✓] Flutter (Channel stable, 2.8.0, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.8.0 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (8 days ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.61.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.4:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 96.0.4664.110

• No issues found!

[✓] Flutter (Channel master, 2.9.0-1.0.pre.93, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.93 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1be7f1ea56 (2 days ago), 2021-12-14 22:14:07 -0500
    • Engine revision e444009bf4
    • Dart version 2.16.0 (build 2.16.0-109.0.dev)
    • DevTools version 2.9.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.61.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.4:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 96.0.4664.110

• No issues found!

Thanks for the response @maheshmnj, is there any other way that I can hide the status and the navigation bars on edgeToEdge without switching to the immersive mode?

Thanks for the response @maheshmnj, is there any other way that I can hide the status and the navigation bars on edgeToEdge without switching to the immersive mode?

I am not really aware of any other way.

this issue happens on some phones like mine (A21s) or in emulators I think pixel_4 has the same issue, the status bar will become blank-black and I didn't find any solution for this issue

Well, I only set SystemUiMode.edgeToEdge, but Mi8 (Android 9) appears in immersive mode on launch (with black status bar as well)
This happened after updating flutter 2.5.0 -> 2.8.0
The issue here is having immersive mode while I didn't request it

Other devices are unaffected

Other devices are unaffected

Oh, I've just reproduced this on pixel 3 emulator (api 28)

if I remove a call to PlatformPlugin.updateSystemUiOverlays() everything becomes fine (debugging shows only default flags are used)

If someone still have the "black status bar" issue, adding this code in my MainActivity.kt fixed the issue :)

window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

Full Code :

import io.flutter.embedding.android.FlutterActivity
import android.os.Bundle
import android.view.WindowManager

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

If someone still have the "black status bar" issue, adding this code in my MainActivity.kt fixed the issue :)

window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

Full Code :

import io.flutter.embedding.android.FlutterActivity
import android.os.Bundle
import android.view.WindowManager

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

This worked for me. I was very distressed and it helped! Thank you so much!

If someone still have the "black status bar" issue, adding this code in my MainActivity.kt fixed the issue :)

window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

Full Code :

import io.flutter.embedding.android.FlutterActivity
import android.os.Bundle
import android.view.WindowManager

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

Worked for me too. This should be implemented as flutter's default behavior since it is edge to edge by default.

If someone still have the "black status bar" issue, adding this code in my MainActivity.kt fixed the issue :)

window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

Full Code :

import io.flutter.embedding.android.FlutterActivity
import android.os.Bundle
import android.view.WindowManager

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

It works. Thanks !

Если у кого-то все еще есть проблема с "черной строкой состояния", добавление этого кода в мой файл MainActivity.ktрешило проблему :)
window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
Полный код:
import io.flutter.embedding.android.FlutterActivity
import android.os.Bundle
import android.view.WindowManager

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

Огромное тебе спасибо, я даже вошел в аккаунт чтобы это написать. Ты просто спас. Thank you BRO!!!

@rasitayaz

@rasitayaz Revisiting this issue, there have been breaking changes related to SystemUI modes that you can read here https://docs.flutter.dev/release/breaking-changes/default-systemuimode-edge-to-edge and check if this helps to resolve the issue at your end on affected device. Note that, you'll need to verify this using latest stable sdk (3.38.4).

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[Android]Switching between immersive and edgeToEdge system UI modes shows black status bar #95403

Steps to Reproduce

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Android]Switching between immersive and edgeToEdge system UI modes shows black status bar #95403

Description

Steps to Reproduce

Activity

maheshj01 commented on Dec 17, 2021

rasitayaz commented on Dec 17, 2021

maheshj01 commented on Dec 21, 2021

fmotalleb commented on Dec 21, 2021

emakar commented on Dec 22, 2021

emakar commented on Dec 22, 2021

emakar commented on Dec 22, 2021

13 remaining items

luneflu commented on Nov 20, 2024

keybow007 commented on Dec 4, 2024

fondoger commented on Jan 18, 2025

LuisJuniorA commented on Feb 27, 2025

Fizzzle commented on Aug 5, 2025

darshankawar commented on Dec 12, 2025

github-actions commented on Jan 2, 2026

github-actions commented on Jan 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions