Introduction

Flutter provides lots of cool and slick animations out of the box, most related to movement and tweens (continuous changes in size, position, color, et cetera). However, one particular thing that it’s really hard to do using only the native APIs is a simple sprite sheet animation. Or any sprite sheet handling, for that matter.

A sprite sheet is a single image that has multiple images (Sprites) inside, each one being accessed via it’s defining rectangle (x, y, width, and height). Maybe every sprite inside has the same size, like a tileset; for example:

This is the Dunjo Tileset, it was created by arks.

Let’s say you want to have several icons in your app. Instead of loading to memory dozens of small images, you can load a single one and use Sprites to refer to each icon. That’s how fonts work under the hood (though normally those are SVG nowadays).

This practice is very common in web development, because of the infamous request overhead. Making a single request is (used to be? HTTP2 tries to solve this) way faster than several requests each with headers, wrappers, TCP/IP protocol packages and shenanigans you don’t really see happening. But it’s also very common in game development, and might be useful for your packaged mobile assets, because of how graphics cards work. Without digging too much into the topic, basically loading a single image is faster because the GPU doesn’t need to keep switching the loaded images. Maybe some modern GPUs might even optimize this for multiple images, but having control over what gets bundled with what might be crucial if want to hit that sweet sweet 60 FPS mark.

Finally, especially when talking about animations, images of the sort are all distributed in sprite sheet format, and it’s easier to add to your folder structure, understand and maintain, than having hundreds of files mixed up and needing to keep adding entries to your pubspec.yaml.

But I digress, this is an article about how to make Sprite Sheet animations, so if the title wasn’t enough to encourage you to do so, nor this brief explanation of the concept, let’s see if some graphics are.

There are a lot of websites out there that provide a plethora of assets, some cheap, some free, some even free for commercial usage, assets being sprite sheets for animations, tilesets, icon sets and much more. One that I highly recommend is itch.io. It’s an awesome community of people who really love indie gaming, and I do recommend to check it out rather than Steam next time you want a more innovative title to play. But not only complete and WIP games are cataloged, but also resources and assets. There is a large collection of commercially free sprite sheets, like the Dunjo Tileset of the image before.

For our example, let’s say you want to animate a mighty minotaur in your regular Flutter app. We go to itch.io and find this awesome asset pack, that comes, as expected, in sprite sheet format.

GIF showcasing the awesome minotaur animations created by elthen.

I’m actually gonna crop and paste using imagemagick just the frames we are going to actually use, but that’s just for simplicity and reducing the app size; remember, with sprite sheets, you decide what you use. Of course, you don’t need to have stuff you never use in your sheets. Here is the final result:

Spritesheet extract by me from the original files, available in the examples for the Flame repository. All credits to elthen.

Now, how are we going to render this as an animation, updating the frames clockwork, to have a fluid, functional, sprite sheet animation? Enters flame, the modular game engine. Yes, it’s a game engine, but it’s very small and modular, so you can easily pick and choose. I’m assuming your app isn’t an actual game, though if it’s a more interactive style experience, with game loops, updates, and renderers, you should consider using 100% flame instead (or alongside) of Flutter widgets. For a tutorial on game development on Flame, I do recommend the more up-to-date article posted by the awesome folks at GeekyAnts: Building A 2D game in Flutter.

If you don’t have a Flame game, don’t worry. Flame allows you to embed complete and complex games right inside your widget tree from regular Flutter apps. And now there are some brand new helpers to allow you to easily do the most simple and request things flame provides: drawing sprite sheet animations. How come? Well, let’s get right into it.