How to hide the Navigation Bar (on the iPhone X) in Flutter
How to hide the Navigation Bar (on the iPhone X) in Flutter
How do I hide the navigation bar, which was introduced to iOS with the iPhone X in Flutter?
In the image I would want to hide the white bar at the bottom, which is the standard navigation bar for the new iOS version.
Ive tried searching for it but cannot find anything useful at all. Hence why I am asking here.
– iProgram
Aug 23 at 19:53
@AshleyMills What more information do you expect?
– creativecreatorormaybenot
Aug 23 at 19:59
@creativecreatorormaybenot At least something on how to hide the home indicator. I don't want to just put widgets on top of it. In swift, we override
prefersHomeIndicatorAutoHidden– iProgram
Aug 23 at 20:03
prefersHomeIndicatorAutoHidden
I was defending your post in the regards @AshleyMills critized because I felt like the information you provided was enough.
– creativecreatorormaybenot
Aug 23 at 20:10
1 Answer
1
In Flutter, SystemChrome takes care of it.
The function setEnabledSystemUIOverlays takes a List of the enum SystemUiOverlay, i.e. SystemUIOverlay.bottom, SystemUIOverlay.top, both or none at all.
SystemChrome
setEnabledSystemUIOverlays
List
SystemUiOverlay
SystemUIOverlay.bottom
SystemUIOverlay.top
For your specific case I suggest that calling it in the main function should work fine for a start:
main
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
runApp(...);
As you can see, I only provided SystemUIOverlay.top, which will consequently disable the bottom part of the system's UI overlay, which is the home indicator on your the new iOS navigation and also the navigation of Android, which is going to be hidden.
SystemUIOverlay.top
I am not aware of all runtime scenarios on iOS, which means that you might need to call SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) more often or even provide no elements to the list if full screen mode is required to hide the system navigation.
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top])
Thanks for answering. That didn't fix my issue though. See the updated post for more information. I also tried it without the .bottom.
– iProgram
Aug 23 at 20:18
@iProgram My second suggestion should have obviously been to provide an empty
List, like this: – creativecreatorormaybenot
Aug 23 at 20:20
List
Ive just tried that and still no update.
– iProgram
Aug 23 at 20:23
Ive also tried to but it in my build function.
– iProgram
Aug 23 at 20:37
Thanks for posting it as an issue. So looks like I can't hide it at the moment them. Ive replied back incase other people need to ask questions on the issue.
– iProgram
Aug 23 at 20:48
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please show what research you've undertaken, what you've already tried, what didn't work, code samples etc. Read How to Ask and Minimal, Complete, and Verifiable example and update your question.
– Ashley Mills
Aug 23 at 19:51