How to make Android’s gesture navigation bar completely transparent in Flutter?

If you are like me and want to make your android navigation bar completely transparent, you’ve come to the right place.

By default, Flutter will not draw behind the android navigation bar. There are two working methods which will help us solve this problem. Before starting out, make sure you are on the latest Flutter version. You can check out latest Flutter versions here. To upgrade to the latest version, open your terminal and run ‘flutter upgrade’.

USING BUILT-IN FLUTTER COMMANDS

Import this package to your main.dart file.

import 'package:flutter/services.dart';

Inside your main function, add the below code:

// make navigation bar transparent
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
    ),
  );

This will immediately make your navigation bar transparent. Hot restart to see it working.

But if you have a scrollable list of widgets, you will notice the navigation bar still has that solid white color. So, to make flutter draw behind the navigation bar, you can add this line below the previous code in your main function.

// make flutter draw behind navigation bar
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

This will make flutter draw behind the navigation bar.

Here is the complete main function.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // make navigation bar transparent
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
    ),
  );
  // make flutter draw behind navigation bar
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const MyApp());
}

DIRECTLY MODIFYING THE BUILD.GRADLE FILE

If the above method does not work for you, or does not give you the desired result, you can try this method.

Open your gradle file located at ‘android/app/build.gradle’, scroll down towards the end, and add the following line in dependencies.

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.5.0-beta01' // add this line
}

Then open your MainActivity.kt file located at ‘android/app/src/main/kotlin/<your_domain>/<your_project_name>/MainActivity.kt’ and copy the entire block of code inside the MainActivity class.

import androidx.core.view.WindowCompat //add this line
import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
    // add the following block of code
    override fun onPostResume() {
        super.onPostResume()
        WindowCompat.setDecorFitsSystemWindows(window, false)
        window.navigationBarColor = 0 // for transparent nav bar
        window.statusBarColor = 0 // for transparent status bar
    }
}

After modifying both the files, stop your app if its running and run ‘flutter clean’ in your terminal and run ‘flutter pub get’ to get the packages again. This step is recommended as it will build your app from scratch and apply the above changes. After starting your app, you should see your navigation bar completely transparent.

If you liked this article, or any of the solution worked for you, give a like in this stack overflow thread as they are the real heroes. Thanks for reading.