Issue
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.
Solution
Add transformAlignment: FractionalOffset.center to the AnimatedContainer.
Answered By – TheUltimateOptimist
Answer Checked By – Katrina (FlutterFixes Volunteer)