How to Hide StatusBar In Flutter ?

· 2 min read
How to Hide Andorid StatusBar In Flutter
How to Hide Andorid StatusBar In Flutter

With the help of StatusBar, users can control the status bar color, style theme, visibility, and translucent properties across iOS and Android. With some added bonus for Android to control the Navigation Bar. So in this article, We will go through How to Hide StatusBar In Flutter?

How to Hide  StatusBar In Flutter?

To Hide StatusBar user can try the below things:

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';
Hide StatusBar
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])

To make it Transparant StatusBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
   statusBarColor: Colors.transparent,
));
Show StatusBar
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

For a Single Screen in a 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()));
}

Note: Here we need to import a package like the below:

import 'package:flutter/services.dart'

Sometime user needs to make a change like the below:

body: MyAppBody(),

to

body: SafeArea(child: MyAppBody()),

Conclusion:

Thanks for being with us on a Flutter Journey.

Hope you like our article. Drop us your valuable suggestion/feedback for the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply