Particle Animations with Flutter

Watch high resolution video on YouTube.

The bubbles

The most interesting part of this animation are the bubbles. I am using about 30 of them in a particle system. When creating a bubble it chooses a random start position at the bottom and a random target position at the top. It also have a random size along with a random speed.

Life cycle of one particle.

The particle model

Here is the dart code of our particle model:

Drawing the particles

Since we have the model including the life cycle of our particle system, it’s time to draw them. For this propose we create a CustomPainter that draws a list of particles:

It’s widget time

Until here we modeled the particle system and know how to draw them. Let us now create a widget that will render them:

Time traveling

To fix this issue we tell our Rendering widget to compute a different start time.

Putting it all together

For the background fading we used an animated linear gradient that I already covered in my previous article Fancy Background animation.

Watch high resolution video on YouTube.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store