How to hide / remove status bar in Flutter

If you want your app to be in fullscreen mode, you may want an absolute fullscreen repelling all other elements such as time and battery level.

To hide the status bar, it is much simpler than you think. Only 2 lines of code will do the job.

The first additional code is to import package:flutter/services.dart.

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

The second line of code is the following snippet:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Here are the screenshots before and after the status bar has been removed:

You can put SystemChrome.setEnabledSystemUIMode inside a button’s onPressed function if you want the hiding effect to be dynamic or based on user preference.