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;
  }
}

Usage:

  Widget buildBodyWidget(BuildContext context) {
    return ClipShadowPath(
      clipper: _MyCustomClipper(),
      shadow: Shadow(
        blurRadius: 5
      ),
      child: Scaffold(
        body: Center(child: Text("Test"),),
      ),
    );
  }

Thanks for the example. You can also add the shadow offset by shifting the path:

var clipPath = clipper.getClip(size).shift(shadow.offset);
canvas.drawPath(clipPath, paint);

Whoops, thanks for the heads up, forgot shadow has an offset! (i have updated the example)

Hi
How can i add border Radius to the ClipRRect that is inside ClipShadowPath
i mean can i set Border Radius in the ClipShadowPath in any way using your method?
and thx

Thank you!

You are a great man. Thanks!!!!!!!!!!

is PhysicalShape simple alternative ?

Great solution. How about changing the Shadow object to BoxShadow object? The difference is that the Shadow object is missing a spreadRadius from BoxShadow.

It was Great coman3
we can add opacity to shadow too :

var opacity = 0.6; paint.color = Color.fromRGBO(0, 0, 0, opacity);

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.

@dnory0, good thinking. Ive added this to the example :)

@hardik-satasiya, PhysicalShape does not support custom shadows and can only provide an 'elevation' which for my use case was not enough as i needed specific radii.

@happyharis, I was hesitant to force the usage of a BoxShadow, you should still be able to use it though as Shadow is the base class. See: https://master-api.flutter.dev/flutter/painting/BoxShadow-class.html

@coman3 yes I understand it once i used it :)

thanks for your great solution :)

Thank you for this code 👍 ❤️

This is awesome stuff @coman3. Really appreciate it. 🥇

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 :)