How to create button animation with Flare in Flutter? Part 1: Create your first animation!

Hi everyone! 👋

Today I’d like to introduce you to a new series of articles in which we’ll go through the process of creating animation in Flutter using Flare. What’s important, it’ll be all done from a perspective of non-graphic-designer person (me!). The Flare description from the website promises:

Flare is a powerful design and animation tool, which allows designers and developers to easily add high-quality animation to their apps and games.

According to this, developers should be able to create powerful animations without the knowledge of any other graphics tools. If you don’t know Flare yet, this article is just for you! It’s a complex step-by-step tutorial divided into three parts:

• Part 1: Create your first animation!
• Part 2: Animations with TrimPath
• Part 3: Implement animation in Flutter project

We’ll start from zero and after three parts we’ll have an app with our animated button. Let’s start!

What will we create?

In this tutorial we’ll be making simple button animation that’s inspired by another cool button animation:

The final result

Ok, let’s start!

Step 1: Create a new Flare file

To do it, just visit Flare official webpage, create account and tap “New Flare” to create new Flare file. After this you’ll see the editor:

I won’t describe now every part of this tool. Instead, we’ll discuss it more in every step when specific parts will be needed.

One thing you can do at this moment is to give your project a name! To do it, tap on New File in the left top corner.

Step 2: Create the simplest button

Now it’s time to use some tools! You can see plus icon on the top. That’s a menu with tools called Create. Here you can choose shapes and any other components which will create your future animation. Now we need to add a new rectangle, so choose Shape -> Rectangle (or press U on keyboard).

If you want to check other cool keyboard shortcuts, tap on Settings icon in the top menu, and choose “Keyboard shortcuts”

After this, just draw a rectangle anywhere (it doesn’t matter for now, as we’ll change the properties).

If you want to move your shape, just choose Transform -> Translate from the menu on the left called Transform — this pink icon on the screen above (or tap T on the keyboard).

After Rectangle is created, tap on it. You’ll see properties of this shape in the menu on the right, which you can modify. We’ll change the size, corner radius, fill color (I chose #FFC108) and stroke (I unchecked this) of the rectangle to the new values:

To position rectangle on the center, select Align center and Align middle from the alignment menu at the top:

After those modifications our Artboard should look like this:

Step 3: Add the first animation

Now it’s time to add the first simple animation. As you can see, below the project name there’s a tab called Design/Animate:

Design is where we are now. It’s intended to create a base layout for animations. To actually create animations (that’s what we’re here for!), we need to switch to Animate tab:

The most important element of this tab is a timeline at the bottom.

What we’d like to achieve in this first step is to create simple size animation (from the original rectangle size to circle). To do it, we need to:

1. Select rectangle. After this, the rectangle’s properties will show up on the right. All those listed properties are the values that we can change with some animation. We’re interested in size and corner radius, so…
2. Tap on this tiny diamond next to the width. Selecting those diamonds means that we want to keep those values in the current frame. So if we change those values later in the next frame, Flare will remember them and animation will start from them.
3. Do the same with the corner radius (tap diamond). We will animate both size and corner radius at the same time.
4. Now go to the frame in 00:00:30. You can do it either by entering this value in the field above timeline or moving the blue cursor.
5. Change width value to 150. After you’ll do it, you can see that diamond checks automatically — it means that this value is now remembered for the current frame.
6. Do similar with corner radius, change it to 75.

After those operations the properties in frames 00:00:00 and 00:00:30 should look like those:

And if we run animation (by tapping on forward and play buttons above the timeline), we’ll see this:

As you can see, Flare automatically adds missing width values in the frames between 00:00:00 and 00:00:30 and creates a nice visual effect for transforming rectangle into an ellipse.

Playing with interpolators

If you’d like to, you can add some interpolator to this animation. To do it, select frame (by tapping on diamonds in the timeline). Then you’ll see Key Interpolation menu on the right with a graphic representation of how value will change over time:

From this menu you can choose possible options:

• Linear — default one, simple linear animation
• Hold — no interpolation of the value, this option “holds” value for the whole time of animation and then immediately changes to the new value
• Cubic — this option uses a curve to interpolates values. We can change the shape of the curve by dragging points on it to create different effects.

To have a nice bouncing effect, choose Cubic. Then you can play a little by dragging points indicating the start and end of the curve:

Thanks to this our animation looks now a little bit more “bouncy” (note the start and the end):

Tip: To increase this bouncing effect, you can add some frames between 00:00:00 and 00:00:30 with more extreme width values, e.g:

• 00:00:18 with a width set to 150
• 00:00:24 with a width set to 180

This will give us this effect:

Summary

Ok, that’s it for now. Hurray, we’ve got something! 🎉

You can check (and fork!) this Flare file we created today here: Super-cool-button-Part1 on 2Dimensions.com

In today’s article, we created a new Flare file with simple (but glamorous!) button animation. In the next article, we’ll add the missing checkmark animations.

Stay tuned! 🙌