How to hide Android StatusBar in Flutter

Question

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

Sharpen

hey pieter, how to make it solid and start my app screen below it? – Carloscarlota

Wrap your body content with a SafeArea Widget code example: body: SafeArea(child: MyAppBody()), – Hers

Right now NONE of the answers are permanently. You can hide the bar for the first time The next time you will open your app it will return the default android state. – Jackass

Answer 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 only hide the status 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

  }

Matteroffact

Is this supposed to also remove the Android bottom button bar? (It does). If there is a way to remove status bar only, what is the proper way to do that? – Erinerina

@Erinerina I guess it's like this: SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); – Goldina

is there a way to just disable this greyish tint? – Alps

@Hannes.T As of now there is no way, you can upvote this issue on Github – Arnulfo

@GunterZochbauer The status bar appears again when the keyboard is opened on Android – Cortese

github.com/flutter/flutter/issues/24472#issuecomment-440015464 might help – Upbraiding

where to use this ? – Stockjobber

Close the app, open again, the status bar appears again! It does not solve the problem permanently! – Jackass

Just to note this function is now deprecated in favour of 'setEnabledSystemUIMode' – Grannia

Answer 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(...);
  }

Aureus

where are we supposed to write it – Ferneferneau

@Aureus When I implemented this only for the first screen,second screen flickers on navigating from first to the second screen. – Astatic

void main() { WidgetsFlutterBinding.ensureInitialized(); //you may need this line SystemChrome.setEnabledSystemUIOverlays([]); runApp(....); } – Canberra

@Canberra use the code text to write code – Diacetylmorphine

I'm surprised this has so many upvotes. Using this code gives the error ==> The argument type 'List<SystemUiOverlay>' can't be assigned to the parameter type 'SystemUiMode' – Colton

Answer 3

Most of these answers are outdated now that Flutter 2.5 supports various full screen modes on Android.

Now, the suggested way to hide the status bar is this:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

You can set the SystemUiMode to any of the following SystemUiMode enums:

• immersive
• immersiveSticky
• leanBack
• edgeToEdge

Skulk

Best answer for 2022 – Argyll

Answer 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'

Dowitcher

When you share code snippet as an answer, please try to explain it too – Fanfare

Status bar will show again when navigate to new route and keyboard is open.do you know how to fix it? – Laurenalaurence

Answer 5

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

Hoarhound

CollinJackson mentioned the same thing, and you just added grey area stuff, so this is not an answer, it is better suited a comment. – Arnulfo

Answer 6

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

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

Groth

I haven't tested this out but I believe this will take up the 24dp and won't let you use the area you wanted to use. – Arnulfo

@CopsOnRoad, that is indeed what it does. Just tested. – Nonmoral

@Neil Do you mean it isn't taking up space? – Arnulfo

@Arnulfo it doesn't hide the status bar, but just makes it the same color as your app bar (no borders either). So yeah, you could say that it (status bar).*is* taking up space & won't let you use the area the OP wanted to use. – Nonmoral

Answer 7

As of flutter 2.5 setEnabledSystemUIOverlays is deprecated you can dissapear the status bar via:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

And revert it

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

Also you can pass a List<SystemUiOverlay>? overlays as older answers state as a second named parameter to the function as:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,overlays: [])

In the list you can specify if you will display SystemUiOverlay.bottom, SystemUiOverlay.top or none by leaving the list empty []

EDIT thanks to Pierre :

Read more about the different SystemUiModes here:

Deposal

Read more about the different SystemUiModes here: api.flutter.dev/flutter/services/SystemUiMode-class.html – Suppurate

the link is not working which is been provided as here (api.flutter.dev/flutter/services/SystemUiMode-class.html) the last line, can you please check it once. – Enrichment

Answer 8

Before

Using immersiveSticky will hide the StatusBar

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

After

Missing in other answers

You might notice that now size of the app got smaller (DEBUG banner is below the camera) and there is a black area at the top

As described here to solve it please add this line of code

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

into

android/app/src/main/res/values/styles.xml

Sample code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/launch_background</item>

        <!-- Add the code here-->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

