Repository: flutter
Issue: [SystemUiMode.edgeToEdge] systemNavigationBarColor can't be made transparent without breaking older Android versions
Labels: platform-android,framework,engine,e: OS-version specific,a: layout,has reproducible steps,P2,found in release: 3.7,team-android,triaged-android

Based on the Android docs (https://developer.android.com/develop/ui/views/layout/edge-to-edge), I would expect the following when using `SystemUiMode.edgeToEdge`:
* Android 10+ with gesture navigation enabled: Transparent background
* Android 10+ with button navigation enabled: Translucent background
* Older Android versions: Solid colour background

As far as I can tell, this currently isn't possible without changes to `styles.xml`.

## Current behaviour

#### Without setting `systemNavigationBarColor`:

```dart
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarBrightness: Brightness.light,
  statusBarIconBrightness: Brightness.dark,
  statusBarColor: Colors.transparent,
));
```
|Pixel 7 (Android 13) with Gesture Nav ❌ - Should be transparent | Pixel 7 (Android 13) with Button Nav ❌ - Should be translucent | Galaxy S8+ (Android 9) ✅
| ------------- | ------------- | ------------- |
| ![Pixel 7 Gesture Default](https://user-images.githubusercontent.com/20386860/215336729-ff61c40f-95d6-41d4-bd49-ba909ff2d6b7.png) | ![Pixel 7 Buttons Default](https://user-images.githubusercontent.com/20386860/215337239-d1c4a8c8-5176-4cce-8e47-c93d3fc09b89.png) | ![S8 Default](https://user-images.githubusercontent.com/20386860/215337285-b53dbb6d-488c-4eae-a287-a2af2bff3421.jpg)

#### With `systemNavigationBarColor` set to transparent:

```dart
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarBrightness: Brightness.light,
  statusBarIconBrightness: Brightness.dark,
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: Colors.transparent,
));
```
| Pixel 7 (Android 13) with Gesture Nav✅ | Pixel 7 (Android 13) with Button Nav ✅ | Galaxy S8+ (Android 9) ❌ - Icons are white on white 
| ------------- | ------------- | ------------- |
| ![Pixel 7 Gesture Transparent](https://user-images.githubusercontent.com/20386860/215337442-b30c105c-9b2a-490c-9d0d-d5529f61d63e.png) | ![Pixel 7 Buttons Transparent](https://user-images.githubusercontent.com/20386860/215337455-819fb297-5347-4e4b-96c9-b6795312cd17.png) | ![S8 Transparent](https://user-images.githubusercontent.com/20386860/215337460-9d3be8f1-5b60-43de-bcd6-a70ee5f088cf.jpg) |

Unfortunately setting `systemNavigationBarIconBrightness: Brightness.dark` doesn't work as a fix for the Galaxy S8 here, as the OS dark theme changes the navigation bar colour to black, and this colour only updates when the app is restarted.

## Workaround

As a workaround, I was able to get the expected behaviour by avoiding setting `systemNavigationBarColor` in Flutter and instead creating `styles.xml` files targeting Android 10:

`android\app\src\main\res\values-v29\styles.xml`
```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
</resources>
```
`android\app\src\main\res\values-night-v29\styles.xml`
```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
</resources>
```

This probably fits under https://github.com/flutter/flutter/issues/112301 but I couldn't find an issue describing this specific problem.

<details>
  <summary>flutter doctor -v</summary>

```
[√] Flutter (Channel stable, 3.7.0, on Microsoft Windows [Version 10.0.22621.1105], locale en-GB)
    • Flutter version 3.7.0 on channel stable at C:\Tools\Flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (6 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at C:\Users\Jon\AppData\Local\Android\sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • Java binary at: C:\Program Files\Eclipse Adoptium\jdk-11.0.17.8-hotspot\bin\java
    • Java version OpenJDK Runtime Environment Temurin-11.0.17+8 (build 11.0.17+8)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[!] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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
    X Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[√] VS Code (version 1.74.2)
    • VS Code at C:\Users\Jon\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.58.0

[√] Connected device (6 available)
    • Windows (desktop)            • windows            • windows-x64    • Microsoft Windows [Version 10.0.22621.1105]
    • Chrome (web)                 • chrome             • web-javascript • Google Chrome 109.0.5414.120
    • Edge (web)                   • edge               • web-javascript • Microsoft Edge 108.0.1462.76

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.
```

</details>