CODEWITHSUNDEEP
flutter
Curious99
Curious99

Reputation: 398

How to add a gradient to bottomNavigationBar?

How is it possible to add a gradient to the default bottomNavigationBar without a package?

    bottomNavigationBar: Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [Colors.grey[600], Colors.grey[900]])),
      height: getBottomBarSize(),
      child: BottomAppBar(

          //color: Colors.grey[900],
          child: getChild()),
    ),

I tried this, but it doesn't work. Is there another way I could try without writing my own navBar or using a package?

Thank you :)

Upvotes: 2

Views: 1153

Answers (1)

dm_tr
dm_tr

Reputation: 4753

This is because of the default behavior of BottomAppBar widget. You are not actually seeing your Container gradient because BottomAppBar color is hiding it.
Reverse your widgets order like this

bottomNavigationBar: BottomAppBar(
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [Colors.grey[600], Colors.grey[900]],
      ),
    ),
    height: getBottomBarSize(),
    child: getChild(),
  ),
),

Upvotes: 2

Related Questions