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

Question

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 achiev

Answer 1

So if you are using Flutter the procedure is:

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

As an example:

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

Answer 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,
  ),
);

Answer 3

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

Answer 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 ([]);