I want to make button which clipping the circule

like this below

This shape is clipping the circle.

And I want to set this at the right bottom corner of widget.

I have two idea.

1. Cut the jpg in advance and set this as ElevateButton. however is it possible to make this irregular shape button?
2. Use circle jpg and put this at the edge of mobile phone, and make margin minus(-) and stick out the part of right and bottom.

How can I make this?

CodePudding user response：

Wrap your GestureDetector or Inkwell with ClipPath() and pass the correct clip value for this circular shape.

CodePudding user response：

Your curve seems a bit off and can only be achieved by using Custom Clipping path but if you can make it work with a quadrant curve as shown below, here's how you can achieve it:

The first thing that comes in mind to achieve this is ClipRRect.

But, there is a proper combination of widgets that is required to get your desired output and ClipRRect doesn't fulfill it.

So, here's how:

InkWell(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(50),
  ),
  onTap: () {},
  child: Ink(
    decoration: BoxDecoration(
      color: Color(0xFF00a0ba),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(50),
      ),
    ),
    height: 50,
    width: 50,
    padding: EdgeInsets.only(left: 10, top: 15, bottom: 10),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          Icons.headset,
          color: Colors.white,
          size: 12,
        ),
        Text(
          'Tunes!',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontSize: 10,
          ),
        )
      ],
    ),
  ),
)

Why these widgets?

• InkWell to make the widget clickable.
• Ink to set the background, as Container with color prevents the InkWell's ripple effect.
• Column to show the required Icon and Text widget.

Now, the clickable area of this custom button is only the visible area that is the quadrant. This quadrant is also the area where the ripple effect appears.

Problem with ClipRRect, when used with Container, the shape works but the ripple doesn't and when used with Ink, the ripple works but the shape remains a rectangle/square.

Edit: To achieve, the exact curve, easy way is to get an image of that shape and use it as a background of the Ink widget instead of color. Hard/programmer's way is to make a custom path with the required Bezier curve.