Skip to content

Flutter still doesn't support modern Android Q-style render-behind-navbar styling #69999

@Zee2

Description

@Zee2

Use case

As introduced back in 2019, Android Q brought new gesture navigation to Android. This involves a new way of rendering the bottom navigation UI. Instead of rendering the bottom nav as a separate opaque element (that could be fullscreened/hidden, depending on the app's needs), the new gesture nav element is draw on top of the app, with a dynamic contrast effect to make sure the gesture nav bar is always visible.

Please see this blog post for details: https://medium.com/androiddevelopers/gesture-navigation-going-edge-to-edge-812f62e4e83e

As far as I can tell, in Nov 2020, more than a year after this behavior was standardized in Android, it is still not possible to have this modern Android Q-style navigation rendering. In several issues, it has been stated that the Flutter engine is incapable of rendering behind the navbar (aside from when the navbar has been made transparent for fullscreen apps).

Some previous issues that saw no resolution:

#34678
#35748
#40974

image

image

There is a PR that was recently merged here, flutter/engine#21730, that seems to reference these issues; however, I've tested master on a modern Android device and it is still not possible to use a fully transparent, permanent gesture nav bar.

Most notable, Flutter Gallery itself does not even implement this behavior, with an outstanding issue that has been open since August 2019! flutter/gallery#643

Proposal

This is what modern Android 11 with a native app can do with the gesture nav, vs what Flutter does right now:

image

Here is the modern Android clock app:

You can clearly see how the nav bar is draw on top of the app, with the app drawing across the entire screen.

Given the huge number of comments on all of the issues related to this problem, it is really surprising to me that not only do the official Flutter demos, examples, and galleries not implement this type of navbar (which has been officially recommended for over a year), but that it seems to be actually impossible to implement in Flutter.

Metadata

Metadata

Assignees

Labels

a: layoutSystemChrome and Framework's Layout Issuesc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions