CODEWITHSUNDEEP
flutterflutter-bottomnavigationflutter-theme
Suman Baul
Suman Baul

Reputation: 153

How to change bgcolor of space below bottom navigation in Flutter

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

Screenshot

Upvotes: 5

Views: 2455

Answers (3)

Suman Baul
Suman Baul

Reputation: 153

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

Upvotes: 8

nagendra nag
nagendra nag

Reputation: 1342

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.

Upvotes: 0

Yunus Emre &#199;elik
Yunus Emre &#199;elik

Reputation: 326

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

Upvotes: -1

Related Questions