How to change the color of systemNavigationBar to match the color of the NavigationBar in Flutter when the app theme uses a dynamic color scheme?

Question

I am new to Flutter. To use my knowledge, I am making a simple expense tracking app for personal use. To enhance the UI, I decided to use the dynamic_color package provided by the Material team to set a dynamic color scheme to the app.

The problem is I am unable to set the systemNavigationBarColor for SystemUiOverlayStyle to match the color of my NavigationBar.

I started with Theme.of(context).navigationBarTheme.backgroundColor as stated here and tried all the colors, but it did not help.

I tried creating the elevation overlay with the provided colors and 3.0 elevation which is the default for NavigationBar.

In light theme this comes very close to what I want to achieve, but it is still not correct:

ElevationOverlay.applySurfaceTint(
  Theme.of(context).colorScheme.surface,
  Theme.of(context).colorScheme.onSurface,
  3.0
)

In dark theme this comes very close:

ElevationOverlay.applySurfaceTint(
  Theme.of(context).colorScheme.onSurface,
  Theme.of(context).primaryColorDark,
  3.0
)

SystemNavigationBar after applying elevation overlay in light theme

SystemNavigationBar after applying elevation overlay in dark theme

After trying all of the above, I realized that I was not actually accessing my dynamic color scheme. The colors were coming from the default color scheme provided by Flutter.

Here is my code:

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

import 'package:dynamic_color/dynamic_color.dart';

import 'package:spend_smart/widgets/home.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;

    return DynamicColorBuilder(
      builder: (lightDynamic, darkDynamic) => AnnotatedRegion(
        value: SystemUiOverlayStyle(
          systemNavigationBarColor: isDarkMode
              ? ElevationOverlay.applySurfaceTint(
                  Theme.of(context).colorScheme.onSurface,
                  Theme.of(context).primaryColorDark,
                  3.0)
              : ElevationOverlay.applySurfaceTint(
                  Theme.of(context).colorScheme.surface,
                  Theme.of(context).colorScheme.onSurface,
                  3.0),
        ),
        child: MaterialApp(
          home: const Scaffold(
            body: Home(),
          ),
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
              colorScheme: lightDynamic ?? ThemeData.light().colorScheme),
          darkTheme: ThemeData(
              colorScheme: darkDynamic ?? ThemeData.dark().colorScheme),
        ),
      ),
    );
  }
}

I think it is because the dynamic theme is not available at the point I am trying to access it. I do not want to modify the theme except for the dynamic colorScheme.

Please guide me.