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
Related
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:
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.
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
I am creating an app which shows the result of our university students but in my app, the bottom bar of app color does not change how can I change the color of the bottom bar in flutter here I post an image
Click to see image
if I understood correctly you want to change the color of your system navigation bar
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.red,
));
runApp(MyApp());
}
this will change its color.
I'm using SafeArea to avoid my display area clashing with the latest phones statusbar and camera notch. I use Scaffold without an AppBar.
Problem
Although the display area works as expected, a side-effect happens: the statusbar becomes a single-color region and all system icons include WIFI and battery disappear.
Attempts
I've tried various tips, including
Flutter - System bar colors with SafeArea
Flutter - How to set status bar color when AppBar not present
But all they do is set the color. The icons are still missing.
Question
Is this by design or am I missing any useful properties of SafeArea?
Try this
If you are using like this
Widget build(BuildContext context) { return SafeArea(...); }
then try this
Widget build(BuildContext context) { return AnnotatedRegion( value: SystemUiOverlayStyle.light, child:SafeArea(...);