How to change bgcolor of space below bottom navigation in Flutter

Issue

When using Gestures for Navigation, how can I change the background color of the area beneath bottom Navigation.

Solution

Okay, so after a lot of fiddling, I have arrived at this answer.

We need to wrap the material app/scaffold with AnnotatedRegion.

So I have changed my main.dart in the following way:

AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, //top status bar
        systemNavigationBarColor: Colors.black, // navigation bar color, the one Im looking for
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness:
            Brightness.dark, //navigation bar icons' color
      ),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,

And this worked smoothly with a rebuild.

Hope this helps! 🙂

Answered By – Suman Baul

Answer Checked By – David Goodson (FlutterFixes Volunteer)