Flutter animated rotation with relayout

Viewed 190

I need to rotate a widget with animation and perform relayout.

RotatedBox does just what I want but without animation.

I used TweenAnimationBuilder and Transform.rotate. They do animated rotation, but keep width constraints and don't resize the child.

  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0, end: pi / 2),
      duration: const Duration(milliseconds: 500),
      builder: (BuildContext context, double angle, Widget? child) {
        return Transform.rotate(
          angle: angle,
          child: Stack(
            children: [
              Image.network('https://i.imgur.com/Xl3LjXZ.jpeg'),
              Image.network('https://i.imgur.com/tF3g1JA.jpeg',
                  width: 30, height: 30),
            ],
          ),
        );
      },
    );
  }

I can use scale transform but I don't want all the widgets in the child to be scaled.

How can I do animated rotation with child relayout? Thanks.

Dartpad example (make the result frame narrow like mobile device)

1 Answers

I guess I've found the solution.

I use rotation and scale to make an animation and after animation is finished I change my widget to RotatedBox.

Dartpad code

Related