How to add a gradient to bottomNavigationBar?

user_14880206 0
Viewed 510

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

flutter
1 Answers

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(),
  ),
),
user_142312390
Related