Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide android's bottom navigation bar in flutter

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?

enter image description here

like image 370
BenSabo Avatar asked Sep 17 '18 10:09

BenSabo


People also ask

How do you customize the bottom navigation bar in Flutter?

Now let's create our bottom navigation bar. In the HomePage class let's define the bottomNavigationBar attribute and assign a Container to it. Give it a height of 60 with some BoxDecoration (Pixels) add a Row as the child of the Container. Set the main axis alignment to space around.

How do I hide navigation bar?

The navigation bar is pinned by default. If you want to view files or use apps in full screen, double-tap the Show and hide button to hide the navigation bar. To show the navigation bar again, drag upwards from the bottom of the screen.


4 Answers

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

Document

like image 111
Coeus.D Avatar answered Oct 20 '22 16:10

Coeus.D


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

like image 43
Gokul Nath KP Avatar answered Oct 20 '22 17:10

Gokul Nath KP


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)

like image 9
coder Avatar answered Oct 20 '22 18:10

coder


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]);
like image 7
Mahmoud Abu Alheja Avatar answered Oct 20 '22 16:10

Mahmoud Abu Alheja