title: How to start same animation multiple times concurrently
body: <p>I am currently working on a hit/damage animation in Flutter. I want that each time the screen is tapped, it throws an animation showing an integer. I could not find a way to make it work. For now each time I tap the screen, the animation starts over stopping the previous one. I use the BLoC pattern inside the project so this animation is thrown by a streambuilder.</p>
  
  <p>Here is my current code: </p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'dart:async';
  import 'dart:math';
  import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    final StreamController&lt;int&gt; streamController = StreamController&lt;int&gt;();
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: GestureDetector(
          onTap: () {
            streamController.sink.add(Random().nextInt(5));
          },
          child: Scaffold(
            body: Center(
              child: StreamBuilder&lt;int&gt;(
                stream: streamController.stream,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return DamageAnimated(snapshot.data);
                  }
                  return Container();
                },
              ),
            ),
          ),
        ),
      );
    }
  }
  
  class DamageAnimated extends StatefulWidget {
    const DamageAnimated(this.damage);
    final int damage;
  
    @override
    _DamageAnimatedState createState() =&gt; _DamageAnimatedState();
  }
  
  class _DamageAnimatedState extends State&lt;DamageAnimated&gt; with SingleTickerProviderStateMixin {
    AnimationController animationController;
  
    @override
    void initState() {
      super.initState();
      animationController = AnimationController(
        vsync: this,
        duration: const Duration(seconds: 2),
      );
    }
  
    @override
    void dispose() {
      animationController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      animationController.forward(from: 0.0);
      return AnimatedBuilder(
        animation: animationController,
        builder: (BuildContext context, Widget child) {
          return Transform.translate(
            offset: Offset(0, -100 * animationController.value),
            child: Opacity(
              opacity: 1 - animationController.value,
              child: Text(
                '${widget.damage}',
              ),
            ),j
          );
        },
      );
    }
  }
  </code></pre>
  
  <p>This displays an integer translating upward and fading away at same time but I can't figure out how to have the same animation running multiple time concurrently.</p>