[Android 10] Unable to set transparent navigation bar

@shihaohong

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

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.

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

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

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

@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.

@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!

@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

@cpboyd

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:

there's a way to preserve the system window padding while laying out full screen
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

@HansMuller

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

I just tried this on my phone. When I run the app from the following gist on the latest master of Flutter it appears to do what I would expect:

https://gist.github.com/goderbauer/e435f9290211b180d2eb98344007b2c1

video.mp4

Is there anything we're still missing?

@goderbauer

@goderbauer from my testing in latest master, this works in your case because of the line: SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

The issue is that it also causes the navigation bar to start invisible, and the first tap to be ignored (it exits "overlay mode" and brings the navigation bar back).

Removing that line reverts to the previous behaviour, where the navigation bar isn't transparent.

@cachapa

@cachapa Thanks for the explanation. I see that now too in my example. As other's have pointed out, as a work around you can call the Andorid API's from the Java/Kotlin side of your Flutter application for now. I've uploaded an example for that here: goderbauer/scratchpad@fb5c97d. But yeah, we should come up with a way to easily configure this from Flutter land.

@goderbauer

@goderbauer thanks a lot for your update. I tested it here and your solution seems to work well.

I changed two things though:

You're setting the navigation bar color in the Android code as window.navigationBarColor = 0 but that can be moved to Flutter instead: systemNavigationBarColor: Colors.transparent as you had in your original solution.
Adding the androidx dependency bumped my method count over the limit which required another dependency just so I could use multidex (ugh, now I remember why I dislike Android native dev). I just imported the code for setDecorFitsSystemWindows from androidx and avoided the hassle.

@goderbauer

Thanks @goderbauer et co for looking into this. This really is an issue that has been open for a long time and being discussed in a few issues at least. I would love to see a solution that makes it possible to configure this from Flutter land as well.

I'm going to try the solutions mentioned here as well. Previously I followed the setup discussed here: #69999 (comment)

Worked well once I got the Android magic to work, but yes it requires Android tinkering as well and only worked with API 30 and higher, so not so useful yet. Something that works starting with API 28 would be superb, but 29 is much better than 30 already, since 30 is still barely used.

Regarding the experiment in #69999 (comment) the right GIF show a slider adjusting the transparency in a systemNavigationBarColor: myColor.withOpacity(x) when x hits 0 then we get a translucent scrim applied instead, so the nav bar is no longer fully transparent, whereas a color with an opacity very close to zero, will look fully transparent.

@Piinks

/cc @Piinks, who expressed interest in looking into exposing this from Flutter-land.

I think this can be done without the consumed tap to bring up the navigation bar mentioned in #40974 (comment)

I have found that by explicitly setting the enabledSystemUIOverlays to an empty list, it appears you actually end up in a native full screen mode. When I tried this, a native pop up let me know that I was in full screen mode and could bring up navigation by swiping the edges of the screen.

I have tried this on a Pixel 2 and Pixel 4.
Please let me know if this is the desired effect. :)

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent,
  ));
  // This appears to result in native full screen mode
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: 0,
        selectedItemColor: Colors.amber[800],
        onTap: (_) {},
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 2.1.0-13.0.pre.390, on macOS 11.2.3 20D91 darwin-x64, locale en)
    • Flutter version 2.1.0-13.0.pre.390 at /Users/katelovett/_github/flutter
    • Framework revision 88f2db6214 (47 minutes ago), 2021-04-01 14:54:02 -0400
    • Engine revision 2edfc020bb
    • Dart version 2.13.0 (build 2.13.0-190.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/katelovett/Library/Android/sdk
    • Platform android-S, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio with Blaze.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 at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio
    • Android Studio at /Applications/Android Studio with Blaze.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)

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

[✓] Connected device (3 available)
    • Pixel 4 (mobile) • 99051FFAZ00B06 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos          • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 89.0.4389.114

• No issues found!

@Piinks

@Piinks I think this issue is not about the native fullscreen mode, but about the Edge-To-Edge mode, which is something different.

Your solution completely hides the navigationbar, but the goal was to keep the navigation bar, but make its background transparent. So that the draws behind the navigation bar, but the long horizontal line for gesture navigation would still be visible

See: https://medium.com/androiddevelopers/gesture-navigation-going-edge-to-edge-812f62e4e83e

try set the navBar Color(0x00010000) instead of Colors.transparent

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 10] Unable to set transparent navigation bar #40974

Steps to Reproduce

Sample code

Flutter doctor output

42 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Android 10] Unable to set transparent navigation bar #40974

Description

Steps to Reproduce

Sample code

Flutter doctor output

Activity

escamoteur commented on Sep 20, 2019

Zazo032 commented on Sep 20, 2019

escamoteur commented on Sep 20, 2019

shihaohong commented on Sep 21, 2019

cpboyd commented on Sep 22, 2019

Zazo032 commented on Sep 23, 2019

shihaohong commented on Sep 23, 2019

escamoteur commented on Sep 23, 2019

sgehrman commented on Jan 11, 2020

42 remaining items

goderbauer commented on Feb 4, 2021

cachapa commented on Feb 4, 2021

goderbauer commented on Feb 4, 2021

cachapa commented on Feb 7, 2021

rydmike commented on Feb 9, 2021

goderbauer commented on Feb 9, 2021

Piinks commented on Apr 1, 2021

LasseRosenow commented on Apr 1, 2021

graycatdeveloper commented on Apr 11, 2021

github-actions commented on Jul 30, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions