Creating Animations in Flutter by using Rive

  • Cubettech
  • Web App Development
  • 2 years ago
Creating Animations in Flutter by using Rive

Creating animations with Rive fall in the category of drawing-based animations. Rive is an animation framework created to facilitate you in creating stunning visuals for any sort of platform. When writing, Rive presently is in beta and supports that animation for Android, Flutter, Web, iOS, and C++.

Here in this section, we will show you how to create a simple rocket animation using Rive and how to integrate it into the Flutter app.

Create and configure the artboard


Choose the appropriate artboard size and make it transparent.


Design the object


To design your drawing and to demonstrate, only outline using the pen tool. There are also various predefined shapes and tools that you can use.


Animate the object


Now, switch to the animated tab and define where to place the object at the end of the animation using various keys. Give your animation a proper name that will be used to start the animation once done in your Flutter app.


Export the Rive file


Click the Export menu on the left and select the runtime.


Install Rive in the flutter app


Find the latest version of Rive and paste it into your pubspec.yaml file.



    sdk: flutter

  cupertino_icons: ^1.0.2

  rive: ^0.7.0

Now you need to import Rive into the project. So create a folder structure at the root of the project that includes assets, animations, etc. Paste the .riv file there. You must also provide a reference to it in the pubspec.yaml file. 

Load the Rive File


Load the .riv file into the artboard using the code below:

Artboard _riveArtboard;

RiveAnimationController _controller;


void initState() {



    (data) async {

      final file = RiveFile.import(data);

      final artboard = file.mainArtboard;

      setState(() => _riveArtboard = artboard);




RiveAnimationController controls the Rive animation at any given time.


Write a widget to show the Rive artboard


The whole artboard is shown using the Rive widget:


  child: _riveArtboard == null

      ? const SizedBox()

      : Rive(artboard: _riveArtboard),



Trigger the animation


We’ll use  FloatingActionButton to start the animation:


  onPressed: _launchRocket,

  child: Icon(Icons.play_arrow),



Play the animation


Now play the animation just by adding a controller with the animation name set as launch, which is the name of the animation we have created at the Rive app

We’ll use FloatingActionButton to start the animation:


  onPressed: _launchRocket,

  child: Icon(Icons.play_arrow),




Rive is a tool for designing real-time graphics and animations. With Rive, you can make interactive graphics and can include them inside Android, iOS, Flutter, and other supported platform applications. We hope that the blog provided you an insight on mobile app development to create a simple animation in Rive and include it inside the Flutter application to create a beautiful Flutter app. We hope you have learned the basics of Rive animations. We would love to know if you find this article helpful. 

Got a similar project idea?

Connect with us & let’s start the journey!

Questions about our products and services?

We're here to support you.

Staff augmentation is a flexible workforce strategy companies adopt to meet specific project needs or address skill gaps.

Begin your journey!
Need more help?