Search code examples
flutterflutter-layoutflutter-bottomnavigation

Applying Border Radius to the BottomNavigationBar

I need to apply a border radius to my BottomNavigationBar widet. It's tricky to find a solution that works - and I need to apply more stylings to the bar later on and need a solution that is compatible with that as well (mainly: Floating action button and a shadow). Any recommendation on how to do it?

Code and screens:

Look I have:

enter image description here

Look I need:

enter image description here

Code: (in the Scaffold of my tabs screen):

bottomNavigationBar: BottomNavigationBar(
    onTap: _selectPage,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    currentIndex: _selectedPageIndex,
    type: BottomNavigationBarType.fixed,
    items: [
      //home
      BottomNavigationBarItem(
        icon: Icon(Icons.home, color: _customColorScheme['Icon 1']),
        activeIcon: Icon(Icons.home, color: _customColorScheme['Icon 2']),
        label: '',
      ),
      //favorite
      BottomNavigationBarItem(
        icon: Icon(Icons.favorite, color: _customColorScheme['Icon 1']),
        activeIcon:
            Icon(Icons.favorite, color: _customColorScheme['Icon 2']),
        label: '',
      ),
      //loockback
      BottomNavigationBarItem(
        icon: Icon(Icons.bar_chart, color: _customColorScheme['Icon 1']),
        activeIcon:
            Icon(Icons.bar_chart, color: _customColorScheme['Icon 2']),
        label: '',
      ),
      //info & support
      BottomNavigationBarItem(
        icon: Icon(Icons.info, color: _customColorScheme['Icon 1']),
        activeIcon: Icon(Icons.info, color: _customColorScheme['Icon 2']),
        label: '',
      ),
    ],
  ),
Solution

  • You can try this:

    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'))                
      ],                                                                       
    ),                                                                         
  )                                                                            
)