flutter / flutter/flutter

Custom SystemUiMode.immersiveSticky required

Open
#164,428 3 comments 3 reactions 0 assignees View on GitHub
c: new feature c: proposal framework P3 platform-android team-framework triaged-framework
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Use case

**`SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);`**

**`SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);`**

### Proposal

In android platform,
we need to fully handle status bar and bottom nav bar.

We want to set the SystemUiMode in Flutter to immersiveSticky but only hide the bottom navigation bar, keeping the status bar always visible. Let me think about how to approach this.

First, I know that SystemChrome.setEnabledSystemUIMode is the method used in Flutter to change the system UI visibility. The immersiveSticky mode typically hides both the status and navigation bars, but we want the status bar to stay visible. So maybe there's a way to customize the flags passed to the system UI mode.

Looking into the SystemUiMode options, there's immersiveSticky which uses a combination of flags. But perhaps instead of using the predefined mode, I can set the system UI overlay flags manually. The status bar corresponds to the top system overlays, and the navigation bar is the bottom one.

In Android, the flags for hiding the navigation bar are SYSTEM_UI_FLAG_HIDE_NAVIGATION and SYSTEM_UI_FLAG_IMMERSIVE_STICKY. But in Flutter, these flags can be set using SystemUiOverlay. However, SystemUiOverlay usually combines top and bottom.

The SystemUiOverlay class has a static method called only, which takes top and bottom booleans. So if I set the overlays to only show the top (status bar), then the bottom (navigation bar) would be hidden. But how does that interact with the immersiveSticky mode?

Alternatively, maybe the approach is to use SystemChrome.setEnabledSystemUIMode with a custom set of flags.

`SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);`

When we set overlays to [SystemUiOverlay.top], it should show the status bar (top) and hide the navigation bar (bottom). But then how to make it immersive sticky. Because setting the overlays to top would hide the bottom, but without the immersive sticky behavior.

If we set the mode to SystemUiMode.immersiveSticky, and then set overlays to [SystemUiOverlay.top], flutter ignore overlays.

**I think that it should allow to use like this:**
**`SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: [SystemUiOverlay.top]);`**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.