Flutter：自定义底部导航栏切割半径

Question

我想像设计中一样，从 custom 底部导航栏中剪切半径部分：

但是代码是这样的：

这是我的代码：

  // 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));

我在所有容器中尝试了clipBehavior属性

我该如何解决这个问题？

谢谢。

Answer 1

对于bottomNavigationBar： 您可以将脚手架的extendBody属性设置为true

Flutter extendBody property

对于AppBar： 您可以将脚手架的extendBodyBehindAppBar属性设置为true

Flutter extendBodyBehindAppBar property