How to set status bar color if using sliver app bar

Question

As I am having sliver app bar in my screen, I am not using AppBar() widget. So by default the status bar color is white.

Is there a way to change the color of status bar from sliver.

Below code works for Android as expected, but not for iOS.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: kPrimaryColor,
  ));

If using app bar to change the color, then sliver breaks

Have yo tried AnnotatedRegion? – Mohan Sai Manthri Oct 14 '21 at 10:53 — Mohan Sai Manthri, Oct 14 '21 at 10:53
Yes @MohanSaiManthri, just tried but it didn't worked – Jitan Gupta Oct 14 '21 at 12:52 — Jitan Gupta, Oct 14 '21 at 12:52

score 4 · Answer 1 · answered Apr 28 '22 at 10:24

4

Try this:

Scaffold(
    body: SafeArea(
      top: false,
      bottom: false,
      child: Container(), // Replace this container with your UI widget
    ),
)

answered Apr 28 '22 at 10:24

Osama Remlawi

score 2 · Accepted Answer · answered Oct 14 '21 at 11:00

2

add color what you need and set pinned to false

SliverAppBar(
      backgroundColor: Colors.blue,
      expandedHeight: 160.0,
      pinned: false,
      stretch: false,
)

answered Oct 14 '21 at 11:00

novol

I have tried this, but it doesn't work – Jitan Gupta Oct 14 '21 at 12:35
i tried in my project, this should work, show code how you tried please – novol Oct 14 '21 at 22:25
Hi @novol, here is the source code of a sample app. https://github.com/jitangupta/flutter-architecture – Jitan Gupta Oct 15 '21 at 09:03
you use `SafeArea`, maybe this is a problem, try remove or add `top: false` – novol Oct 15 '21 at 09:23
it worked, thank you so much. it was a big help. – Jitan Gupta Oct 15 '21 at 12:24

2 Answers2