How to hide android's bottom navigation bar in flutter

Question

I'm really new in flutter and also in Android dev, but is it possible to hide the bottom navigation bar (see which item do i mean below) programmatically?

score 23 · Accepted Answer · answered Sep 17 '18 at 10:07

23

Try this: SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

Document

answered Sep 17 '18 at 10:07

Coeus.D

919
7
15

1

Well i used this, but after that, i've got an blank white space. And can't really put anything there. – BenSabo Sep 17 '18 at 12:32
4

Oh, this solved it. Scaffold( resizeToAvoidBottomPadding: false, appBar: new AppBar(), ); – BenSabo Sep 17 '18 at 12:35
While this is working but on some devices when we touch screen it displays that bottom navigation bar. Any guess how we can resolve that. – Purvik Rana Mar 25 '20 at 06:51
this seems to be deprecated – Panduranga Rao Sadhu May 19 '20 at 23:05
9

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) is not working for me. When touching the screen the bottom bar appears persistently. – genericUser Feb 09 '21 at 15:13
@genericUser this happens to me too, any solutions? – Wail Hayaly Apr 19 '21 at 23:25
1

Seems that flutter team does nothing about it. https://github.com/flutter/flutter/issues/62412 – genericUser Apr 20 '21 at 06:39
SystemChrome.setEnabledSystemUIOverlays is depreciated. Please refer to https://stackoverflow.com/questions/69326384/setenabledsystemuioverlays-is-deprecated-and-shouldnt-be-used-migrate-to-seten this link. – codepilot Sep 28 '21 at 10:27
i think this is deprecated now – theboshy Jan 27 '22 at 05:03

score 11 · Answer 2 · answered Jan 12 '22 at 19:06

At the time of writing this answer all of the other posts here are outdated, using setEnabledSystemUIOverlays will give a deprecation message.

To hide the system navigation bar or status bar import:

import 'package:flutter/services.dart';

And use the service SystemChrome.setEnabledSystemUIMode

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

The function setEnabledSystemUIMode receives the SystemUiMode Enum which has the following options:

leanBack - Fullscreen display with status and navigation bars presentable by tapping anywhere on the display.
immersive - Fullscreen display with status and navigation bars presentable through a swipe gesture at the edges of the display.
immersiveSticky - Fullscreen display with status and navigation bars presentable temporarly through a swipe gesture at the edges of the display.
edgeToEdge - Fullscreen display with status and navigation elements rendered over the application.
manual - Declares manually configured [SystemUiOverlay]s. (look at the docs for more information)

score 10 · Answer 3 · answered Oct 22 '20 at 18:27

For specifies the set of system overlays to have visible when the application is running. you can use below static method:

  SystemChrome.setEnabledSystemUIOverlays(List<SystemUiOverlay> overlays)

Examples :

1 - For Hide bottom navigation bar and Still Status bar visible

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

2 - For Still bottom navigation visible bar and Hide Status bar

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

3 - For hide both bottom Navigation and Status bar

SystemChrome.setEnabledSystemUIOverlays([]);

4 - For make both visible

 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);

score 7 · Answer 4 · answered Sep 17 '18 at 10:17

7

Use SystemChrome.setEnabledSystemUIOverlays([]) to hide the status bar and the navigation bar.

answered Sep 17 '18 at 10:17

Gokul Nath KP

15,485
24
88
126

score 5 · Answer 5 · answered Jan 27 '22 at 05:05

5

I think you can use this

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

in your initState()

answered Jan 27 '22 at 05:05

theboshy

378
6
17

score 1 · Answer 6 · answered May 29 '21 at 17:21

1

Currently this feature is bugged in flutter, you can see this issue here.

https://github.com/flutter/flutter/issues/62412

Normally you would need to do the following:

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

answered May 29 '21 at 17:21

cs guy

926
2
13
33

score 0 · Answer 7 · answered Aug 19 '23 at 05:55

You can follow this method to hide the system navigation bar

import the services.dart package in your main.dart file

import 'package:flutter/services.dart';

in your void main(){} add this

void main(){

  WidgetsFlutterBinding.ensureInitialized();

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

  runApp(const <Your App Name>());

}

score -1 · Answer 8 · answered Jun 05 '22 at 09:14

This Approach is depreciated SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

To show the status bar only

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

To show the system navigation bar only

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,overlays: [SystemUiOverlay.bottom]);

To hide both

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,
    overlays: []);

It is better the put it before the runApp method like this

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays:[]).then(
        (_) => runApp(MyApp()),
  );
}

How to hide android's bottom navigation bar in flutter

8 Answers8

Linked