使用浮动操作按钮将渐变颜色应用于底部导航栏

Question

我需要制作一个带有浮动操作按钮的导航栏，就像这张图片一样：

我能做的是这张照片：

问题是我将 raw 包装在一个容器中，添加了框装饰以将渐变属性应用于我的底部导航栏，最终删除了 nabber 内浮动操作按钮的白色曲线。 我希望能够像在第一张图像中一样保留白色曲线，并且能够仅将渐变颜色应用于我的导航栏，是否可以在不使用框装饰的情况下这样做？

这是我目前的代码：

 Widget build(BuildContext context) {
    return SafeArea(child:
    Scaffold(

        floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
          onPressed: (){
            //code to execute on button press
          },
          child: Icon(Icons.add), //icon inside button
          backgroundColor: kPrimaryColor,
        ),

        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        //floating action button position to center

        bottomNavigationBar: Container(

            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30), topLeft: Radius.circular(30)),
              color: Colors.white,
            ),

            child: ClipRRect(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),

              ),
              child: BottomAppBar( //bottom navigation bar on scaffold
                color:Colors.transparent,
                shape: CircularNotchedRectangle(), //shape of notch
                notchMargin: 5, //notche margin between floating button and bottom appbar
                child: Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [kPrimaryColor, kPrimaryLightColor],
                      begin: Alignment.topLeft,
                      end: Alignment.topRight,
                      stops: [0.1, 0.8],
                      tileMode: TileMode.clamp,
                    ),
                  ),
                  child: Row( //children inside bottom appbar
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      IconButton(icon: Icon(Icons.home_filled, color: Colors.white,), onPressed: () {},),
                      IconButton(icon: Icon(Icons.check_circle, color: Colors.white,), onPressed: () {},),
                      IconButton(icon: Icon(Icons.analytics, color: Colors.white,), onPressed: () {},),
                      IconButton(icon: Icon(Icons.person, color: Colors.white,), onPressed: () {},),
                    ],
                  ),
                ),
              ),
            )
        )
    )  );
  }

如果有人知道答案或可以提供帮助，我将不胜感激。

Answer 1

在 BottomAppBar 添加这个

clipBehavior: Clip.antiAlias,