Flutter Android transparent navigation bar and buttons

Viewed 664

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:

Play Store Nav Bar

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:

My Nav Bar

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.

1 Answers
Related