Flutter Dialog with Flare

she who codes
Nov 4 · 3 min read

Showing a dialog pop up with Flutter using Flare

The App

This dialog 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 a dialog that will pop up if you haven’t earned enough coins to buy the item you want to give your dragon. In this tutorial, we’ll go over how to show this Flare pop up and dismiss it with a Positioned GestureDetector. These are the widgets that we’ll use to build this demo app: GestureDetector, Positioned, Stack and a Container.

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, let’s create the flare_button class that we’ll be using for this tutorial. Our button class is a generic way to couple a FlareActor with a GestureDetector stacked on top of it to handle input. When we created this button in the Flare editor, we gave it a node that, when passed to this class, our GestureDetector follows it’s position. The GestureDetector is wrapped in a Positioned widget so that we can continually update it’s ‘x’ and ‘y’ position in the ‘advance’ method when the button’s position is animating. We also pass the button’s pressed animation (if it has one) so that the button will automatically animate when pressed.

In HomeView, we need to create our first Flare Button as a separate widget in a Container that will be called on a timer. When the timer calls showDialog(…) it will display our Flare button with our pop up dialog. On the press event, the dialog will _remove() itself and restart the timer for a continual loop.

Our Main class is simple enough, we just need to remove the boilerplate code and drop in our newly created class: HomeView(). Now we can run the code and voila!

Where To Next?

Now that you have completed this tutorial, you should have a better understanding of how to use Flutter’s dialog context to show a Flare pop up and then dismiss that pop up with a button that is attached to a node.

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