animted_counters.dart

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counters.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home1(),
    );
  }
}

var counters = Counters();

class Home1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Observer(builder: (_) => Text('${counters.firstCounter}')),
            RaisedButton(
              onPressed: counters.incrementFirstCounter,
              child: Text('+'),
            ),
            // Both counters have voluntarily a different Curve and duration
            Observer(builder: (_) => Text('${counters.secondCounter}')),
            RaisedButton(
              onPressed: counters.incrementSecondCounter,
              child: Text('+'),
            ),
            const Text('total:'),
            // The total must take into account the animation of both counters
            Observer(
              builder: (_) =>
                  Text('${counters.firstCounter + counters.secondCounter}'),
            ),
          ],
        ),
      ),
    );
  }
}


///---------------------------------------------------------------------------------

import 'package:flutter/animation.dart';
import 'package:flutter/scheduler.dart';
import 'package:mobx/mobx.dart';

part 'counters.g.dart';

class Counters = _Counters with _$Counters;

abstract class _Counters with Store {
  @observable
  int firstCounter = 0;

  var firstTween = IntTween(begin: 0, end: 0);
  var firstAnimation = AnimationController(
    duration: Duration(seconds: 5),
    animationBehavior: AnimationBehavior.normal,
    vsync: TickerProviderImpl(),
  );

  @observable
  int secondCounter = 0;

  var secondTween = IntTween(begin: 0, end: 0);
  var secondAnimation = AnimationController(
    duration: Duration(seconds: 2),
    animationBehavior: AnimationBehavior.normal,
    vsync: TickerProviderImpl(),
  );

  _Counters() {
    firstAnimation.addListener(() {
      firstCounter = firstTween.evaluate(firstAnimation);
    });
    secondAnimation.addListener(() {
      secondCounter = secondTween.evaluate(secondAnimation);
    });
  }

  @action
  animateCounterTo(String counter, int value) {
    final bool _counter = counter == "first";
    var tween = _counter ? firstTween : secondTween;
    tween.begin = _counter ? firstCounter : secondCounter;
    tween.end = (_counter ? firstCounter : secondCounter) + value;

    var animation = _counter ? firstAnimation : secondAnimation;
    animation
      ..reset()
      ..forward();
  }

  incrementFirstCounter() => animateCounterTo("first", 100);
  incrementSecondCounter() => animateCounterTo("second", 100);
}

class TickerProviderImpl extends TickerProvider {
  @override
  Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}