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

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

Answer 1

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