Bottom navbar rounded corners

Question

I'm trying to give some rounded corners to my bottom navbar. For that, I have to make the background of its container transparent but I don't know how.

This is what I did int the Scaffold:

bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), ),
        child:BottomNavigationBar(
          //elevation: 0.0,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.white10,

and the result :

There is still by default a white background. I tried to wrap my ClipRRect in a container with a transparent background but it did not work.

Any idea ?

Answer 1

need a little bit shadow like

bottomNavigationBar: Container(                                             
  decoration: BoxDecoration(                                                   
    borderRadius: BorderRadius.only(                                           
      topRight: Radius.circular(30), topLeft: Radius.circular(30)),            
    boxShadow: [                                                               
      BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),       
    ],                                                                         
  ),                                                                           
  child: ClipRRect(                                                            
    borderRadius: BorderRadius.only(                                           
    topLeft: Radius.circular(30.0),                                            
    topRight: Radius.circular(30.0),                                           
    ),                                                                         
    child: BottomNavigationBar(                                                
      items: <BottomNavigationBarItem>[                                        
        BottomNavigationBarItem(                                               
          icon: Icon(Icons.favorite), title: Text('Favourite')),               
        BottomNavigationBarItem(                                               
          icon: Icon(Icons.favorite), title: Text('Favourite'))                
      ],                                                                       
    ),                                                                         
  )                                                                            
)

without shadow :

with shadow :