Search code examples
fluttercontainersstylesshapesbottom-navigation-bar

How to build bottom navigation bar with custom borders radius in flutter?

I have figma design which shows the design of bottom navigation bar,

I already design the shape and borders of it by using a Container but whenever I use

BottomNavigationBar as a child it changes back to flat like this:

enter image description here

this is before adding the BottomNavigationBar as a child

enter image description here

here's my code, I have five screens

  return Scaffold(
  backgroundColor: AppColors.primaryColor,
  bottomNavigationBar: Container(
    height: 75.h,
    width: 400,
    decoration: BoxDecoration(
      color: AppColors.secondaryColor,
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(25.r),
        topLeft: Radius.circular(25.r),
      ),
    ),
    child: BottomNavigationBar(
      onTap: changePage,
      currentIndex: currentIndex,
      items: [
        BottomNavigationBarItem(
          label: AppStrings.home,
          icon: ImageIcon(
            AssetImage(AppImages.home),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.deals,
          icon: ImageIcon(
            AssetImage(AppImages.deals),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.orders,
          icon: ImageIcon(
            AssetImage(AppImages.orders),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.cart,
          icon: ImageIcon(
            AssetImage(AppImages.cart),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.settings,
          icon: ImageIcon(
            AssetImage(AppImages.settings),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
      ],
    ),
  ),
  body: pages[currentIndex],

the design I want

the design I want

Solution

  • I found a fix for it

    Apparently I should wrap the BottomNavigationBar with ClipRRect.

    here :

    child: ClipRRect (
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(25.r),
              topLeft: Radius.circular(25.r),
            ),
            child:BottomNavigationBar(
      onTap: changePage,
      currentIndex: currentIndex,
      items: [
        BottomNavigationBarItem(
          label: AppStrings.home,
          icon: ImageIcon(
            AssetImage(AppImages.home),
            color: AppColors.whiteColor,
            size: 30,.............