I remove the status bar with the following code, but it doesn't fill the whole screen and a black bar comes instead
SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
before:
after:
Related
I followed this page to change status bar color for different screens in flutter.
As per the above link, to change the status bar color for each screen we should update it before navigating to next screen but this is showing a delay in loading of other widgets as compared to status bar color update. Attaching gif below for reference.
// Before navigating back to home screen, updating the color of status bar.
WillPopScope(
onWillPop: () async {
changeStatusBarColor(Colors.blue);
return true;
},
child: Scaffold(
.....
))
Is there any other way to update status bar color such that it reflects its update with other widgets on screen ?
[Gif: This may seem a little fast here but its very much noticeable in actual device]
You can do an override, but this will update the entire app with this new colour. Not Sure thats what you want.
How to do like this in flutter I am using flutter/webrtc flutter/callkeep. I want to show onacitve call icon with green background when in webrtc call.
I can only change status bar background color
Using Flutter 2.5.2, testing on Pixel 2 and Iphone SE (2020),
So for my app I want to maximize screen space but keep the top status bar throughout most of the app. I would like to hide the bottom system navigation, but it seems that using
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]); causes the bottom system overlay to go into the leanBack mode or something.
Since I have scrolling features with my own bottom navigation bar, it seems that I can't scroll without having to tap the screen to show the system overlay on 'manual' mode. Then the app gestures without the system bottom navigation, blocking my bottom navigation bar. 'immersiveSticky' would work, but I would like the top status bar almost always shown. Using SystemUiMode.immersiveSticky seems to ignore the ```overlays:[]``.
Does any one know how to use SystemChrome.setSystemUIChangeCallback for my gestures to go through or have SystemUiOverlay.top always on with the bottom as immersiveSticky with something like:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: [SystemUiOverlay.top]);?
Or could there be a workaround where I can get a 'copy' of the top status bar and create my own widget that i can use as a top status bar and keep SystemUiMode.immersiveSticky?
Reference for SystemChrome.setEnabledSystemUIMode
There are existing solutions with tons of questions to hide the status bar with
#override
void initState() {
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
super.initState();
}
But when the status bar is hidden. The hidden area part is black in colour in my app as shown in the picture below, whereas in Whatsapp (see pic) it is able to hide the status bar and using the full screen with the desired colour.
Note: There is no SafeArea Widget anywhere in the app.
Please ask if you require any other details
I'm trying to hide the status bar as soon as the drawer opens just like the google maps app on iOS.
Also, can I change the height of drawer header? Right now it's taking a third of the drawer itself.
Cheers