How to make flutter app draw behind android navigation bar and make navigation bar fully transparent?

问题

I would like to make my Flutter app take up the entire screen in Android while still showing both the status bar and the navigation bar, with both of them transparent, to achieve the full screen look like in iOS.

The status bar color can be easily changed, but right now I'm facing problems with getting the app to fill up the screen and making the navigation bar transparent at the same time.

By default, the app is not drawn below the navigation bar at all (I've set the status bar color to be transparent):

Here are some solutions I've tried:

1) Setting flags on window in the onCreate function in MainActivity

Solution taken from here: https://stackoverflow.com/a/31596735

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
}

This sort of achieves what I want, but it has several problems. The padding and inset values in MediaQuery are now 0, so I have to manually get the status bar and nav bar heights through the use of MethodChannel. Furthermore, this creates a weird bug regarding the application switcher, as shown below (see how the content jumps and the debug banner on the top right is stretched):

2) Adding translucent navigation in styles.xml

<item name="android:windowTranslucentNavigation">true</item>

Result:

This is the closest to what I want to achieve. MediaQuery.of(context).padding.top correctly shows the top padding, and MediaQuery.of(context).viewInsets.bottom correctly shows the height of the navbar. There are no weird bugs in the application switcher as well. The only problem is that the navbar is translucent and not transparent.

Here's the repo for the sample app shown above: https://github.com/CZX123/navbar

It would be nice if Flutter could provide this functionality out of the box. But it doesn't, so are there any other better ways to achieve this?

Update

It seems like we would have to wait for the Flutter team to officially implement this feature:
https://github.com/flutter/flutter/issues/40974
https://github.com/flutter/flutter/issues/34678

This comment also perfectly sums up the current behavior in Android: https://github.com/flutter/flutter/issues/34678#issuecomment-536028077

回答1:

So if you are using Flutter the procedure is:

Set AppBar() color to transparent.
Set extendBeyondAppBar to true.
Set elevation to 0.

As an example:

    return Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
           elevation: 0,
           )

回答2:

This might be late, but the latest version for flutter, 1.12 provides a feature to draw the app behind the NavigationBar, so the following code will have the transparent navigation bar with app fully extended behind the navigation bar,

Scaffold(
  extendBodyBehindAppBar: true, //this ensures that the body is drawn behind the navigation bar as well
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    title: Text('Transparent Bar'),
  ),
  body: Container(
    color: Colors.blue,
  ),
);

回答3:

return Scaffold(
   body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent
    ),
    sized: false,
    child: Container(color: Colors.red)
  )
);

回答4:

Have you tried the below method

// to hide only bottom bar:
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.top]);

// to hide only status bar: 
SystemChrome.setEnabledSystemUIOverlays ([SystemUiOverlay.bottom]);

// to hide both:
SystemChrome.setEnabledSystemUIOverlays ([]);

来源：https://stackoverflow.com/questions/56608171/how-to-make-flutter-app-draw-behind-android-navigation-bar-and-make-navigation-b

标签

Flutter

dart

uinavigationbar

flutter-layout

transparent