How to set border radius to bottom app bar in a flutter app?

Question

I want to set the borderRadius to an Bottom Navigation App Bar as its shown in the image. I have tried to put Bottom Navigation App Bar to a

Answer 1

Alternatively, if your goal is to only put a borderRadius you can just use ClipRRect and apply your desired borderRadius to it. Here is my implementation of the solution:

  ClipRRect _getBtmNavBar() {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
      ),
      child: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onTabTapped,
        selectedLabelStyle: TextStyle(
          color: Colors.black87,
          fontSize: 16,
        ),
        iconSize: 35,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.black54,
        items: [
          BottomNavigationBarItem(
            backgroundColor: kBottomNavBarBgColor,
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
// more BottomNavigationBarItem() goes here.

Then plug it directly into your bottomNavigationBar

Code Example:

return Scaffold(
// more Scaffold code goes here

//bottom navigationBar
      bottomNavigationBar: _getBtmNavBar(),
);