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)