How to hide android's bottom navigation bar in flutter

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

Document

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)

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

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

I think you can use this

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

in your initState()

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

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