AnimatedContainer Rotation gives unwanted rotation - flutter

Question

I have been struggling with Flutter with something that in my head seems to simple. I want a container that spins when pressing a button and this should be animated. I have a container in the center of my screen. I have 2 buttons, 1 with "+" and with a "-". When I press the "+" I want the container to rotate 180 degrees in a clockwise rotation, If I press the "+" again I want it to perform another clockwise rotation of 180 degrees. When pressing "-" I want it to spin counter clockwise for 180 degrees.
Currently I have it build so that it will rotate container however the axis is on the top left point of the container instead of the center. I have tried to tackle this but nothing seems to change this behaviour and I found this issue but it's since been closed
https://github.com/flutter/flutter/issues/27419
It's mind boggling to me that I cannot perform such a simple operation and was wondering if someone knows where I'm going wrong.
Some code:
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(Spinner());
class Spinner extends StatefulWidget {
#override
_SpinnerState createState() => _SpinnerState();
}
class _SpinnerState extends State<Spinner> {
double _angle = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: AnimatedContainer(
alignment: FractionalOffset.center,
height: 200,
width: 200,
transform: Matrix4.rotationZ(_angle),
decoration: BoxDecoration(
color: Colors.blue
),
duration: Duration(seconds: 2),
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FloatingActionButton(onPressed: () {
setState(() {
_angle += 180 * pi / 180;
});
},
child: const Icon(Icons.add),
),
Container(
height: 20,
),
FloatingActionButton(onPressed: () {
setState(() {
_angle -= 180 * pi / 180;
});
},
child: const Icon(Icons.remove),
)
],
)
)
);
}
}
Edit:
I did find this post however when using it the container instantly snaps to the new position and I want this to be animted.
How can I rotate a Container widget in 2D around a specified anchor point?

Answer 1

I found a solution to tackle this problem, instead of using the animatedContained I decided to use an Animation Controller.
my SpinnerState class now looks like this:
class _SpinnerState extends State<RadialMenu> with SingleTickerProviderStateMixin {
AnimationController controller;
#override
void initState() {
super.initState();
controller = AnimationController(duration: Duration(milliseconds: 900), vsync: this);
}
#override
Widget build(BuildContext context) {
return RadialAnimation(controller: controller);
}
}
I then created a stateless widget which contains the animations etc.
class SpinnerAnimation extends StatelessWidget {
SpinnerAnimation({Key key, this.controller})
: rotation = Tween<double>(
begin: 0.0,
end: 180.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0,
0.75,
curve: Curves.linear,
),
),
),
super(key: key);
final AnimationController controller;
final Animation<double> rotation;
build(context) {
return AnimatedBuilder(
animation: controller,
builder: (context, builder) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
child: Icon(Icons.add),
onPressed: _open,
backgroundColor: Colors.green),
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _close,
backgroundColor: Colors.red),
Transform.rotate(
angle: radians(rotation.value),
child: Column(
children: [
Container(
width: 200,
height: 200,
decoration: new BoxDecoration(
image: DecorationImage(
image: AssetImage('images/CRLogo.png'))),
)
],
))
],
);
});
}
_open() {
controller.forward(from: 0);
}
_close() {
controller.reverse(from: 1);
}
}
This has at least solved this problem for me and I hope it helps someone else in the future.