How to get Transform.translate to work Flutter

Question

I have created a staggered animation in Flutter using the animation controller to run a given widget. The properties (scale, rotate) animate perfectly at each interval.

But when I went to add translate property it throws an 'unimplemented error'.

I've reworked with different values etc, but can't get it to work.

I even tried just running .translate property by itself and it still failed.

Does anyone know what I am doing wrong?

Thanks!

class _AnimatedFlyInShakeState extends State<AnimatedFlyInShake>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotate, _scale, _scale2;
  late Animation<Offset> _move;

  @override
  void initState() {
    _controller = AnimationController(
      duration: Duration(milliseconds: 700),
      vsync: this,
    );

    _rotate = Tween<double>(begin: 0.20, end: 1.0).animate(CurvedAnimation(
        parent: _controller,
        curve: Interval(0.0, 0.70, curve: Curves.easeInOut)));

    _scale = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
        parent: _controller,
        curve: Interval(0.0, 0.60, curve: Curves.elasticInOut)));

    _scale2 = Tween<double>(begin: 1.0, end: 0.5).animate(CurvedAnimation(
        parent: _controller,
        curve: Interval(0.60, 0.70, curve: Curves.easeOut)));

    _move = Tween<Offset>(begin: Offset(0,0), end: Offset(0,0.50)).animate(CurvedAnimation(
        parent: _controller,
        curve: Interval(0.80, 1.0, curve: Curves.easeInOut)));

_controller.forward();
    super.initState();
  }

 
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) =>
            Transform(
              transform: Matrix4.identity()
                ..scale(_scale.value)
                ..scale(_scale2.value)
                ..rotateZ(_rotate.value * pi * 2)
                ..translate(_move.value), //THIS PROPERTY THROWS AN ERROR
              child: widget._widget,
              alignment: Alignment.center,
            ));
  }
}

Error message:

; ======== Exception caught by widgets library =======================================================
The following UnimplementedError was thrown building AnimatedBuilder(animation: AnimationController#cf616(⏮ 0.000; paused), dirty, state: _AnimatedState#5c85d):
UnimplementedError

Answer 1

Translate works only with double.

You need to make sure _move.value is double. Or use ..translate(_move.value.toDouble()),

My example:

transform: Matrix4.rotationZ(-8 * pi / 180)..translate(-10.0),  // Works just fine.
transform: Matrix4.rotationZ(-8 * pi / 180)..translate(-10),    // Throws unimplemented error.

Answer 2

Flutter Transform.translate wont animate without offset value multiplication. Most examples found online is a bit misleading and does not work with latest flutter versions. Value of the animation controller which is created with ticker must be added as the third value as below:

AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
return Transform.translate(
            offset: Offset(0, 100 * _animationController.value),
            child: Text("Test Animation Text"),
   );
        },
      ),

You can create _animationController like this with StateFul Widget:

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {

  late final _animationController = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 3000),
  );

And inside your initState add this:

_animationController.repeat();