DEV Community

Shivansh Agrawal
Shivansh Agrawal

Posted on

Modify Status Bar in Flutter Apps in 2023

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

Image description

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

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

Enter fullscreen mode Exit fullscreen mode

Top comments (0)