Matrix4Tween not working properly?

Question

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 here.

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.

Code for state (I removed everything I think is unnecessary but if you need more info I can paste whole class)

  class _GameState extends State<GameWindow> 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();
          }
      }
  }

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?

Working example with one square:

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() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> 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) => 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),
        );
    }
}

Edit: I tried removing listener and passing animation to AnimatedBuilder like this but that did not work either.

Edit 2: Added working example of this with one square.

Answer 1

Pass your Animation to an AnimatedBuilder instead of calling addListener. This reduces the amount of private state you're carrying around and allows you to use the result of _buildSquares() as the child argument so you aren't recomputing everything on every frame when the animation ticks. It should improve animation smoothness.

Edit: Added a working code sample below.

Edit 2: It sounds like you're running into a bug that I'm not experiencing, so please file an issue.

Edit 3: It sounds like the issue has been fixed already on master.

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' as vector;

class HomeScreen extends StatefulWidget {
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {

  AnimationController _controller;

  @override initState() {
    _controller = new AnimationController(
      vsync: this, duration: const Duration(milliseconds: 300));
  }

  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));


  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.play_arrow),
        onPressed: () => _controller.forward(from: 0.0),
      ),
      body: new Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          new AnimatedBuilder(
            builder: (BuildContext context, Widget child) {
              return new Container(
                color: Colors.red,
                width: 100.0,
                height: 100.0,
                transform: new Matrix4Tween(
                  begin: originalTransformation,
                  end: animatedTransformation
                ).evaluate(_controller)
              );
            },
            animation: _controller,
          ),
        ],
      ),
    );
  }
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: new HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

void main() {
  runApp(new ExampleApp());
}