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 withSystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top])
more info you can find for that here https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html SystemChrome.setEnabledSystemUIOverlays()
is asynchronous