CODEWITHSUNDEEP
flutterdartflutter-layoutstatusbar
SardorbekR
SardorbekR

Reputation: 1768

Hiding/Removing StatusBar in Flutter (on button click)

In my app when button clicked, I want statusBar to be absolutely hidden.

I've already tried SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); and SystemChrome.setEnabledSystemUIOverlays([]); it makes statusBar black but it still takes space on top of the screen.

So how can I make statusBar disappear fully when I click specific button?

Upvotes: 0

Views: 9113

Answers (2)

Code on the Rocks
Code on the Rocks

Reputation: 17784

In Flutter 2.5, you would do this using the following snippet:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

You can use any of the following SystemUiMode enums:

  • immersive
  • immersiveSticky
  • edgeToEdge
  • leanBack

Upvotes: 3

Shahmil
Shahmil

Reputation: 341

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); works fine, the remaining space you are seeing is just the AppBar. You can change the size of the AppBar at the same time you hide the status bar, by wrapping it in a PreferredSize widget and setting the size property to a variable that you change with setState when the button is pressed.

Status bar hidden and AppBar resized

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  double appBarHeight = 55;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(appBarHeight),
          child: AppBar(
            title: const Text('Hide Status Bar'),
          ),
        ),
        body: Scaffold(
          body: Center(
            child: RaisedButton(
              onPressed: () {
                SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
                setState(() {
                  appBarHeight = 35; // After status bar hidden, make AppBar height smaller
                });
              },
              child: Text("Hide Bar"),
            ),
          ),
        ),
      ),
    );
  }
}

EDIT: TO HIDE STATUS BAR, NAV BAR, AND THEIR RESERVED SPACES

To hide both status bar, navigation bar, and the spaces that are reserved for them like this:

Remove status bar, navigation bar, and spaces

You can get rid of both using SystemChrome.setEnabledSystemUIOverlays([]);, then set your AppBar to null using a bool and setState, and set the resizeToAvoidBottomInset property of your scaffold to false.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool showAppBar = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: appBar(),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              SystemChrome.setEnabledSystemUIOverlays([]);
              setState(() {
                showAppBar = false;
              });
            },
            child: Text("Hide Bar"),
          ),
        ),
      ),
    );
  }

  appBar() {
    if (showAppBar) {
      return AppBar(
        title: const Text('Hide Status Bar'),
      );
    } else {
      return null;
    }
  }
}

Upvotes: 2

Related Questions