How to hide Android StatusBar in Flutter

Question

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

hey pieter, how to make it solid and start my app screen below it? — M.Usman, Sep 20 '19 at 19:05
Wrap your body content with a SafeArea Widget code example: body: SafeArea(child: MyAppBody()), — S_i_l_e_n_t C_o_d_e_r, Sep 23 '20 at 08:09
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. — genericUser, Jan 30 '21 at 20:58

score 219 · Accepted Answer · edited Apr 28 '23 at 11:53

219

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

  }

edited Apr 28 '23 at 11:53

DarkNeuron

7,981
2
43
48

answered May 09 '17 at 20:29

Collin Jackson

110,240
31
221
152

3

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? – Deborah Feb 02 '18 at 21:29
36

@Deborah I guess it's like this: `SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);` – Filip Raj Mar 16 '18 at 10:35
2

is there a way to just disable this greyish tint? – Hannes Tiltmann Mar 28 '18 at 11:42
@Hannes.T As of now there is no way, you can upvote this issue on [Github](https://github.com/flutter/flutter/issues/14432) – CopsOnRoad Oct 28 '18 at 14:49
7

@GunterZochbauer The status bar appears again when the keyboard is opened on Android – BraveEvidence Jan 30 '19 at 08:07
https://github.com/flutter/flutter/issues/24472#issuecomment-440015464 might help – Günter Zöchbauer Jan 30 '19 at 08:10
where to use this ? – Ashish Gupta May 21 '20 at 12:11
1

Close the app, open again, the status bar appears again! It does not solve the problem permanently! – genericUser Jan 30 '21 at 21:07
Just to note this function is now deprecated in favour of 'setEnabledSystemUIMode' – Webkraft Studios Sep 17 '21 at 13:57

score 115 · Answer 2 · edited Feb 01 '22 at 09:01

115

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

edited Feb 01 '22 at 09:01

Ravindra S. Patil

11,757
3
13
40

answered Mar 20 '20 at 07:11

Sanjayrajsinh

15,014
7
73
78

where are we supposed to write it – Rahul Khanna Feb 17 '21 at 07:17
@Sanjayrajsinh When I implemented this only for the first screen,second screen flickers on navigating from first to the second screen. – Ranjit Shrestha Mar 13 '21 at 11:21
void main() { WidgetsFlutterBinding.ensureInitialized(); //you may need this line SystemChrome.setEnabledSystemUIOverlays([]); runApp(....); } – UenX Apr 10 '21 at 02:35
@UenX use the code text to write code – Zuher Abud Said Feb 22 '22 at 09:33
I'm surprised this has so many upvotes. Using this code gives the error ==> The argument type 'List' can't be assigned to the parameter type 'SystemUiMode' – GraSim Aug 23 '22 at 11:43

Code on the Rocks · Answer 3 · 2022-09-11T22:47:05.870

27

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

edited Sep 11 '22 at 22:47

answered Sep 28 '21 at 17:23

Code on the Rocks

11,488
3
53
61

Best answer for 2022 – Simonov Dmitriy Apr 21 '22 at 14:28

score 26 · Answer 4 · answered Jun 29 '18 at 20:44

26

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

answered Jun 29 '18 at 20:44

goops17

1,152
10
18

1

CollinJackson mentioned the same thing, and you just added grey area stuff, so this is not an answer, it is better suited a comment. – CopsOnRoad Jan 14 '19 at 13:41

score 26 · Answer 5 · edited Jul 18 '20 at 15:10

26

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'

edited Jul 18 '20 at 15:10

Jiya

745
8
19

answered Jul 08 '20 at 08:23

Sumanth

260
3
6

1

When you share code snippet as an answer, please try to explain it too – Yunus Temurlenk Jul 08 '20 at 09:00
3

Status bar will show again when navigate to new route and keyboard is open.do you know how to fix it? – m.r.davari Sep 09 '20 at 21:10

score 13 · Answer 6 · answered Feb 23 '19 at 14:55

13

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

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

answered Feb 23 '19 at 14:55

Unnikrishnan

2,683
5
22
39

4

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. – CopsOnRoad Mar 06 '19 at 12:14
1

@CopsOnRoad, that is indeed what it does. Just tested. – Neil P. Apr 09 '19 at 01:48
@Neil Do you mean it isn't taking up space? – CopsOnRoad Apr 09 '19 at 07:42
1

@CopsOnRoad 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. – Neil P. Apr 09 '19 at 11:56

croxx5f · Answer 7 · 2021-12-27T01:08:23.800

10

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:

edited Dec 27 '21 at 01:08

answered Sep 15 '21 at 08:13

croxx5f

5,163
2
15
36

1

Read more about the different `SystemUiMode`s here: https://api.flutter.dev/flutter/services/SystemUiMode-class.html – Pierre Sep 16 '21 at 05:43
the link is not working which is been provided as here (https://api.flutter.dev/flutter/services/SystemUiMode-class.html) the last line, can you please check it once. – Spsnamta Dec 26 '21 at 12:52

score 4 · Answer 8 · answered Jan 30 '19 at 08:13

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.

score 4 · Answer 9 · answered Apr 19 '21 at 09:18

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

score 3 · Answer 10 · edited Sep 06 '20 at 01:29

3

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

edited Sep 06 '20 at 01:29

FluffyKitten

13,824
10
39
52

answered Sep 06 '20 at 00:02

AbdulWahab

31
3

score 2 · Answer 11 · answered Aug 05 '19 at 22:46

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

score 2 · Answer 12 · answered May 21 '20 at 12:35

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

  }

score 2 · Answer 13 · answered Sep 23 '20 at 08:28

2

 body: MyAppBody(),

CHANGE THIS TO

body: SafeArea(child: MyAppBody()),

answered Sep 23 '20 at 08:28

S_i_l_e_n_t C_o_d_e_r

313
5
9

This doesn't hide the status bar, just make the body container not to slip behind it. – Ruben Nov 15 '20 at 00:51

score 2 · Answer 14 · answered Jul 22 '22 at 06:59

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.

score 1 · Answer 15 · answered Aug 28 '22 at 10:42

1

this is work for me

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

answered Aug 28 '22 at 10:42

Adnan Bashir

645
4
8

Guy Luz · Answer 16 · 2023-07-09T09:13:05.223

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

Scaffold missing extendBodyBehindAppBar to true

    Scaffold(
      extendBodyBehindAppBar: true,

Make sure first element on the screen is not SafeArea

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. — Ramji, Jul 07 '23 at 06:09
@Ramji after updating the styles.xml, run flutter clean. I have edited the answer to add the code for example. — Eternity, Jul 08 '23 at 22:07
@Ramji Please check again, I have added "More cases" part to the answer. — Guy Luz, Jul 09 '23 at 09:09

score 0 · Answer 17 · answered Sep 12 '21 at 08:24

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.

score 0 · Answer 18 · answered Sep 27 '21 at 02:42

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

score 0 · Answer 19 · answered Apr 26 '22 at 17:50

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.

score 0 · Answer 20 · answered Feb 01 '23 at 07:48

0

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

answered Feb 01 '23 at 07:48

Ricardo Alexis Huerta Salazar

25
6

score 0 · Answer 21 · answered Apr 25 '23 at 04:53

0

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

answered Apr 25 '23 at 04:53

sokheng khorn

21
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34278045) – Brian Tompsett - 汤莱恩 Apr 28 '23 at 17:48
not good when you have multiple pages in your app. – Noryn Basaya Jul 25 '23 at 08:44