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>[
          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(),
);

Answer 2

Put it inside a stack. Don't add the Bottom Navigation Bar to the scaffold directly.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Some Text'),
      ),
      body: Stack(
        children: <Widget>[
          bodyContent,
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: bottomNavigationBar,
          ),
        ],
      ),
    );
  }

  Widget get bodyContent {
    return Container(color: Colors.red);
  }

  Widget get bottomNavigationBar {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
        topLeft: Radius.circular(40),
      ),
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
          BottomNavigationBarItem(icon: Icon(Icons.usb), title: Text('2')),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind), title: Text('3')),
          BottomNavigationBarItem(
              icon: Icon(Icons.multiline_chart), title: Text('4')),
        ],
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        showUnselectedLabels: true,
      ),
    );
  }
}

Output

Answer 3

Just include the BottomNavigationBar inside the body, inside a circular border container. Like this (See the picture attached!)

    Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: new AssetImage("assets/images/background.jpg"),
                  fit: BoxFit.cover)),
          child: Stack(
            alignment: Alignment.bottomCenter,
            children: <Widget>[
              Expanded(
                child: Column(
                  children: <Widget>[
                    Expanded(child: _children[_currentIndex]),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                      bottomLeft: Radius.circular(0),
                      bottomRight: Radius.circular(0)),
                  boxShadow: [
                    BoxShadow(
                        offset: Offset(0.0, 1.00), //(x,y)
                        blurRadius: 4.00,
                        color: Colors.grey,
                        spreadRadius: 1.00),
                  ],
                ),
                height: 70,
                child: ClipRRect(
                    clipBehavior: Clip.hardEdge,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        topRight: Radius.circular(25),
                        bottomLeft: Radius.circular(0),
                        bottomRight: Radius.circular(0)),
                    child: Container(
                      child: BottomNavigationBar(
                        backgroundColor: Color.fromRGBO(255, 255, 255, 50),
                        showSelectedLabels: false,
                        showUnselectedLabels: false,
                        onTap: onTabTapped,
                        // new
                        currentIndex: _currentIndex,
                        // new
                        items: [
                          new BottomNavigationBarItem(
                            icon: Icon(
                              Icons.phone,
                              size: 30,
                            ),
                            title: Text('Calls'),
                          ),
                          new BottomNavigationBarItem(
                            icon: Icon(
                              Icons.mail,
                              size: 30,
                            ),
                            title: Text('Messages'),
                          ),
                          new BottomNavigationBarItem(
                              icon: Icon(
                                Icons.person,
                                size: 30,
                              ),
                              title: Text('Profile'))
                        ],
                      ),
                    )),
              )
            ],
          )),
    ));
  }