Add shadow to ClipPath created from Container - Flutter

Question

I want to add shadow to a ClipPath I have created from Container. This is the ClipPath i created:

              ClipPath(
                clipper: RibbonClipper(),
                child: Container(
                  height: 20,
                  width: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.0),
                      bottomLeft: Radius.circular(5.0),
                    ),
                    color: Color(0xFF338D5E),
                  ),
                ),
              ), 

And CustomClipper Path is:

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * .90, size.height * .5);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

Solution

I had to do that a while ago. I found this very useful gist that combines ClipPath and shadows. Alternatively, it seems like someone made it a package, but I didn't test it.

Comments

[pskink]

you cannot do that - use custom ShapeBorder instead

[pskink]

no, no, no, if you want a custom shape use a custom ShapeBorder like any other flutters shapes (BeveledRectangleBorder / CircleBorder / ContinuousRectangleBorder / RoundedRectangleBorder / StadiumBorder), for a custom sample see: stackoverflow.com/a/57943257/2252830

[Vijay PD]

Are you saying not to use ClipPath?? @pskink

[MickaelHrndz]

@VijayPD You can try to use his method as it's less boilerplate (don't forget clipBehaviour: Clip.antiAlias on the Container). But I personally couldn't get it to work on my use case. It's not interchangeable like that with ClipPath. There's also a ShapeBorderClipper class which I can't find a good example of.