How to hide Android StatusBar in Flutter

Question

How to hide the Android Status Bar in a Flutter App?

Answer 1

import 'package:flutter/services.dart';

1. Hide Statusbar

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])

2. Transparant Statusbar

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

3. Show Statusbar

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

Answer 2

First add SystemChrome.setEnabledSystemUIOverlays([]); to your Main function.

This leaves a slight grey area as mentioned in previous answers.

I have a simple fix for that (Just a workaround, works in most cases though).

In AppBar() just add

backgroundColor: Colors.transparent,
elevation: 0.0,

I hope this helps

Answer 3

You can add the below code in your main function to hide status bar.

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

Answer 4

Step1:Import below package

import 'package:flutter/services.dart';

Step2: Add the following code to your class init state like below

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    SystemChrome.setEnabledSystemUIOverlays([]);

  }

Answer 5

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'

Answer 6

This comment from Jonah Williams might be helpful in some situations as well https://github.com/flutter/flutter/issues/24472#issuecomment-440015464 if you don't want the status bar color be overridden by the AppBar.

You cannot provide a status bar color to the app bar, but you can create your own annotated region. It's not very intuitive right now, but you can use sized: false to override the child annotated region created by the app bar.

Somewhere, perhaps as a child of the scaffold:

Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(...),
    sized: false,
    child: ...
  )
);

Note that not all Android versions support status bar color or icon brightness. See the documentation on SystemUiOverlayStyle for the caveats.