CODEWITHSUNDEEP
dartflutterflutter-animation
Ashutosh Singh
Ashutosh Singh

Reputation: 1277

How can one implementing 150 animated hearts in flutter?

Recently I came across a video on YouTube regarding the announcement of flutter 1.0 (link) and I was wondering how could I implement those 150 little animated hearts(watch from 13:50 onward) in my app.

I searched the web but could not find any specific widget which could help me with the same.

Considering the fact that I'm new to flutter I'd be very glad if someone could point me in the right direction. Thanks for helping :-)

Upvotes: 0

Views: 1807

Answers (1)

Filled Stacks
Filled Stacks

Reputation: 4346

How I would implement this is have a scroll view with a container (fixed height, and width = screenWidth) in it, with a Stack inside that. I would have all the hearts in the stack already, keep a reference to all the hearts in my stateful widget. When the heart button is tapped I'll go through each of the heart widgets and start it's animation with a random delay. So to recap:

  1. Create a stateful widget, that has a list of heart widgets
  2. The view will be a scroll view with a root child Container and that Container will have a child Stack widget.
  3. on init I would generate 150 heart widgets, place them at random positions using container width and height and set them all to not show.
  4. When the heart widget is tapped I would loop through the list of heart widgets (as mentioned in 1) and call AnimateHeart with a delay.

That should make it all animate once at different times. If you want to loop them just manage that within your heart widget.

Upvotes: 1

Related Questions