使用浮動操作按鈕將漸變顏色應用於底部導航欄

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,