Flutter: Matrix4 Off-center rotation during animated transition
101
Add transformAlignment: FractionalOffset.center
to the AnimatedContainer.
Author by
xenos92
Updated on January 04, 2023Comments
-
xenos92 over 1 year
Description:
Hello, I am trying to animate the rotation of an object. For this I use Matrix4 to control the point of rotation of my object. I have a strange behavior during the animation transition.
Problem :
Why does my green square not maintain its rotation around its center during the animation?
The code :
class NodeV3View extends StatefulWidget { const NodeV3View({ Key? key, }) : super(key: key); @override State<NodeV3View> createState() => _NodeV3ViewState(); } class _NodeV3ViewState extends State<NodeV3View> { bool isExpand = false; @override void initState() { super.initState(); } @override Widget build(BuildContext context) { var controller = Provider.of<CompteurProvider2>(context); return Scaffold( body: LayoutBuilder( builder: (context, constraints){ return Consumer<CompteurProvider2>(builder :(ctx , provider , child){ return GestureDetector( onTap: () => setState(() {}), child: Container( color: Colors.yellow, width: 300, height: 300, child: Stack( children: [ Positioned( left: 150 - 50,// => Yellow Square / 2 - Green Square / 2 top : 150 - 50, child: InkWell( onTap: (){ setState(() { isExpand = !isExpand; }); }, child: AnimatedContainer( duration: const Duration(milliseconds: 500), width: 100, height: 100, decoration: BoxDecoration( color: Colors.green, ), transform: Matrix4Transform() .rotateDegrees( isExpand == true ? 180 : 0, origin: Offset(50, 50) ) .matrix4, ), ), ) ], ), ) ); }); }, ) ); } }
Any guidance on the best way to accomplish this would be appreciated.
-
xenos92 about 2 yearsThanks, I also deleted the origin in Matrix4Transform()