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.

dependencies:

  flutter:

    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;

@override

void initState() {

  super.initState();

  rootBundle.load(‘assets/animations/rocket_rive.riv’).then(

    (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:

Center(

  child: _riveArtboard == null

      ? const SizedBox()

      : Rive(artboard: _riveArtboard),

)

Trigger the animation

We’ll use  FloatingActionButton to start the animation:

FloatingActionButton(

  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:

FloatingActionButton(

  onPressed: _launchRocket,

  child: Icon(Icons.play_arrow),

)
 

Conclusion

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.