5

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

Screenshot

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
Suman Baul
  • 133
  • 1
  • 11

3 Answers3

6

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! :)

Suman Baul
  • 133
  • 1
  • 11
0

You need to wrap your widgets with Safe Area widget. After you need to set bottom property false

Yunus Emre Çelik
  • 298
  • 2
  • 12
  • Hi Yunus, thanks for your response. Even if I add the bottom property to false, I cannot change the color of the bottom navigation – Suman Baul Mar 09 '22 at 04:18
0

You can use flutter_statusbarcolor_ns package to achieve your requirements.

The above package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

nagendra nag
  • 1,142
  • 2
  • 15