Question 244668 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: Can I make Navigation bar top left and right top with radius 20

Flutter: Can I make Navigation bar top left and right top with radius 20
I tried custom bottom nav.

Container(
decoration: BoxDecoration(
color: Colors.blue, // Set your desired background color
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),

But it is not working

Tags:

2

Answers


  1. 0

    try with the ClipRRect Widget surrounding your navigation nar, there is an example:

    ClipRRect(
    borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0),
    ),
    child: Container(), /*Here goes your navigation bar*/
),
    Login or Signup to reply.
  2. 0

    You can try wrapping the BottomNavigationBar in a ClipRRect with the desired border radius.

    Here is an example of how to do it:

    ClipRRect _getBtmNavBar() {
 return ClipRRect(
borderRadius: BorderRadius.only(
  topLeft: Radius.circular(20),
  topRight: Radius.circular(20),
),
child: BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onTabTapped,
  selectedLabelStyle: TextStyle(
    color: Colors.blue,
  ),
  selectedItemColor: Colors.blue,
), ); }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search