title: AnimatedContainer Rotation gives unwanted rotation
body: <p>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.</p>
  
  <p>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</p>
  
  <blockquote>
    <p><a href="https://github.com/flutter/flutter/issues/27419" rel="nofollow noreferrer">https://github.com/flutter/flutter/issues/27419</a></p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Some code:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'dart:math';
  
  void main() =&gt; runApp(Spinner());
  
  class Spinner extends StatefulWidget {
     @override
     _SpinnerState createState() =&gt; _SpinnerState();
  }
  
  class _SpinnerState extends State&lt;Spinner&gt;  {
    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: &lt;Widget&gt;[
                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),
              )
            ],
          )
        )
      );
    }
  }
  </code></pre>
  
  <p>Edit:</p>
  
  <p>I did find this post however when using it the container instantly snaps to the new position and I want this to be animted.</p>
  
  <blockquote>
    <p><a href="https://stackoverflow.com/questions/41603111/how-can-i-rotate-a-container-widget-in-2d-around-a-specified-anchor-point">How can I rotate a Container widget in 2D around a specified anchor point?</a></p>
  </blockquote>