Is there a way to clip the shimmer to the child below?

[dheerajbred]

Not an issue.
Is there a way to clip the shimmer to the child below? The shimmer is overflowing. Like a Cupertinobutton with shimmer

[maddyb99]

I'm assuming what you want to do is tightly wrap the shimmer animation around the child widget i.e., in this, case a CupertinoButton and I'm assuming that by overflow you mean that the Shimmer is slightly bigger than the child itself, am I right?

The Shimmer widget is designed to tightly wrap around the child widget and actually does that pretty well.
The only exception to this might seem to be when the child widget has a custom shape/border radius. But consider this, if we have a container wrapped in a card, changing the border radius of the container won't affect the card.

And I'm also assuming that this is the problem you are facing.

So, the two possible solutions are:

1. Updating the Shimmer widget to accept a shape like a button would. This has been on my radar for quite some time now but I've been a bit busy and no one raised such an issue😅
2. The quicker solution, right now, would be to wrap Shimmer widget with a ClipPath and provide a custom path.
   I'll send more solutions as an when I think of them but almost all would involve somehow shaping the parent of Shimmer.

I hope this clears up any of the doubts that you have 🙂🙂

[maddyb99]

Also, I would update the widget to accept a shape after my exams. So you could expect an update by the end of January!

[dheerajbred]

Yes, I am referring to child widgets with different boundary like rounded cornered button or a variable shape or an icon perhaps.

I also tried using https://pub.dev/packages/shimmer This clips the boundaries correctly but it acts as a shader overlay i.e the child rendering will get completely overlayed with this.

You package on the other hand just stacks the shimmer on top on the child, just the way I want.
I am trying to tweek shimmer package for this need. I'll see how it goes....I am a newbie though😅

Not a problem. No hurries or worries. This is just a request and any update to it is appreciated a lot👍

[maddyb99]

I really like the shimmer package but I find it to be a bit complicated for someone new.
So, I built this package just to simplify the implementation of a Shimmer animation and give developers something ready to ship out of the box while providing options to tweak.

An example for implementing a rounded rectangle would be:

ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(50)),
      child: Shimmer(
        enabled: isDisabled,
        child: CupertinoButton(
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.blue[900],
          disabledColor: Colors.grey,
          child: Text('Login'),
          onPressed: onPressed,
        ),
      ),
   )

This is what this would look like:

I've ommitted onPressed for clarity.

For custom shapes we could use:

• Rectangle: ClipRect
• Oval: ClipOval
• Any other shape: ClipPath

[maddyb99]

@dheerajbred please let me know if your issue is resolved for now!!
I will now transfer this issue to the main repo and start working on this soon!
Cheers 🥂

[dheerajbred]

Yes, ClipRRect definitely solves the issue for rounded cornered widgets👍

[apalala-dev]

I am also interested in this feature, I will use the Clippers for now 👍

[maddyb99]

@Kobatsu I had planned to implement this but this turned out to be a more major modification than I had imagined it to be. And with my University and Internship going on side-by-side, I was unable to get the time to do this. This is on my todo list and will try to get this done as soon as possible

[apalala-dev]

I made some clippers in the example repo from the PR #19.
I don't know how we could have a more generic way to include the clip part in the Shimmer widget since there are different Widgets for clipping and no global object defining a shape.
Maybe we should create some kind of ShimmerShape and put some attributes to know if it is an Oval, a Rectangle, a RoundedRectangle or a custom path (with custom constructors, it might be possible, and we would have to handle each case).
Depending on that ShimmerShape, we could wrap the Shimmer object with a ClipOval, ClipRRect, ClipPath...

Special note : ElevatedButton has extra margin, to prevent the shimmer from showing above them, we need to change the tapTargetSize on the ElevatedButton's style.
E.g.:

ClipRRect(
  child: Shimmer(
    child: ElevatedButton(
      child: Text("Rounded Rectangle"),
      onPressed: () {},
      style: ElevatedButton.styleFrom(
          // if you don't set [tapTargetSize] to shrinkWrap there will be extra margins
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(32))),
    ),
    color: Colors.red,
    interval: Duration(milliseconds: 200),
  ),
  borderRadius: BorderRadius.circular(32),
)

[desmeit]

ClipRRect is not working if ElevatedButton has a shadow. Then it clips the shadow away.