ClipShadowPath.dart

import 'package:flutter/material.dart';

@immutable
class ClipShadowPath extends StatelessWidget {
  final Shadow shadow;
  final CustomClipper<Path> clipper;
  final Widget child;

  ClipShadowPath({
    @required this.shadow,
    @required this.clipper,
    @required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _ClipShadowShadowPainter(
        clipper: this.clipper,
        shadow: this.shadow,
      ),
      child: ClipPath(child: child, clipper: this.clipper),
    );
  }
}

class _ClipShadowShadowPainter extends CustomPainter {
  final Shadow shadow;
  final CustomClipper<Path> clipper;

  _ClipShadowShadowPainter({@required this.shadow, @required this.clipper});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = shadow.toPaint();
    var clipPath = clipper.getClip(size).shift(shadow.offset);
    canvas.drawPath(clipPath, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

This is a masterpiece that made my work really shine, thanks.
However I have a suggestion, when developing with hot reload and making changes on the clipper inside getClip(), the UI does not update new values automatically , I suggest you add key: UniqueKey(), inside return CustomPaint(...), this way every change inside the getClip() is updated when hot reloaded.

Note that using key: UniqueKey() broke my AnimatedOpacity (and likely other animations) that was used as a child of ClipShadowPath.

Note that using key: UniqueKey() broke my AnimatedOpacity (and likely other animations) that was used as a child of ClipShadowPath.

Thanks for the tip, I'm sure someone was fighting with this in the past since that change 👍

Interesting, what would _MyCustomClipper be? I'm looking to add a shadow to a ClipRRect

How would I add the color property here? I want to change the color of the shadow

@sameerkhan24 You can just set the color on the shadow you pass to the ClipShadowPath (using the example provided by OP):

  Widget buildBodyWidget(BuildContext context) {
    return ClipShadowPath(
      clipper: _MyCustomClipper(),
      shadow: Shadow(
        blurRadius: 5,
        color: Colors.red, // This line was added
      ),
      child: Scaffold(
        body: Center(child: Text("Test"),),
      ),
    );
  }

Can this be extended to add only a border?

@geisterfurz007 please share with me the code for achieving
Shadow on the _MyCustomClipper

@madhubansahani I am unsure what you are missing. _MyCustomClipper is a class that extends from CustomClipper, the rest are Flutter built-ins. shadow defines the look of the shadow you want and the child is the child you want to apply your custom shadow to.

@coman3 Have you added any license for this snippet of code? Thank you :)

@coman3 Have you added any license for this snippet of code? Thank you :)

Feel free to use this under the MIT license. ☺

@coman3 I've just been fighting a bug in my application, where the child of my ClipShadowPath is a stateful widget, but it was loosing its state every time its parent's build method was called. After an hour fighting it, I finally understood that it was caused by the CustomPaint widget defining its key as a UniqueKey().

Someone already posted a similar situation before, and as you noted yourself, there are probably others this happens to:

Note that using key: UniqueKey() broke my AnimatedOpacity (and likely other animations) that was used as a child of ClipShadowPath.

Thanks for the tip, I'm sure someone was fighting with this in the past since that change 👍

Could you remove the key definition from your gist? I'm not sure what benefit it brings really, but it certainly causes many other developers to loose time figuring out why their application is buggy.

@coman3 I've just been fighting a bug in my application, where the child of my ClipShadowPath is a stateful widget, but it was loosing its state every time its parent's build method was called. After an hour fighting it, I finally understood that it was caused by the CustomPaint widget defining its key as a UniqueKey().

Someone already posted a similar situation before, and as you noted yourself, there are probably others this happens to:

Note that using key: UniqueKey() broke my AnimatedOpacity (and likely other animations) that was used as a child of ClipShadowPath.

Thanks for the tip, I'm sure someone was fighting with this in the past since that change 👍

Could you remove the key definition from your gist? I'm not sure what benefit it brings really, but it certainly causes many other developers to loose time figuring out why their application is buggy.

Sorry if this wasted ya time, I've removed it :)