Creating Smoother Border Radius Curves in Flutter

Question

I am trying to create one bottomappbar in flutter from dribble design, I want those curves to be smooth like designs, but Floating Action Button's notch isn't as smooth as one in design. I am not able to think of another way to achieve this.

here is my code for Scaffold -

    bottomNavigationBar: ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40), topRight: Radius.circular(40)),
    child: Container(
      child: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.blue,
        child: SizedBox(
          height: height * 0.12,
          width: width,
        ),
      ),
    ),
  ),
  floatingActionButton: Container(
    margin: EdgeInsets.all(8),
    width: 80.0,
    height: 80.0,
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
        size: 25.0,
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Left pic is what I want to achieve, right one is what I have achieved, please note smooth borders in first image. I tried using Custom painter for quadraticBezierCurve, but couldn't succeed

help appreciated

Answer 1

After spending lot of time, I wrote my own Custom class which extends CustomClipper and using ClipPath widget was able to achive it using

• 1st quad bezier curve

• then at center 2 cubic-bezier curves,

• in end quad bezier curve again.

Then wrapped ClipPath widget with Material andd gave transparent background and elevation of 100.

output like this:

for ref code: https://github.com/sardapv/NavBar-CurvedShape-FromDribbleDesign