How to hide Android StatusBar in Flutter

Solution 1:

SystemChrome.setEnabledSystemUIOverlays([]) should do what you want.

You can bring it back with SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values).

Import it using

import 'package:flutter/services.dart';

Update answer (from Flutter 2.5 or latest):

SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);

Or you can use another options like:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
  SystemUiOverlay.bottom
]);  // to hide only bottom bar

Then when you need to re-show it (like when dispose) use this:

  @override
  void dispose() {
    super.dispose();

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);  // to re-show bars

  }

Solution 2:

import 'package:flutter/services.dart';

1.Hide Statusbar

SystemChrome.setEnabledSystemUIMode([SystemUiOverlay.bottom])

2. Transparant Statusbar

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
 ));

3.Show Statusbar

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

You need to put this code on :

1.For Single Screen

@override
  void initState() {
    // put it here
    super.initState();
  }

2.For All pages in main.dart:

 void main() {
      // put it here
      runApp(...);
  }

Solution 3:

You can use SystemChrome.setEnabledSystemUIOverlays([]) to hide and SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values) to bring it back again.

However, there will be slight grey area and there is not fix for this as of right now. When status bar is hidden, app bar's height remains the same.

See the github issue: https://github.com/flutter/flutter/issues/14432

Solution 4:

For single page (in page file):

@override
  void initState() {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    super.initState();
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIOverlays(
        [SystemUiOverlay.top, SystemUiOverlay.bottom]);
    super.dispose();
  }

For All pages (in main.dart):

void main() {
  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'Poppins'),
      home: SplashScreen()));
}

Dont forget to import 'package:flutter/services.dart'