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

I achieved the transparency effect throughout my app easily by editing the following files

1.Add the following lines in android/app/build.gradle

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

2.Add the following in your android/app/src/main/kotlin/com/<your_domain>/<your_project_name>/MainActivity.kt

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
    }
}

3. Remove SystemChrome.setSystemUIOverlayStyle commands from your main.dart

4. Run flutter clean and re run your app.

NOTE:

• In case you nest a stack direct under the scaffold for some screen, you might see your app drawing above nav bar. To fix that just set the following property on scaffold

  resizeToAvoidBottomInset: false

• If you use an appbar or safeArea you might need to override the SystemUIOverlayStyle again using AnnotatedRegion

After Flutter 2.5.0:

This works for me like charm!

Inside your main() paste the code below:

//Setting SysemUIOverlay
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemStatusBarContrastEnforced: true,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.dark)
);
    
//Setting SystmeUIMode
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: [SystemUiOverlay.top]);