Modify Status Bar in Flutter Apps in 2023

If u want to have your Status bar look like this
Add this in your Scaffold

appBar: AppBar(
          systemOverlayStyle: SystemUiOverlayStyle(
            systemStatusBarContrastEnforced: false,
            statusBarColor:
                Colors.transparent ,
            statusBarIconBrightness: Brightness.dark,
            statusBarBrightness: Brightness.light,
          ),
          elevation: 0,
          toolbarHeight: 0,
        ),

You can modify this as per your needs

You will notice that you have to swipe the status Bar once to see your changes.

To prevent this Add this Code in your First screen initState

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);

Blog

Modify Status Bar in Flutter Apps in 2023

Shivansh Agrawal

Join Our Newsletter. No Spam, Only the good stuff.

Related