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

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