title: Matrix4Tween not working properly?
body: <p>I am making a game with flutter and found this problem.
  While animation starts and ends correctly, everything in between that is a miss as you can see <a href="https://i.stack.imgur.com/lmuOj.gif" rel="nofollow noreferrer">here</a>.</p>
  
  <p>It starts going down (Because of the first vector in the matrix) but even if I put first vector exactly the same then matrix animation won't do anything but just appear after the animation has ended in a new state.</p>
  
  <p>Code for state (I removed everything I think is unnecessary but if you need more info I can paste whole class)</p>
  
  <pre class="lang-dart prettyprint-override"><code>  class _GameState extends State&lt;GameWindow&gt; with TickerProviderStateMixin{
        static Matrix4 originalTransformation = new Matrix4.compose(
            new vector.Vector3(1.0, 1.0, 1.0),
            new vector.Quaternion.euler(0.0, 0.0, 0.0),
            new vector.Vector3(1.0, 1.0, 1.0));
  
        static Matrix4 animatedTransformation = new Matrix4.compose(
            new vector.Vector3(5.0, 260.0, 1.0),
            new vector.Quaternion.euler(0.0, 1.0, -0.7),
            new vector.Vector3(0.6, 0.6, 0.6));
  
        Matrix4 currentMatrix = originalTransformation;
  
        @override
        Widget build(BuildContext context){
            return new Scaffold(
                body: new Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                        new Container(
                            // Applying default transformation matrix
                            transform: currentMatrix,
                            child: _buildSquares(), // Builds GridView with custom squares
                        ),
                        _getFooter(), // Footer
                    ],
                ),
            );
        }
  
  
        @override
        void initState(){
            // Init animation tween
            animationTween = new Matrix4Tween(
                begin: originalTransformation,
                end: animatedTransformation
            );
  
            // Init animation controller
            animationController = new AnimationController(
                vsync: this,
                duration: new Duration(milliseconds: 800),
            )..addListener((){
                this.setState((){
                    currentMatrix = animationTween.evaluate(animationController);
                });
            });
        }
  
        _clickListener(){
            // Trigger animation
            animationController.forward(from: 0.0);
  
            if(_squares[_currentSquareIndex].state.isClicked()){
                _increaseScore();
            }else{
                _showGameOver();
            }
        }
    }
  </code></pre>
  
  <p>So after on click animation obviously starts and a matrix is changing but not in a smooth way. Any ideas why? Did I miss something?</p>
  
  <p>Working example with one square:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:vector_math/vector_math_64.dart' as vector;
  
  void main() {
      runApp(new MyApp());
  }
  
  class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
          return new MaterialApp(
              title: 'Flutter Demo',
              theme: new ThemeData(
                  primarySwatch: Colors.blue,
              ),
              home: new MyHomePage(),
          );
      }
  }
  
  class MyHomePage extends StatefulWidget {
      MyHomePage({Key key}) : super(key: key);
  
      @override
      _MyHomePageState createState() =&gt; new _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; with TickerProviderStateMixin{
      static Matrix4 originalTransformation = new Matrix4.compose(
              new vector.Vector3(1.0, 1.0, 1.0),
              new vector.Quaternion.euler(0.0, 0.0, 0.0),
              new vector.Vector3(1.0, 1.0, 1.0));
  
      static Matrix4 animatedTransformation = new Matrix4.compose(
              new vector.Vector3(5.0, 260.0, 1.0),
              new vector.Quaternion.euler(0.0, 1.0, -0.7),
              new vector.Vector3(0.6, 0.6, 0.6));
  
      Matrix4 currentMatrix = originalTransformation;
      AnimationController animationController;
      Matrix4Tween animationTween;
  
      @override
      Widget build(BuildContext context) {
          return new Scaffold(
              resizeToAvoidBottomPadding: true,
              body: new Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                      new AnimatedBuilder(
                          // Pass animation controller
                          animation: animationController,
                          builder: (BuildContext context, Widget child) =&gt; new Container(
                              // Apply transformation
                              transform: animationTween.evaluate(animationController),
                              child: child,
                          ),
                          // Passing child argument
                          child: new GestureDetector(
                              onTap: _onClick,
                              child: new Container(
                                  height: 400.0,
                                  width: 400.0,
                                  color: Colors.red,
                              ),
                          ),
                      ),
                  ],
              ),
          );
      }
  
      _onClick() {
          // Start animation
          animationController.forward(from: 0.0);
          return;
      }
  
      @override
      void initState() {
          super.initState();
  
          // Init tween for matrix
          animationTween = new Matrix4Tween(
                  begin: originalTransformation,
                  end: animatedTransformation
          );
  
          // Init animation controller
          animationController = new AnimationController(
              vsync: this,
              duration: new Duration(milliseconds: 800),
          );
      }
  }
  </code></pre>
  
  <p>Edit: I tried removing listener and passing animation to AnimatedBuilder like this but that did not work either.</p>
  
  <p>Edit 2: Added working example of this with one square.</p>