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

Question

I need to make a nav bar with a floating action button just like this image:

what I have been able to make is in this picture:

The problem is that I wrapped my raw in a container, added box decoration to apply gradient property to my bottom nav bar which ended up deleting the white curve of the floating action button inside the nabber. I want to be able to preserve the white curve just like in the first image and be able to apply gradient colours only to my nav bar is it possible to do so without using a box decoration?

Here's my code currently:

 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: () {},),
                    ],
                  ),
                ),
              ),
            )
        )
    )  );
  }

If anyone knows the answer or can help I'd be grateful.

Answer 1

Add this inside the BottomAppBar

clipBehavior: Clip.antiAlias,