Create Your Own Rive Animations and Use Them In Flutter

Rive is a tool for designing real-time graphics and animations. With the help of Rive, we can create interactive graphics and we can include them inside the Android, iOS, Flutter, and other supported platform’s applications.

In this article, we will learn to create a simple animation in Rive and include it inside the Flutter application to create a beautiful Flutter app.

So, let's start…

Creating animations in Rive

Rive provides an online editor/studio for creating the animations. You can access the rive editor by visiting the rive.app.

Click on the launch button to launch the Rive editor.

Click on the New File button at the top right to create a new Rive file.

For creating any animation or graphics, you are always required to create at least one artboard.

Now, we are all set to create our animation from scratch.

Draw a character or shape

For drawing any shape or character, Rive provides a limited number of shapes. By using these shapes, we have to create new graphics and animate them. Also, Rive provides one pen using which we can draw customized shapes.

I have created the following icon by using Circles and Rectangle.

Now, we have to animate this icon. I’m will be implementing simple animation for this icon, that is this icon will move up and down.

Rive editor provides two modes, one is Design, and the other is Animate. Click on the Animate button at the top right to open the editor in Animate mode. Using this animate mode, we can animate the icons or shapes, or graphics that we have created.

This will show the timeline and other animation options to us.

By clicking on the timeline at different times, set the position for the icon or move the icon to the required position.

You can place the icon at accurate positions using the right pane that shows the icon or graphics position and other details.

I’m selecting the interpolation Cubic for making the transition between two positions smooth.

I will set to run this animation in a loop.

Finally, we have our animated icon ready.

Click on the Play button to run this animation.

Now, we have to download this animation file. But before downloading the file make sure to name the animation appropriately. When we use this Rive animation file in the Flutter app, at that time, we are required to use this animation name for running the animation. I’m naming this animation as search_animation.

Click on the Export icon on the upper left corner of the editor and click on download. This will download a riv file of the animation we have created.

Using Rive animations in the Flutter app

Create an empty Flutter application.

Adding dependencies to the Flutter app

Create one directory named assets/ and put the .riv file that we had downloaded into it.

Add the asset entry in pubspec.yaml file.

For using the Rive animations in the Flutter app, we are required to add the rive package to the application. Go to the pubspec.yaml file and add the rive package dependency.

Finally, run the flutter pub get command to get the dependencies.

$ flutter pub get

Writing code for using the Rive animation

Using the methods provided by the rive pub package, we will create an application that will run the Rive animation.

On line 29, for playing the animation, we have used the animation with name search_animation. This is the same name with which we have created the animation in the Rive editor.

After running the application with the above code, we can see the animation is playing on the screen.

We have successfully created the Rive animation and used that animation in the Flutter app.

Now, I will make use of this animation in the search bar so that the search bar will be more interactive.

You can find the code for this application at https://github.com/cankush625/Rive-Animations-Flutter

The final application will look like this —

I hope you have learned the basics of Rive animations. I would love to know if you find this article helpful. Show some appreciation through applauds if you like this article.

For any help or suggestions connect with me on Twitter at @TheNameIsAnkush or find me on LinkedIn.

Thank you!