Flutter: Multiple animations onTapDown

Question

How do i let the same animation play on different places at the same time. For the moment whenever i tap the screen an animation start playing at that place for 3 seconds but if i press again on an other place the animation jumps to that place, but i would want it to let the old one finish. So that if you press five times there should be five animations on the screen unlike now when it only plays one at the time.

Here is my code.

class HomePage extends StatefulWidget{
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


   double posx = -100.0;
  double posy = -100.0;

void onLongPressMoveUpdate(BuildContext context, LongPressMoveUpdateDetails details)

  {
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);

    var tempName = "tryck";
    setState(() {
      _tryckanimation = tempName;
      posx = localOffset.dx;
      posy = localOffset.dy;
    });

  }
  void onTapDown(BuildContext context, TapDownDetails details)

  {



    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);

              var tempName = "tryck";
    setState(() {


      _tryckanimation = tempName;
      posx = localOffset.dx;
      posy = localOffset.dy;
    });

  }
 void onTapUp(BuildContext context, TapUpDetails details) 
 {
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);

              var tempName = "tryck";
    Future.delayed(const Duration(milliseconds: 3000), () {
  setState(() {
    setState(() {
      _tryckanimation = tempName;
      posx = -100.0;
      posy = -100.0;
       });
});
 });

  }

new GestureDetector(
      onTapDown: (TapDownDetails details) => onTapDown(context, details),
       onTapUp: (TapUpDetails details) => onTapUp(context, details),
       onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) => onLongPressMoveUpdate(context, details),


      child: new Stack(fit: StackFit.expand, children: <Widget>[

        new Container(color: Colors.transparent,
        ),

            new Positioned(
            height: 100.0,
            width: 100.0,
            child: FlareActor(
              "assets/images/tryck2.flr",
             animation: _tryckanimation
            ),

            left: posx -50.0,
            top: posy- 50.0,



            ),

score 0 · Accepted Answer · answered Dec 21 '19 at 15:03

You have to set same AnimationController for all the animated widget.

Try this

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  final tappedPositions = <Offset>[];

  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    _animationController.repeat();
    super.initState();
  }

  final x = const CircularProgressIndicator();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App Bar"),
      ),
      body: Stack(
        children: <Widget>[
          GestureDetector(
            onTapUp: (tabDetails) {
              setState(() {
                tappedPositions.add(tabDetails.localPosition);
              });
            },
            child: Container(
              color: Colors.white,
            ),
          ),
          for (final position in tappedPositions)
            Positioned(
              top: position.dy,
              left: position.dx,
              child: MyAnimatedWidget(
                animation: _animationController,
              ),
            ),
        ],
      ),
    );
  }
}

class MyAnimatedWidget extends StatelessWidget {
  final Animation animation;

  const MyAnimatedWidget({Key key, this.animation}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      child: Icon(
        Icons.phone,
        color: Colors.blue,
        size: 30.0,
      ),
      builder: (context, child) {
        return Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()
            ..translate(animation.value)
            ..rotateY(pi * 2 * animation.value),
          child: child,
        );
      },
    );
  }
}

Flutter: Multiple animations onTapDown

1 Answers1