Set the Bottom System Navigation Bar to transparent in Flutter is not working

Question

I'm trying to set the Android Bottom System Navigation Bar in Flutter to transparent. If I set a color it works as expected. as soon as I try to set the System Navigation Bar to transparent, a gray bar appears. For the StatusBar it works well.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestApp(),
    );
  }
}

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      backgroundColor: Color(0xFFE76098),
      body: Container(
          ),
    );
  }
}

Answer 1

Just wrap your NavigationBar Widget with an Opacity Widget. This is an example:

Opacity(
opacity: 0.5, 
child: YourNavigationBar(),
),

You can change the opacity parameter from 0 to 1, 0 is completely invisible, 1 makes it visible. I used 0.5 so it will be half visible ;).