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 :

Answer 2

Inside Scaffold, set extendBody property to true. This lets body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar. This should fix your problem.

Example:

Widget build(BuildContext context) {
    return Scaffold(
      body: bodyOfApp(),
      extendBody: true,
      backgroundColor: Colors.transparent,
      bottomNavigationBar: BottomNavBar(),
    );
   }
  

Answer 3

All the above answers use ClipRRect in some way which is very costly computation-wise. Thus, as an alternative use Material Widget, here's how:

bottomNavigationBar: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(30), topLeft: Radius.circular(30)),
      ),
      child: Material(
        elevation: 0.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0)),
        child: BottomNavigationBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('Favourite')),
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('Favourite'))
          ],
        ),
      )),
)

Answer 4

Change the canvasColor in your Theme to transparent.

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

Answer 5

The method suggested by @CoderMonk should work. If it doesn't then I think you might be using something like SafeArea() widget in the body of your Scaffold() , If so you should either remove it completely or do something like

Scaffold(
  body: SafeArea(
    bottom: false,
    child: ...
  ),
);

Answer 6

The solution with extendBody that helps to remove the background of the bar:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // Important: to remove background of bottom navigation (making the bar transparent doesn't help)
      bottomNavigationBar: Container(
        decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(12.0), // adjust to your liking
              topRight: Radius.circular(12.0), // adjust to your liking
            ),
            color: your_bar_color, // put the color here
          ),
          child: BottomNavigationBar(backgroundColor: Colors.transparent), // don't forget to put it
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // widget
            // widget
            const SizedBox(height: kBottomNavigationBarHeight) // add space at the bottom due to extendBody property for proper scrolling
          ],
        ),
      ),
    );
  }

Answer 7

class _DashBoardActivityState extends State<DashBoardActivity> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("BottomNavigationBar"),
      backgroundColor: PrimaryColor,),
      body: Container(child: Center(child: _widgetOptions.elementAt(_selectedIndex),),),
      bottomNavigationBar: CreateBottombar(context),
    );
  }


  final _widgetOptions = [
    new ListFragScreen(),
    new ConsultationFragScreen(),
    new LabFragScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  Container CreateBottombar(BuildContext context) {
    return Container(
      //add ClipRRect widget for Round Corner
      child: ClipRRect(
        borderRadius: const BorderRadius.only(
          topRight: Radius.circular(24),
          topLeft: Radius.circular(24),
        ),
        child: BottomNavigationBar(
          //add background color
          backgroundColor: PrimaryColor,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.white,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}