Learn to toggle different accessories in a single animation

The App

This animation app is an isolated example from a bigger demo app called Wydget: The Dragon. In Wydget, you take care of your pet dragon by feeding, playing, and training your new pet. One part of the app is feeding your dragon. In doing so, the dragon has a single eat animation, but the food item is a ‘Solo Node’ that is toggled based on which item you feed the dragon. In a previous tutorial, we created the interface for selecting what we would want to feed our dragon. In this tutorial, we’ll explain how to make our dragon swap out the different items in this eating animation. These are the widgets that we’ll use to build this demo app: FlareActor, RawMaterialButton, Stack .

Getting Started

Before we dive into code, you’ll want to download the Flare file here and import it into your project. If you need help exporting and importing, you can check out this tutorial that goes over integrating Flare into a Flutter project.

Diving into Code

First off the dragon_controller.dart is mostly boilerplate code for handling Flare animations, however, we have a new method that we’ll be exploring, setSolol(...) . This allows us to pass the name of the node and the index in the array that we want to set active.

Jumping over to the home_view.dart class, we set up our FlareActor widget and initialize the dragon_controller as the controller for the FlareActor . We also need a RawMaterialButton with an onPressed event that animates the dragon and increments the solo node to the next in the array for each time the user taps the screen.

Finally, the main.dart will just need to be updated to point to our new home_view.dart class. We can run our app and tap the screen to cycle through the different solo nodes. Our dragon plays through the ‘eat’ animation and each time animates with a different food item.

Where To Next?

Now that you have a completed this tutorial, you should have a better understanding of how to toggle different solo nodes in your animations in Flutter. This feature can be great for different button states, different accessories for a character or streamlining the animation process by toggling different items, like in this example.

You can view the full source code for this example on GitHub. Please join in our conversation in Discord and follow us on social media for updates to Flare. If this tutorial helped you out, give us a clap (or 50!) and leave a comment below with any questions about this tutorial!