flutter_animate icon indicating copy to clipboard operation
flutter_animate copied to clipboard

Add Size Effect

Open drown0315 opened this issue 1 year ago • 3 comments

Size Effect

Unlike the scale Effect, this effect does affect the real size of the widget, including its clipping behavior, but does not apply scaling.

This is achieved using a combination of ClipRect and Align widgets:

  Widget build(
    BuildContext context,
    Widget child,
    AnimationController controller,
    EffectEntry entry,
  ) {
    final animation = buildAnimation(controller, entry);
    return getOptimizedBuilder<double>(
      animation: animation,
      builder: (_, __) {
        return ClipRect(
          child: Align(
            alignment: alignment ?? Alignment.center,
            widthFactor: fixedWidthFactor ?? math.max(animation.value, 0.0),
            heightFactor: fixedHeightFactor ?? math.max(animation.value, 0.0),
            child: child,
          ),
        );
      },
    );

Use Example

Here’s a simple example of how to use the Size Effect:

Container(
    width:  200,
    height: 100,
    color: Colors.black,
).animate().sizeX();

Preview

https://github.com/user-attachments/assets/5e89fb6f-dfde-4957-b5fd-2d7145d3c426

drown0315 avatar Dec 19 '24 09:12 drown0315

@drown0315 — thanks for the PR. I haven't looked over the code yet, but in terms of naming, I believe this is less of a SizeEffect and more of a ClipRectEffect or maybe CropEffect.

There is actually a use case for a SizeEffect that would resize the child widget as well.

gskinner avatar Dec 19 '24 17:12 gskinner

In fact, its implementation is based on SizeTransition, so the name SizeEffect is used accordingly. It also actually affects the size of the widget.

Align widthFactor and heightFactor does affect size of renderBox.

drown0315 avatar Dec 22 '24 09:12 drown0315

I hope this PR will be merged, i need affect size animation

git-boya avatar Aug 29 '25 01:08 git-boya