Integrating Flutter and Rive
Hello dev, I believe you know that it’s totally possible to create animations just using the Flutter it self, but in case you have experience about creating animations using other tools, you might like to take a look on this.
Rive, previously known as Flare is a tool that help us to create interactive animations to any platform, so imagine that you are able to create an art and later you can make it move according to a state. Well I’m not the person capable to do that, but if you are and also got interested go ahead and check their website.
In this article I’ll show how to integrate the Flutter and the Rive, in order to show an animation on the app. In this case I downloaded a random animation provided by the community as an example, because as I told before, I’m not capable to create a good animation myself until now.
Ok, so the first thing to do is add the rive package in the pubspec.yaml and then create an asset folder and inside add the .riv file that you created or downloaded. Oh don’t forget to point to the asset file added in the project on your pubspec.yaml.
Now it’s time to use the rive package, so first define a RiveAnimationController and instantiate it in the initState method, informing the animation name at least. In this example I added a boolean telling that the animation can auto play.
Next in the build method use the RiveAnimation.asset widget and inform the same location that you put in the pubspec.yaml and the controller created before. And once more, in this example I added a property to make it cover all the app screen reproducing a splash screen for example.
Well, now if you run the app you probably have something like this.
And that’s it, very simple right? So I encourage you to learn how to use the Rive tool to make your app awesome and with cool animations.