Then run flutter clean and run the app again.

Draw elements on the system tray

Now if you wish that your elements will get drawn on the system tray area

1. Scaffold missing extendBodyBehindAppBar to true

    Scaffold(
      extendBodyBehindAppBar: true,

2. Make sure first element on the screen is not SafeArea

Oftentimes

hello @Gut Luz, Does still answer still works ? I have added item name.. in my styles.xml file but still a black bar is visible at the top. Could you please upload a screenshot of your styles.xml file with that code in it, also a small example of code which removes the Appbar. – Jot

@Jot after updating the styles.xml, run flutter clean. I have edited the answer to add the code for example. – Standfast

@Jot Please check again, I have added "More cases" part to the answer. – Oftentimes

Answer 9

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.

Synchronic

Answer 10

To achieve this functionality you will need the flutter services API.

Example steps to implement it:

• You need to import package:flutter/services.dart.
• Place SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) 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 Status bar 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.bottom]);
        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 status bar or bottom nav.
• On Android if you have some input field where you need to use the keyboard the status bar 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.bottom]) more info you can find for that here https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
• SystemChrome.setEnabledSystemUIOverlays() is asynchronous

Hadji

Answer 11

i: To hide status bar: SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

ii: Use SafeArea Widget it will make sure that your app does not take status bar area.

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
            child: Text('Do not take status bar area on screen!'),
          ),
        );
}

Handtomouth

Answer 12

import 'package:flutter/services.dart';

To enable system UI overlays, we need to call SystemChrome.setEnabledSystemUIMode (this method replaces SystemChrome.setEnabledSystemUIOverlays).

Add these lines to the main() function before runApp():

void main() {
  // Add these 2 lines 
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIOverlays([
     SystemUiOverlay.bottom, //This line is used for showing the bottom bar
  ]);

  // After that, call runApp() as usual
  runApp(MyApp());
}

The code above will remove the status bar from all screens. If you only want to remove them from a specific screen, place the settings code inside the initState() method instead:

@override
void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
      SystemUiOverlay.bottom,
    ]);
}

If you want to show the status bar again, just place the SystemUiOverlay.top option inside the square brackets or remove the SystemChrome.setEnabledSystemUIMode function.

Grayling

Answer 13

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

Shaving

Answer 14

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([]);

  }

Stockjobber

Answer 15

 body: MyAppBody(),

CHANGE THIS TO

body: SafeArea(child: MyAppBody()),

Hers

This doesn't hide the status bar, just make the body container not to slip behind it. – Standin

Answer 16

this is work for me

  @override
  void initState() {
    // TODO: implement initState
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    super.initState();
  }

Gurgle

Answer 17

Following has been deprecated now after v2.3.0-17.0

 SystemChrome.setEnabledSystemUIOverlays

To hide status bar throughout the application (not just one screen) I used following two attributes in app theme declared in

android -> app -> src -> main -> res -> values -> styles.xml

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

Now status bar is not visible from Splash screen to any screen in my app.

Moly

Answer 18

Some of the above is deprecated in favor of:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: [SystemUiOverlay.bottom]);

What I am finding strange is that I placed this in initState of my second screen rather than in void main of the app but it is applied to all my screens nonetheless.

https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIMode.html

Grandparent

Answer 19

For me SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); worked the best. With this, if you swipe up at the bottom, the status and navigation bars are displayed with a transparency, and if you touch somewhere else, they go away after a while.

With SystemUiMode.immersive, the status bars are permanently displayed if you swipe up from the bottom, and the navigation bar is opaque.

With SystemUiMode.leanBack, the navigation bar is permanently displayed if you swipe up, and it is opaque.

Troika

Answer 20

You can use SystemUiMode.immersiveSticky to hide top and bottom bar, and preserve them hidden. (Use it on your main function):

void main() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
runApp(const MyApp());
}

Nicolenicolea

Answer 21

Adding this to main does not work but put it in the initState of the widget does hide the status bar. SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);

Insistency

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Earthy

not good when you have multiple pages in your app. – Henchman