Flutter permanently hide navigation bar

Question

I am facing an issue in Flutter, at least with the Android emulator, which is quite annoying.

I am using a screen in full screen mode, so I wanted to get rid of the bottom navigation bar.

For that, after researching and checking here in stackoverflow, I am using the following command:

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

This is placed at the top of the class when the buid method starts.

The problem is that, it actually works and the bottom bar goes away BUT...as soon as I interact with the screen it pops up from the bottom, overlaying anything....

It is especially annoying because my app has a tab widget in the bottom...so as soon as I touch the screen, the bottom bar pops up...so I cannot really touch the tabs, I touch the overlaying bottom bar.

Anyone knows about this problem or has experience it before?

Answer 1

To achieve this functionality you will need the flutter services API.

Example steps to implement it:

• You need to import it from package:flutter/services.dart.
• Place SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) in the initState method of the stateful widget.
• Place SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]) in the dispose method of the stateful widget to re-enable the bottom nav when you navigate back from that screen for example.

Example code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyApp(),
        );
      }
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
        super.initState();
      }
      @override
      void dispose() {      
        SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top,SystemUiOverlay.bottom]);
        super.dispose(); 
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Sample App'),
          ),
          body: Center(
            child: Container(
              child: Text('Demo Screen.'),
            ),
          ),
        );
      }
    }

Things to know:

• It is not a good idea to put the SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) in the build method of the widget, because the build method executes every time your widget gets rebuild and that will hurt your app performance and can cause strange bugs like appearing and disappearing bottom nav.
• On Android if you have some input field where you need to use the keyboard the bottom nav will appear again and you will need to use the other method SystemChrome.restoreSystemUIOverlays() to prevent that or set it again with SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) more info you can find for that here https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
• SystemChrome.setEnabledSystemUIOverlays() is asynchronous

Answer 2

set this your main class before widget build, try this

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        SystemChrome.setEnabledSystemUIOverlays([]);
        return Scaffold(
          appBar: AppBar(
            title: Text('Sample App'),
          ),
          body: Center(
            child: Container(
              child: Text('Demo Screen.'),
            ),
          ),
        );
      }
    }