Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

iPhone X screen capture

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.

like image 257
iProgram Avatar asked Aug 23 '18 19:08

iProgram


People also ask

Can you hide the bar on iPhone X?

Can You Get Rid of the Bottom Bar on an iPhone? The iPhone does not have a setting you can enable or disable to control the display of the bottom bar. Developers can write code that auto-hides the bar on some apps.

How do I hide navigation bar on iPhone?

You can find the Website View menu in what's called the Smart Search field at the top of the Safari interface. Launch the app and navigate to a website, then tap the "aA" icon in the upper left corner of the screen. Simply select Hide Toolbar from the dropdown menu, and the toolbar will shrink to show just the URL.


2 Answers

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.

For your specific case I suggest that calling it in the main function should work fine for a start:

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.

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.

like image 56
creativecreatorormaybenot Avatar answered Oct 03 '22 18:10

creativecreatorormaybenot


I made a package to do this: add home_indicator to your pubspec.yaml, then

import 'package:home_indicator/home_indicator.dart';

await HomeIndicator.hide();
like image 41
Lynn Avatar answered Oct 03 '22 20:10

Lynn