Remove Bottom shadow effect in Bottom Navigation Bar flutter

user_8137978 0
Viewed 5801

enter image description here

Bottom Navigation bar in iPhone 11 has bottom shadow as seen in the above picture, is there any way to remove the shadow?

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      clipBehavior: Clip.antiAliasWithSaveLayer,
      shape: CircularNotchedRectangle(),
      child: Theme(
        data: Theme.of(buildContext)
            .copyWith(canvasColor: Colors.white, primaryColor: Colors.grey),
        child: BottomNavigationBar(
          onTap: (index){
            
          },
          type: BottomNavigationBarType.fixed,
          items: bottomNavigationBar.map((element) {
            return BottomNavigationBarItem(
                icon: Icon(element["icon"]), title: Text(element["title"]));
          }).toList(),
        ),
      ),
    ));

enter image description here

Edit : This is result that I get after setting elevation : 0

enter image description here

Edit : After adding the safearea bottomAppBar shadow problem solved but is it possible to retain the statusBarColor (notch area) which I had previously ?

dart flutter
1 Answers

Inside your BottomNavigationBar put elevation: 0.0 Example:

child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Theme.of(context).primaryColor,
        elevation: 0.0,

BottomNavigationBar

user_99510010
Related