I have been trying to get a transparent navigation bar for my app, but everything I have tried so far, does not give me the result I am looking for.
As a reference example, here's how the 'Play Store' navigation bar looks:
Notice that it is a dark yet transparent color.
I tried the following in my app:
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.light
)
);
I have set the background colors for my theme and individual scaffolds to a dark color, but my navigation bar is still white, like the following image:
As you can see in the above image, the status bar accepts it's transparent color, and respects the app background, but the nav bar does not. Changing the nav bar's brightness or giving it another sold color works fine, but transparency does not, so my suspicion is that there is another object or element behind my nav bar with a white color, but I could be wrong.
Note that the dark color above my nav bar, is my Scaffold's backgroundColor property.
The reason I am not assigning the same color to my nav bar and want the transparency, is because I will have other activities that will not have a dark background and in those cases, the nav bar would then have to reflect the light background.
I will change my systemNavigationBarIconBrightness accordingly.
I'm not sure what I'm missing or what I'm doing wrong, but simply put, I want a navigation bar like the Play Store has (It's not the only app with a transparent nav bar) and I hope this is possible with flutter?
Thanks in advance.
I found this Flutter Package and it's working
Related
I want to set the color of the status bar for my Flutter app that does not have any appbar.I am using the SafeArea widget inside the Scaffold widget.
I have already tried this but it did not seem to work and the status bar remained black.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));
I'm trying to change the color of the on screen button bar:
I've managed to change the status bar color via the Android Manifest like this:
android:theme="#style/Theme.WebViewApp.Gray"
However I can't seem to figure out how to change from this purple color.
This section of screen called NavigationBar:
You can change color of NavigationBar using: http://developer.android.com/reference/android/view/Window.html#setNavigationBarColor(int)
This Method won't work on API version < 21.
To change navigation bar icon colors you can use the following answers: Change navigation bar icon color on Android
Setting the navigation bar color to something other than black only plays well with material design if you set it to transparent (or the same color as the window background) and the content is not scrollable.
<item name="android:navigationBarColor">#android:color/transparent</item>
If the navigation bar has another color or if the content is scrollable, the ink just gets cut off when reaching the bar like in the picture:
I would like to set an elevation on the navigation bar so that it casts a shadow and it becomes clear that it's another layer. Is this possible?
According to Google I/O Android talks, all shadows are generated by some light source, which provides shadows under elements, not above them. Then, Navigation Bar should have no visible shadow.
Maybe, the only solution of your problem is to use additional drawable to imitate shadow.
I have an Android app which allows the user to change the color of a background based on the selection they choose.
This is the line that changes the color:
appBackground.setBackgroundColor(Color.rgb(inRed, inGreen, inBlue));
How do I also change the menu bar color as well the notification bar to change to that color of the user's choice?
I know it's only possible in KitKat but can someone point me to the way...
If you would like an effect like the image below, have a look here:
Why can't we use a Translucent system bars with and ActionBar
As you can see, the background color can be changed programatically (so it's not defined in the xml).
I am using the ActionBarCompat sample. If our action bar has a dark background, we want to use white-colored icons. But these icons are also used for the system menu items (when they don't fit on the action bar, pre-honeycomb). So the white icons aren't visible on the system menu white background. Example:
What can we do about this? Is there a way to use the dark version of icons when shown on the system menu, and light colored when on the action bar?
Thanks
There are only two ways to handle this issue. Either change the color of your ActionBar, or edit the color of your icons.
I would suggest that best combination for Actionbar and icons would be Red color for Actionbar and white color for your icons.
And how can white icons be visible in white background??? If you remember in Menu icons we have grey background with white icons. That's why they are easily visible in Menu's.