Problem with floating action button It's notched is not visible

Question

Hello Guys I have a problem with my bottom navigation bar. The problem is that I created a stack, in that there is a container with gradient color and then there is a bottomAppBar, I made the bottomAppBar color transparent. I actual problem is that I have a centerDocked floating action button and it's margin is 5. Because of container my floating action button notched is not visible is there any possibility that I have the gradient color along with notch below floating action button? I hope you understand my problem.

floatingActionButton: FloatingActionButton(
      //backgroundColor: Color(0XFFFF4F5A),
      backgroundColor: Colors.black87,
      onPressed: () {},
      child: const Icon(
        Icons.camera_alt,
        color: Colors.white,
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: Stack(
      children: [
        Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0XFFFF1C2A),
                Color(0XFFFF4F5A),
              ],
            ),
          ),
          height: 48,
        ),
        BottomAppBar(
          elevation: 0,
          color: Colors.transparent,
          shape: CircularNotchedRectangle(),
          notchMargin: 5,
          child: Padding(
            padding: EdgeInsets.only(left: 25, right: 25),
            child ...
          ),
        )
      ],
    )

Answer 1

Try this way

bottomNavigationBar: BottomAppBar(
    elevation: 0,
    color: Colors.transparent,
    shape: CircularNotchedRectangle(),
    notchMargin: 5,
    clipBehavior: Clip.hardEdge,
    child: Container(
      height: kToolbarHeight,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0XFFFF1C2A),
            Color(0XFFFF4F5A),
          ],
        ),
      ),
      child: Padding(
        padding: EdgeInsets.only(left: 25, right: 25),
        child: Text("tada"),
      ),
    )),