Flutter, How to make a container disappear after som time?

Question

So I have written this code which lets an animation play where i pressed. So if i press the screen there is a short animation playing where i pressed, if you press multiple times there are multiple animations on the screen for a short period. Each time I press the screen there is a container taking up place where the animation is played, but this container keeps taking up space even when the animation is not playing. So if i press on the screen where there already is a container an animation won't be played. How do I make the container disappear after some time so that I can press so many times I want on the screen and still have an animation to be played?

This is all the code responsible for that animation:

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),
    );

    super.initState();
  }


          new GestureDetector(
            onTapUp: (tabDetails) {
              setState(() {
                tappedPositions.add(tabDetails.localPosition);
              });
            },
            child: Container(
              color: Colors.transparent,
            ),
          ),
          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: Container(
        height: 80.0,
        width: 80.0,
        child: new FlareActor(
         "assets/images/tryckplats.flr",
         animation: "tryck",
      ),
      ),

      builder: (context, child) {
        return Transform(
          alignment: Alignment.center,


          child: child,
        );
      },
    );
  }



  }

score 1 · Answer 1 · answered Jan 24 '20 at 22:58

Instead of using a for loop and building a widget per offset in tappedPositions, use a function that inserts a new widget with offset into a list in state, then map the list of children in a stack. Now the tapped animation can be played over another, and you can delete by key from the list after the timer expires.

class _HomePageState extends State<HomePage> 


 with SingleTickerProviderStateMixin {
  final _animatedBoxes = <Widget>[];

  AnimationController _animationController;

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

    super.initState();
  }

  Widget _buildAnimatedBox(Offset position) {
    setState({
      animatedBoxes.add(
        Positioned(
          key: Key(animatedBoxes.length)
          top: position.dy,
          left: position.dx,
          child: MyAnimatedWidget(
          animation: _animationController,
        ),
       }
     );
   }


  Widget build(BuildContext context)
    return GestureDetector(
      onTapUp: (tabDetails) => _buildAnimatedBox(tabDetails)
      child: Stack(
        children: _animatedBoxes
      ),
    );
  }
}

Flutter, How to make a container disappear after som time?

1 Answers1