CODEWITHSUNDEEP
flutterflutter-layoutflutter-design
minigeek
minigeek

Reputation: 3166

Creating Smoother Border Radius Curves in Flutter

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 enter image description here

help appreciated

Upvotes: 3

Views: 2029

Answers (1)

minigeek
minigeek

Reputation: 3166

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:

enter image description here

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

Upvotes: 4

Related Questions