CODEWITHSUNDEEP
flutterdartuser-interface
yazicifatihcan
yazicifatihcan

Reputation: 83

How can I apply notch curve to Widget?

I have a design as you can see below and the question is how can I apply this notch effect on Arrow ? Is there any easy way to do it just like in Floating Action Button ? Thanks in advance.

enter image description here

Upvotes: 1

Views: 933

Answers (2)

Pratik Butani
Pratik Butani

Reputation: 62419

I have created Dartpad, please look into this and do let me know if you need any help.

Dartpad Link : https://dartpad.dev/flutter?9bd55396e067e71a839851e18905f478

Code:

Padding(
  padding: const EdgeInsets.all(16.0),
  child: SizedBox(
    height: 70,
    child: Stack(alignment: Alignment.centerRight, children: [
      Padding(
        padding: const EdgeInsets.only(right: 20.0),
        child: Container(
          height: 70,
          decoration: BoxDecoration(
              color: Colors.cyan, borderRadius: BorderRadius.circular(8)),
        ),
      ),
      Container(
        width: 40,
        height: 65,
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 5)),
        child: FloatingActionButton(
          onPressed: () {},
          backgroundColor: Colors.cyan,
          child: const Icon(Icons.chevron_right),
        ),
      )
    ]),
  ),
);

Output:

enter image description here

Upvotes: 0

Harish Sharma
Harish Sharma

Reputation: 1549

Hey you can achieve it in 2 way

1st one and simple - Create a box decoration widget and a circle shape widget with white border and put these together with Stack and fit as per your requirements.

2nd use Custom Clipper or Custom Paint and draw your shape.

Upvotes: 1

Related Questions