Problem with value animation in Flutter

Question

I have a problem with a numerical transition animation.

I wanted the animation to always continue from the last generated number, but is always repeating the first value transition made

I’ve looked for someone who had similar problems, but I couldn’t find

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  Animation numberTransitionAnimation;
  AnimationController animationController;

  @override
  void initState() {
    super.initState();

  animationController = AnimationController(duration: Duration(seconds: 1), vsync: this);
  numberTransitionAnimation = IntTween(begin: currentNumber, end: newNumber).animate(CurvedAnimation(parent: animationController, curve: Curves.linear));
  }

  int selectedNumber;
  int currentNumber = 0;
  int newNumber = 0;
  int total = 2000;


  void selectNumber(selectedNumber){
    
    newNumber = selectedNumber + currentNumber;
    
    currentNumber = newNumber;
    
    animationController.reset();
    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animationController,
        builder: (BuildContext context, Widget child){
          return Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(numberTransitionAnimation.value.toString() + " / $total"),
                  // \/ Test to see if the method is working
                  Text(currentNumber.toString()),
                  RaisedButton(onPressed: () => selectNumber(100), child: Text('100')),
                  RaisedButton(onPressed: ()=> selectNumber(200), child: Text('200')),
                  RaisedButton(onPressed: ()=> selectNumber(300), child: Text('300')),
                ],
              )
            ),
          );
        }
    );
  }
}

I’ve tried using the setState (){}, but it didn’t work. Funny that you are updating test values even without setState.

I’ve tried to use animationController.forward(from: currentNumber.toDouble());, but it didn’t help either.

I even imagined that the problem was that maybe the variables were at the same value at the time of initialization, but it is not. I gave an initial value of 0 to currentNumber and 200 to newNumber, animation is done, but the value of currentNumber has already changed and the animation does not update, continues animating from 0 to 200.

I’ve tried to use it too animationController.reverse(), unsuccessful.

Thank you in advance for being willing to read my problem.

Answer 1

Try re-creating the animation object with the updated values:

void selectNumber(selectedNumber){
 [...]

    numberTransitionAnimation = IntTween(begin: currentNumber, end: newNumber).animate(CurvedAnimation(parent: animationController, curve: Curves.linear));

    animationController.reset();
    animationController.forward();
  }

When the object numberTransitionAnimation was created the first time, he used the values of that moment of newNumberand currentNumber. It will not be re-generated if these variables change value.

Note: It was not clear exactly what you want to do when modifying the animation, but the following code:

currentNumber = newNumber;

Makes the variables of beginning and end of the animation equal. (Then losing the meaning of an animation.) Your intention was to continue from the same point of way continues? Maybe something like resolve: currentNumber = numberTransitionAnimation.value;

Answer 2

You can use the Widget TweenAnimationBuilder to make things simpler.

In my tests, work with the value as double a more fluid animation has emerged, so I advise you to treat the int as a double only in the matter of animation.

Transforms your value int = 2 for double = 2.0, does the animation and displays the int = 2 correctly.

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  @override
  void initState() {
    super.initState();

  }

  int currentNumber = 0;
  int selectedNumber = 0;
  int total = 2000;


  void selectNumber(int number){
    setState((){
      selectedNumber = number;
      currentNumber += selectedNumber;
    });
    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    TweenAnimationBuilder(
                        tween: Tween<double>(begin: (currentNumber - selectedNumber).toDouble(), end: currentNumber.toDouble()),
                        duration: Duration(seconds: 1),
                        builder: (BuildContext context, double valor, Widget child) {
                            return Text("${valor.round()} / $total");
                        },
                    ),
                    // \/ Test to see if the method is working
                    Text(currentNumber.toString()),
                    RaisedButton(onPressed: () => selectNumber(100), child: Text('100')),
                    RaisedButton(onPressed: ()=> selectNumber(200), child: Text('200')),
                    RaisedButton(onPressed: ()=> selectNumber(300), child: Text('300')),
                ],
            )
        ),
    );
  }
}

You can learn more at Tweenanimationbuilder.