How to change the color of system navigation bar to match material 3 color in flutter

Question

I want to change the color of Android system navigation bar to match the same color as NavigationBar at new Material 3 design like Gmail app.

I tryed to use setSystemUIOverlayStyle, but I can't get the proper color from my material 3 theme.

Answer 1

I got the proprer color using the flutter native class ElevationOverlay

This is the code:

Color navColor = ElevationOverlay.applySurfaceTint(
      Theme.of(context).colorScheme.surface,
      Theme.of(context).colorScheme.surfaceTint,
      3);

Then I wrap my SystemUiOverlayStyle into an AnnotatedRegion

AnnotatedRegion(
    value: SystemUiOverlayStyle(
      systemNavigationBarContrastEnforced: true,
      systemNavigationBarColor: navColor,
      systemNavigationBarDividerColor: navColor,
      systemNavigationBarIconBrightness:
          Theme.of(context).brightness == Brightness.light
              ? Brightness.dark
              : Brightness.light,
    ),
    child: MyWidget)