Using Flare’s TriggerEvents in Flutter

she who codes
Nov 4 · 3 min read

Playing a sound from a TriggerEvent in a Flare 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 training your dragon. When the training event is complete, the user is rewarded with coins and the animation triggers a sound to alert the user. In this tutorial, we’ll go over how to play a sound using Flare’s triggerEvents.

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 here.

Diving into Code

First, we need to update our pubspec.yaml to get our audio package so that we can play a sound effect when the animation calls thetriggerEvent.

dependencies:
flutter:
sdk:
flutter
flare_flutter: ^1.5.5
audioplayers: ^0.13.2

We’ll also set up our audio folder and add our sound effect to it, then update our pubspec.yaml to include our audio file as well as our Flare file.

assets:
- DragonApp.flr
- heart_success.wav

Now, let’s get into the main part of this example, our dragon_controller.dart. This class has a lot of the flare_controller boilerplate code that we’ll modify to work with our triggers.

First, we’ll get a reference to the animation that has the Event Trigger in it as a keyframe, “fight_bar”. Then we need to set up a List for the events in this animation that will get populated when the “fight_bar” animation is played in our advance method. Finally, the switch statement will listen for the trigger “Button_Sound” and there we can call on the method that will handle our event, in this case playSound().

Now we can set up our FlareActor and RawMaterialButton in the training_view.dart. When pressed, this will play the “fight_bar” animation, which will trigger the sound to play when the training is complete.

Finally, we just need to update our main.dart to point to the new training_view.dart class and run the app to see how this all comes together!

Where To Next?

Now that you have completed this tutorial, you should have a better understanding of how to use Flare’s triggerEvents in Flutter. This can be used in a variety of different ways, from playing a sound (like in this example), starting a different type of effect (like particles), or even showing another widget within the app. Experiment and show us your creations, we love hearing from our community!

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!

she who codes

Written by

Software Engineer | Gamer | Sharing my experiences of development in Flutter & Unity3d.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade