How to hide the Navigation Bar (on the iPhone X) in Flutter

Question

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.

Solution 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.

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.

Solution 2

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();