Flutter apply NavigationBar widget's color to Android's system navbar

Question

A lot of times when I use a NavigationBar paired with a Material3 Theme, the Android's NavigationBar color is usually set to the app's background color, istead of matching the NavBar.

Problem:

Target:

Answer 1

A simple fix is to use systemOverlayStyle in appBar of the Scaffold.

    Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: ElevationOverlay.applySurfaceTint(
            Theme.of(context).colorScheme.background,
            Theme.of(context).colorScheme.surfaceTint,
            3,
          ),
        ),
      ),
    );