Matrix4 parameter acting differently when passed to Transform indirectly

3

I've run into a really weird issue. This is like some type confusion?

If I write my animation like this, it works as expected:

Widget _animatedButtonsBuilder(BuildContext context, LoginState state) {
    final animTarget = state.isPhoneNumberFocused
        ? _controller.lowerBound
        : _controller.upperBound;

    _controller.animateTo(animTarget);

    final double width = MediaQuery.of(context).size.width;
    //final transform = Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0);

    return AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          return Transform(
            transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0),
            child: new RaisedButton(
              child: const Text('Login'),
              color: Color(0xff938065),
              elevation: 4.0,
              splashColor: Colors.blueGrey,
              textColor: Color(0xffffffff),
              onPressed: () {},
          ));
    });
  }

but if I uncomment

//final transform = Matrix4.transla...

and passed that to the transform: parameter, it doesn't seem to work right.

What's happening?

dart
flutter
asked on Stack Overflow Mar 5, 2019 by Sava B.

1 Answer

2

I think to get equivalent result you'd need to move the line into the builder, because there it is executed every time the animation progresses, not only at the start of the animation.

Widget _animatedButtonsBuilder(BuildContext context, LoginState state) {
    final animTarget = state.isPhoneNumberFocused
        ? _controller.lowerBound
        : _controller.upperBound;

    _controller.animateTo(animTarget);

    final double width = MediaQuery.of(context).size.width;

    return AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          //final transform = Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0);

          return Transform(
            transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0),
            child: new RaisedButton(
              child: const Text('Login'),
              color: Color(0xff938065),
              elevation: 4.0,
              splashColor: Colors.blueGrey,
              textColor: Color(0xffffffff),
              onPressed: () {},
          ));
    });
  }
answered on Stack Overflow Mar 5, 2019 by Günter Zöchbauer

User contributions licensed under CC BY-SA 3.0