Hiding/Removing StatusBar in Flutter (on button click)

Question

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?

Answer 1

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.

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:

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