Flutter: Matrix4 Off-center rotation during animated transition - flutter

Question

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.

Answer 1

Add transformAlignment: FractionalOffset.center to the AnimatedContainer.

Answer 2

i hope this one may be help you
this code for only one time rotate the box, but you will add conditions for your desire things
import 'dart:math';
import 'package:flutter/material.dart';
class TransformExample extends StatefulWidget {
const TransformExample({Key? key}) : super(key: key);
#override
State<TransformExample> createState() => _TransformExampleState();
}
class _TransformExampleState extends State<TransformExample>
with TickerProviderStateMixin {
late AnimationController animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
#override
void dispose() {
super.dispose();
animationController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: InkWell(
onTap: () => setState(() {
animationController.forward();
}),
child: AnimatedBuilder(
animation: animationController,
child: Container(
height: 150.0,
width: 150.0,
color: Colors.blueGrey,
),
builder: (BuildContext context, Widget? child) {
return Transform.rotate(
angle: animationController.value * 2.0 * pi,
child: child,
);
}),
),
),
);
}
}

Answer 3

If you only want to rotate it along the z-axis, a much easier way is to use the RotationTransition widget, check out this existing answer here.
If you want to rotate along different axes, for example, making a 3D cube by rotating along x-axis and y-axis, you can check out this video tutorial here.