Flutter: Custom Bottom Navigation Bar Cut Radius

Question

I want to cut the parts with radius from custom bottom navigation bar just like in design :

But the code works like this :

This is my code :

  // home_page.dart //
  bottomNavigationBar: CustomBottomNavigationBar(),

  // custom_bnb.dart //
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: _buildBoxDecoration,
      child: ClipRRect(
        borderRadius: AppBorderRadius.bottomBarRadius,
        child: Container(
          height: 80,
          decoration: _buildBoxDecoration,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              BottomBarItem(iconData: AppIcons.location, title: AppStrings.location),
              BottomBarItem(iconData: AppIcons.home, title: AppStrings.homePage),
              BottomBarItem(iconData: AppIcons.settings, title: AppStrings.settings),
            ],
          ),
        ),
      ),
    );
  }

BoxDecoration get _buildBoxDecoration =>
      BoxDecoration(color: Theme.of(context).cardColor, borderRadius: AppBorderRadius.bottomBarRadius, boxShadow: [AppBoxShadow.materialShadow]);

// app_border_radius.dart //
static BorderRadius get bottomBarRadius => BorderRadius.vertical(top: Radius.circular(50));

I tried clipBehavior property in all of container

How can I solve this problem?

Thank you.

Answer 1

for bottomNavigationBar : You can set the Scaffold's extendBody property to true

Flutter extendBody property

for AppBar: You can set the Scaffold's extendBodyBehindAppBar property to true

Flutter extendBodyBehindAppBar property