Flutter IphoneX status bar color without app Bar

Question

I have a case where I do not want the app bar in my application , the problem is if I remove the app bar the status bar is coming in default color and there is no property in scaffolding to update status bar color , there is no effect of wrapping Body in safe are or not the status bar always stays

Sample Code

return Scaffold(
        body: ListView(
      children: <Widget>[

Possible duplicate of [Flutter - How to set status bar color when AppBar not present](https://stackoverflow.com/questions/50501799/flutter-how-to-set-status-bar-color-when-appbar-not-present) — Jordan Davies, Dec 21 '18 at 08:22

Armaan Sandhu · Answer 1 · 2018-12-21T08:33:48.213

4

You can change the color of the status bar by making AppBar invisible. With PreferredSize we can set the Height of AppBar to 0 and set the backgroundColor property for status bar color.

appBar: PreferredSize(child: AppBar(
      backgroundColor: Colors.red,
      elevation: 0.0,
    ),
      preferredSize: Size.fromHeight(0.0)
  )

edited Dec 21 '18 at 08:33

answered Dec 21 '18 at 08:20

Armaan Sandhu

807
6
15

score 4 · Answer 2 · answered Dec 21 '18 at 09:07

4

If you don't want to use a scaffold Scaffold, you can change this widget to change the text/icon color of the status bar:

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle.light, // or dark
  child: <your page>,
)

To change the background color, use a Container or DecoratedBox.

You can get the height of the status bar from MediaQuery.of(context).padding.

answered Dec 21 '18 at 09:07

boformer

28,207
10
81
66

I want material app with scaffold – Ajay Beniwal Dec 21 '18 at 09:07

Flutter IphoneX status bar color without app Bar

2 Answers2