it is possible to reverse the container BorderRadius in flutter

Question

i am trying to make layout like this

i need the bottomRight corner at other side ..

i tried this but it does not work

 Container(
                  width: 200
                    height: 200
                    decoration: BoxDecoration(
                        borderRadius: const BorderRadius.only(bottomRight: 
                        Radius.circular(40),),),
                      color:  Colors.deepPurple[900]!,
                    ),

                  ),

does it possible in flutter frame work ?

Solution

You can follow this ClipPath

For left corner

class CustomCornerClipPath extends CustomClipper<Path> {
  final double cornerR;
  const CustomCornerClipPath({this.cornerR = 16.0});

  @override
  Path getClip(Size size) => Path()
    ..lineTo(size.width, 0)
    ..lineTo(
      size.width,
      size.height - cornerR,
    )
    ..arcToPoint(
      Offset(
        size.width - cornerR,
        size.height,
      ),
      radius: Radius.circular(cornerR),
      clockwise: false,
    )
    ..lineTo(0, size.height);

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

And use

ClipPath(
  clipper: const CustomCornerClipPath(),
  child: Container(
    height: 100, //based on your need
    width: 100,
    color: Colors.cyanAccent,
  ),
),

---

For the right corner, path will be

@override
Path getClip(Size size) => Path()
  ..lineTo(size.width, 0)
  ..lineTo(size.width, size.height)
  ..lineTo(cornerR, size.height)
  ..arcToPoint(
    Offset(
      0,
      size.height - cornerR,
    ),
    radius: Radius.circular(cornerR),
    clockwise: false,
  );

I will recommend visiting cliprrect-clippath-in-flutter

Comments

[Arbiter Chil]

Custom Clippath is your looking for but if you want something you don't need to to do the numbers for each sides. Try a package called flutter_custom_clippers and try the SideCutClipper and explore or play with it

[Mohammed Hamdan]

thanks , but this package does not offer the wanted layout since i have seen this package before

[Arbiter Chil]

Does the layout below is circle? or a look like a bite?

[Mohammed Hamdan]

circle Exactly ......

[Mohammed Hamdan]

thanks that's what we got from experience but the wanted BorderRadius is 40 , is it possible ?

[Yeasin Sheikh]

you can pass than using cornerR

[Mohammed Hamdan]

can you please edit the answer to make corner in the bottom left and not bottom right, i spent 3 hours trying to handle this but could not , thanks

[Yeasin Sheikh]

glad to help out, play with Path there are other method can be used.