1

I want This Similar Shape using Custom Shape.

enter image description here

AVEbrahimi
  • 17,993
  • 23
  • 107
  • 210

3 Answers3

3

You may use ClipPath (https://www.youtube.com/watch?v=oAUebVIb-7s)

By the way, try to paste the image in the StackOverFlow question editor rather than pasting an external link.

AVEbrahimi
  • 17,993
  • 23
  • 107
  • 210
1

Thanks I Will Make It.

class ProfileImageCustomShape extends CustomClipper<Path> {
  @override
  getClip(Size size) {
      var path = Path();
      path.lineTo(0, 0);
      path.lineTo(0, size.height/1.25);
      path.lineTo(size.width/2, size.height);
      path.lineTo(size.width, size.height/1.25);
      path.lineTo(size.width, 0);
      return path;
    }

    @override
    bool shouldReclip(CustomClipper oldClipper) {
      return false;
    }}

// and Widget Is

Container(
                    width: 60,
                    height: 75,
                    child: ClipPath(
                        clipper: ProfileImageCustomShape(),
                        child: ClipRRect(
                          borderRadius: BorderRadius.horizontal(
                              left: Radius.circular(Dimensions.PADDING_SIZE_EXTRA_SMALL),
                              right: Radius.circular(Dimensions.PADDING_SIZE_EXTRA_SMALL)),
                          child: Image.asset(
                            Images.person_1,
                            fit: BoxFit.fill,
                            width: 100,
                            height: 100,
                          ),
                        )),
                  )
1

I just posted this similar to your question, please have a look, custom shapes

just use the shape with height and width

Jim
  • 6,928
  • 1
  • 7
  • 18