Building a sparkling fireworks clock with SpriteWidget
I am the kind of person that can never resist a challenge, so when I saw the Flutter Clock Challenge there was simply no way of saying no. As I’m running a startup for my day job, I didn’t have much time to spare. I had to get it all done in a single day. I figured my best shot was to build something with SpriteWidget, as it is great for creating stunning visual effects with little code.
I started to look for ways to do something interesting with the text and found the Text to Path Maker library. It contains code to take a Truetype font character and turn it into a Path object. There are also some very basic animation features. Using the Text to Path Maker, it was easy enough to extract a series of positions along the outline of the characters. With a list of points representing each number, I was ready to start putting them to work inside SpriteWidget.
If you enjoy this article and find it useful, please consider supporting me by downloading the free Newsvoice app and giving us a five star review. It means a lot, and you will get the world’s best news app too. Thanks!
SpriteWidget is a fully fledged 2D game engine, similar to Cocos2D or SpriteKit. It is very lightweight and you can mix it with any other Flutter widgets. With fast rendering paths for textures and polygons, it can run advanced animations at native speed. SpriteWidget also has a series of cool effects that can be used right out of the box. For the fireworks clock, I used the EffectLine to draw the characters and ParticleSystem to draw fireworks.
Rendering the number display
The biggest challenge was to build the sparkling number display, but thanks to the EffectLine class it wasn’t too hard. EffectLine takes an image texture and renders it along a series of points that make up a polyline. In the fireworks clock, this is the texture that I used.
With the texture in place, all I needed to do was to create an EffectLine and add new points to it at every frame that is rendered to screen.
The EffectLine has a number of properties that are fun to play around with. You can change anything from the width of the line, to how it’s animated.
In SpriteWidget, you build a node tree of the objects you want to render. Before each frame is drawn to the screen, the update method of each node is called. This is a good place to manually update animations, if you aren’t using the built in animation system. I used the update method to add new points to the line at every frame.
Doing fireworks
A fireworks clock is nothing without some actual explosions. SpriteWidget provides a ParticleSystem class that is perfect for the purpose. You can build a lot of different effects with particles, such as smoke, sparkles, and fire. But, for fireworks we need explosions.
SpriteWidget comes with a particle designer that makes it easy to play around with different effects. You can find the particle designer in the examples directory of the package.
Adding the particle systems to your app is as easy as it gets. The tricky part is to figure out the parameters, but that’s what the particle designer is for.
Conclusion and source code
My hope is that my contribution to the Flutter Clock Challenge will inspire more Flutter developers to add more of a spark to their projects. The full source code for the fireworks clock is available on GitHub, you can find it here: https://github.com/vlidholt/flutter_clock
Happy coding!
