Taking Flutter animations a step ahead with Rive
Overview
Hey, bored with simple animations in flutter? Want something new and more powerful? Then you are reading the right article. Introducing Rive animations: simple, smooth, real-time and most importantly — an interactive way to add animations in Flutter.
Topics
- What is Rive
- Getting started with Rive
- Integration in Flutter
- Example
What is Rive
Rive, formally known as Flare, is a design tool by 2Deminsions that allows us to integrate jaw-dropping animations like a pro. Rive animations are platform-independent which means create once and use on multiple platforms.
Don’t know what interactive animations are? Here’s an example.
Here, we can see teddy moving his head according to text filled in the Textbox. As the character is interacting with user inputs, this is an interactive animation.
Rive community is very strong and is always creating something new. A ton of prebuilt Rive animations is available here for us to start diving into the beautiful, animated Rive world. We can use these directly or can modify as per our needs.
Getting started with Rive
If you wish to design your animations from scratch, you can use the Rive console. Let’s have a look at the basics of it. The below image summarises the primary controls of the console.
Bones
Bone components can be used when you need to move your character like a skeleton. Just create Bones and then attach each Bone to the path and let the magic begin.
Nodes
Nodes are the simple component in Rive which help with transformations like rotation, scaling, translate. Just select the Node and click anywhere in your artboard to attach Node with any element. Then take an element as a child of a Node.
Solo
Solos can be used when you need frame-by-frame animation. It’s similar to the Node but it adds the feature to quickly toggle its child visibility. For doing that, you need to click on the Solo element and place it in anywhere in your artboard. Then take all elements which you want to set in Solo as a child of it and then from the animate window, select which child to show in which frame, that’s it.
Now, let’s move towards Flutter part but don’t forget to export your animation.
Integrating Rive in Flutter
Some steps to follow
- Implement Rive library in your flutter project
- Now add your Rive file in a folder of your project and don’t miss to define it in the pubspec.yaml otherwise you won’t be able to use it. 😂
- Our animation is ready to be loaded. Let’s load it with FlareActor. Don’t forget to import the package 😃
Yeeee, we have successfully loaded our first Rive animation in flutter… 😉
If you need to change animation at runtime then the animation controller comes in the picture. No idea about animation controller? Let’s deep-dive into it.
Animation Controller
Animation controller class helps us to control our animations. To create our custom Animation Controller, we have to extend FlareControls.
The below code snippet summarises methods of FlareControls.
Let’s code from scratch. I’ll build a dark theme demo using Day and night switch animation. (Credits: MIHIR PRAJAPATI)
Example
This is what we are going to build.
1) Fire up your favourite Flutter code editor and create a project.
2) First, we will create a FlareActor inside a GestureDetector(for registering click events)
3) Now we are going to create Animation Controller to control our animation
Yeeee, all set. If you are facing any error, you can refer the GitHub repo from here.
Conclusion
It’s proven that Rive animations are very easy, more powerful and maintainable. Rive is so easy to implement that we can now create a variety of complex animations while asleep, can’t we? 😃. That’s all for this article. I hope you grabbed something useful from it.
