Fix status bar color

[micahmo]

This PR fixes an issue with the OS status bar area (on Android) when the AppBar not set to be pinned. See this comment for context.

It turns out that I just had to set the status bar color to theme.colorScheme.surface, which is the same as the the default color of the SliverAppBar now. (Note that this is a slight difference compared to before the color updates. Previously, the AppBar was always solid white (or black, based on the theme), but now it always has a slight tint. I don't mind this tint, but I just had to update the status bar to match.) I did have to do little funkiness since we're technically "before" we know if we're in light or dark mode. But it seems to work fine!

Oh and the reason this wasn't a problem when the top bar was pinned was because in that mode, we set the SafeArea to extend to the status bar area, so it was essentially tranasparent, and picking up the color of the AppBar.

As I had mentioned in this comment, I did have to roll back the static FlexColorScheme for setting the SystemUiOverlayStyle, because it only lets you set the nav bar, not the status bar. But if you have any ideas for a way around this, please let me know!

Old Version (prior to color upgrades)

qemu-system-x86_64_ssWFRD1CGN.mp4

New Version Before

qemu-system-x86_64_uA6xyS09PS.mp4

New Version After

qemu-system-x86_64_hPkdvXDLAq.mp4

[hjiangsu]

As I was mentioned in #1614 (comment), I did have to roll back the static FlexColorScheme for setting the SystemUiOverlayStyle, because it only lets you set the nav bar, not the status bar. But if you have any ideas for a way around this, please let me know!

Dang, sad to hear this didn't work - I also tried a few ideas but they didn't seem to work out either (e.g., using SystemUiOverlayStyle in the SliverAppBar), but I'm glad you were able to figure out the issue!

I did a quick test on it, and I noticed that there is still an issue when the colour scheme is set to pure black - in this case, the entire status bar turns white. I think we just need to add a conditional to check for that case, otherwise, everything else looks good to me!

[micahmo]

I also tried a few ideas but they didn't seem to work out either (e.g., using SystemUiOverlayStyle in the SliverAppBar)

Thanks for trying anyway!

I noticed that there is still an issue when the colour scheme is set to pure black - in this case, the entire status bar turns white.

Ah good catch! Just pushed a fix for that. I tested with pure black and also system + pure black.

[micahmo]

Looks like the status bar doesn't look good when a bottom sheet is open, so let's hold off on merging this while I look into it.

[micahmo]

I decided to pivot and take a new approach here. In addition to all the funky conditional logic, it seems like manually setting the color status bar has some unintended side-effects. So far the main problem seems to be with modals (other overlays created by us, as well as system overlays like dialogs, seem to properly dim the status bar), but that's enough for me to be a little wary of this solution.

Instead I decided to remove the styling and allow the feed page to extend under the status bar (top: false). This works great when the app bar is pinned. But when it's not, extending under the status bar means that when you scroll up, all the content in the feed will go underneath it as well, which doesn't look great. To address that, I just added a Container widget at the top with the height of the status bar to serve as a solid background color. It's only shown when the app bar is not pinned, and it uses the same color as the app bar, plus there's no funky logic needed because we have access to the resolved theme.

As a bonus, I was able to restore FlexColorScheme.themedSystemNavigationBar. 😊

I re-tested in light, dark, pure back, and system + pure black, but I'd appreciate any other testing, especially on the iOS side!

[hjiangsu]

Looks good to me! Nice catch with the modals 😄 - I'll merge this in and let you know if I notice any issues on the iOS side of things!