Custom SystemUiMode.immersiveSticky required
- 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
Assessment
This issue has not been assessed yet.