[Flutter] Hide the Status Bar, Bottom Operate Bar and DEBUG Label

When you developing an App in Flutter, may be sometimes you want to hide the status bar and the DEBUG label:

Or the bottom operate bar:

Don't forget the obnoxious DEBUG label:

So today I want to record about How Do We Hide these UI?

If you are interesting about Flutter, you can read their tutorial: https://flutter.dev/docs/reference/tutorials

If you want to install an IDE to develop, you can refer: Flutter study notes (0) How to install Intellij IDEA

The Original layout

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

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

class originalPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: new AppBar(
            title: Text('DEBUG'),
            backgroundColor: Colors.black,
          ),
            body: Container(
              alignment: Alignment.center,
              color: Colors.red,
              width: 200,
              height: 200,
              child: new Text('Today is a nice day'),
            )
        )
    );
  }
}

Output:

Don't forget to import these code that is important (It can help us to hide the status bar in the next section):

import 'package:flutter/services.dart'; 

Hide the status bar

You need to add the code under the Widget:

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

Output:

Hide the bottom operate bar

You need to add it under the Widget, too.

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

Hide all of them

We change our code to:

SystemChrome.setEnabledSystemUIOverlays([]);

Output:

Don't worry about the inconvenience of this operation. When user's finger is pulled up from the bottom, the familiar operation field will appear.

Hide the DEBUG label

This solution is simple, just add a line under MaterialApp:

debugShowCheckedModeBanner: false,

Output: