Flutter permanently hide navigation bar Flutter permanently hide navigation bar dart dart

Flutter permanently hide navigation bar


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


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