Rive Flutter Animations Example

In this article, we are going to learn how to implement rive flutter animations in flutter applications. Rive animations are platform independent. So we can create once and we can use it on multiple platforms.

Rive is very important tool to create animations in mobile applications. Rive is formally known as Flare which is created by 2Dimensions. Rive community is very big. In this flutter example, we are using pre built rive animations to integrate in our flutter applications.

We can also design and create rive animations in rive console from scratch. But in this tutorial, we are only implementing already created rive animation in our applications. For this first we need to export animation as per our requirement from rive website.

To use rive animation in our applications, we need to add rive library in our pubspec.yaml file. Then we need to place already exported animation in some folder in source code and add path in pubspec.yaml file.

Add required dependency in pubspec.yaml file

Add Rive File in a folder of our project

First place rive animation file in folder and add path in our pubspec.yaml file.

Import Rive Flutter Package

Rive Flutter Animations

RiveAnimationController is used to control rive animations in flutter applications. We need to add this controller in Artboard class using addController method. First we load our rive animation file using rootBundle class and create new artboard. Then add this artboard in rive widget using artboard parameter.