Add boxShadow to ClipPath

Hi there, I'm trying to add a boxShadow to a clipped container, but I can't find any docs or way to do it. The closest thing I could find is this stackoverflow answer, but it seems a bit too low level https://stackoverflow.com/questions/51232532/how-to-add-a-border-to-a-clipped-image

I assume this show could be expanded to request having the ability to add a border or a border shadow to any type of clipped widgets.

For anyone looking to implement something like this right away:

I have managed to do something along the lines of this from ripping the Shadow.toPaint method to achieve the following effect:
A drop-in widget and some example code can be found here: Gist

Nice. Can you share the code?

@fzleite

@fzleite see the Gist link at the end of the comment

A drop-in widget and some example code can be found here: Gist

It works great. Thank you

@coman3

@coman3 Is there a way to do custom border outline following the Clipper just like you did for a shadow?

@ coman3有没有办法像Clipper一样在Clipper之后做自定义边框轮廓？

I am also looking for a way to set the borderRadius for the clipped container. 😃

Instead of creating a container, clipping it, and then applying a shadow to the clipper, you can create a custom-shaped container using a ShapeDecoration and apply it directly to the container.

Here is a sample code that creates a container with a notch in the top center. The shadow is directly applied to the container. The hard part for me was to create the custom path the way I want which I think you already have.

Sample Code

// Usage
Container(
  width: 350,
  height: 500,
  decoration: ShapeDecoration(
    color: HeroColors.white,
    shape: NotchedRoundedCornerShape(cutWidth: 160, cutHeight: 38, outerRadius: 15),
    shadows: [
      BoxShadow(
        color: HeroColors.black25,
        blurRadius: 40,
      ),
    ],
  ),
);

// Custom shape
class NotchedRoundedCornerShape extends ShapeBorder {
  final double cutWidth;
  final double cutHeight;
  final double outerRadius;

  const NotchedRoundedCornerShape({
    required this.cutWidth,
    required this.cutHeight,
    required this.outerRadius,
  });

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    final controlAdjustment = outerRadius / 10.0;
    final size = rect.size;
    return Path()
      ..moveTo(rect.left, rect.top + outerRadius)
      ..quadraticBezierTo(
        rect.left + controlAdjustment,
        rect.top + controlAdjustment,
        rect.left + outerRadius,
        rect.top + 0,
      )
      ..lineTo(rect.left + (size.width - cutWidth) / 2.0, rect.top)
      // Cutout start
      ..arcTo(
        Rect.fromLTWH(
          rect.left + (size.width - cutWidth) / 2.0,
          rect.top - cutHeight,
          cutHeight * 2,
          cutHeight * 2,
        ),
        _degToRad(180),
        _degToRad(-90),
        false,
      )
      ..lineTo(rect.left + (size.width + cutWidth) / 2.0 - cutHeight, rect.top + cutHeight)
      ..arcTo(
        Rect.fromLTWH(
          rect.left + ((size.width + cutWidth) / 2.0) - cutHeight * 2,
          rect.top - cutHeight,
          cutHeight * 2,
          cutHeight * 2,
        ),
        _degToRad(90),
        _degToRad(-90),
        false,
      )
      // Cutout end
      ..lineTo(rect.left + size.width - outerRadius, rect.top)
      ..quadraticBezierTo(
        rect.left + size.width - controlAdjustment,
        rect.top + controlAdjustment,
        rect.left + size.width,
        rect.top + outerRadius,
      )
      ..lineTo(rect.left + size.width, rect.top + size.height - outerRadius)
      ..quadraticBezierTo(
        rect.left + size.width - controlAdjustment,
        rect.top + size.height - controlAdjustment,
        rect.left + size.width - outerRadius,
        rect.top + size.height,
      )
      ..lineTo(rect.left + outerRadius, rect.top + size.height)
      ..quadraticBezierTo(
        rect.left + 0 + controlAdjustment,
        rect.top + size.height - controlAdjustment,
        rect.left + 0,
        rect.top + size.height - outerRadius,
      )
      ..lineTo(rect.left, rect.top + outerRadius);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return getInnerPath(rect, textDirection: textDirection);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    canvas.drawPaint(BorderSide.none.toPaint());
  }

  @override
  ShapeBorder scale(double t) {
    return NotchedRoundedCornerShape(
      cutWidth: cutWidth * t,
      cutHeight: cutHeight * t,
      outerRadius: outerRadius * t,
    );
  }

  double _degToRad(double deg) => deg * (math.pi / 180.0);
}

Navigation Menu

Repository navigation

Add boxShadow to ClipPath #25946

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add boxShadow to ClipPath #25946

Description

Activity

coman3 commented on Jan 27, 2019

fzleite commented on Jan 29, 2019

zoechi commented on Jan 29, 2019

fzleite commented on Jan 29, 2019

aytunch commented on Apr 5, 2019

januwA commented on Sep 5, 2019

behnamsattar commented on Mar 4, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions