[Android 10] Unable to set transparent navigation bar

[Zazo032]

Steps to Reproduce

Run the provided code on an Android 10 device. Tested on a physical Pixel 3 XL running latest Android 10 stable release.

Expected: The blue background pushes until the bottom of the screen, while the gestures bar stays floating over the app.

Result: The navigation bar is still black, the app doesn't draw until the bottom.

Sample code

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

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
          child: Text('Test'),
        ),
      ),
    );
  }
}

Flutter doctor output

[√] Flutter (Channel master, v1.10.6-pre.20, on Microsoft Windows [Version 10.0.18362.356], locale es-ES)
    • Flutter version 1.10.6-pre.20 at C:\src\flutter
    • Framework revision c238045a96 (35 minutes ago), 2019-09-20 07:58:53 -0700
    • Engine revision 70f21b0edb
    • Dart version 2.6.0 (build 2.6.0-dev.1.0 7c1821c4aa)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\Cristian\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (1 available)
    • Pixel 3 XL • 89PY09NNV • android-arm64 • Android 10 (API 29)

• No issues found!

Related to #34678

cc/ @shihaohong

[escamoteur]

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
I think you are not passing the right value, it should either be .top or .bottom.

I close this issue if you have further problems please reopen it.

[Zazo032]

Passing .values passes both .top and .bottom, also passing .bottom or .bottom + .top results in the same behavior.

[escamoteur]

Sorry you are right, I didn't see that it accepts a List.

[shihaohong]

Hi, you're supposed to pass a list of the system UI overlays that you want to show into SystemChrome.setEnabledSystemUIOverlays. So, to hide the navigation bar, you have to use SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]), meaning you'd only like to display the top status bar.

edit: If what you're looking for is to have the app appear fullscreen (to also hide the status bar), you'd do SystemChrome.setEnabledSystemUIOverlays([])

Please check to see if this works for you. Thank you!

[cpboyd]

@shihaohong

I think what he's trying to do is something more like:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent,
    ));

However, I'll note that setting that on the standard Material dark mode theme results in a white background beneath the Scaffold, which looks wrong.

Edit: Just to clarify, on my system the SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) hides the gesture bar (swiping up will show it again) which doesn't seem to be what this issue or #34678 were asking to do.

[Zazo032]

Hi, you're supposed to pass a list of the system UI overlays that you want to show into SystemChrome.setEnabledSystemUIOverlays. So, to hide the navigation bar, you have to use SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]), meaning you'd only like to display the top status bar.

edit: If what you're looking for is to have the app appear fullscreen (to also hide the status bar), you'd do SystemChrome.setEnabledSystemUIOverlays([])

Please check to see if this works for you. Thank you!

@shihaohong that solution hides (you have to swipe up to enable it again) the gestures navigation bar, but the desired behavior is to make it transparent so the gestures bar "floats" over the UI. Here are the desired vs. actual screenshots explaining it for a better understanding. Also, here's a small explanation on how to achieve it, and a GIF showing the result: https://twitter.com/davey_burke/status/1126878112170405888

[shihaohong]

I think @cpboyd's suggestion achieves the effect you want, but the issue is that for some reason, Flutter apps are laid out above the navigation bar. Unfortunately, having a transparent navigation bar does not make a difference since the app is never laying out where the navigation bar is.

Some experimenting I did found me a way to remove both the system status bar and the navigation bar, but it also causes MediaQuery.padding to be set to zero (which will cause some layout problems with existing widgets). I'll need to figure out if:

1. there's a way to preserve the system window padding while laying out full screen
2. there's a way to set just the nav bar or status bar to transparent, not both simultaneously

• in {path-to-project}/android/app/src/main/java/com/example/{project_name}/MainActivity.java, add the following:

// add these imports
import android.os.Build;
import android.view.Window;
import android.view.WindowManager;

// ...

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // add these lines
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Window window = getWindow();
        window.setFlags(
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
        );
    }
    // ...
  }
}

Screenshot of achieved effect

[escamoteur]

@HansMuller could you please have a look at this if we have an issue here or just mistakes by the users?