Animations Users Love

This is an introduction to rive(formerly flare) animations for your flutter application. Why should you use rive?

First, the Adobe After Effects animation files can be loaded and converted by rive studio which also means that the Lottie files site files can also be loaded and converted into riv format by the-rive studio web app. The gist is that it allows you to reduce the number of animation controllers you have write-by-hand.

First, before we get to flutter code on how to use the rive plugin let’s cover some basics about rive. You need the animation-name for your animation controller to use. That name can be found in the web player preview of any animation within the rive web app at:

https://rive.app/preview/?filename=224-424-luke-vs-darth

That is the animation by Bobbeh which I am using in this flutter demo; as you notice the right panel shows the animation-name as Animation 1(the artboard) which will get used in our animation controller.

To install the rive plugin in your pubspec under dependencies:

rive: ^0.7.9

Since, we will be making use of Futures to load the file; I am using catcher to catch application exceptions as it’s easier to catch exceptions. And, that code typically in the main function looks like this:

The logger code is the exact same right from my Logging, the Expert Way Article:

https://readmedium.com/logging-the-expert-way-5beb5c967e44

Now we can get down to how to get the rive player to play our animation.

The Rive Controller

First, we create a simple myapp container to insert our my-animation widget into:

I supply two things the catcher navigatorKey so that a full app exception page is displayed when I have an app exception and I use a flag to turn off the debug banner.

There are two things you will always encounter with animation controllers. One, due to null-safety you will initialize the controller last after you set up your togglePlay function and set up any other variables including your artboard variable.

Let’s look at the setup state, initState function:

@override

void initState() {

super.initState();

// Load the animation file from the bundle, note that you could also

// download this. The RiveFile just expects a list of bytes.

rootBundle.load(riveFileName).then(

(data) async {

// Load the RiveFile from the binary data.

final file = RiveFile.import(data);

// The artboard is the root of the animation and gets drawn in the

// Rive widget.

final artboard = file.mainArtboard;

// Add a controller to play back a known animation on the main/default

// artboard. We store a reference to it so we can toggle playback.

artboard.addController(_controller = SimpleAnimation('Animation 1'));

// need to start with false so controller is paused

_controller!.isActive = false;

setState(() => _riveArtboard = artboard);

},

);

The way to read that is that we are loading the riv file through the rootBundle function which returns a future and we do not need to add onError as we are already using the catcher plugin to catch app exceptions. But, we need to be careful here as according to the source of SimpleAnimation nothing is thrown if unable to load the file.

Or to put it another way, we have to audit-the-chain-of-custody. In other words, work up from the process of loading the file. I know that rootBundle function will return an onError future if an error occurs. That will basically be caught by the catcher plugin code in the main function.

And, before the rootBundle we have the two exceptions that the rive player will which is either a format error or unsupported version. In fact, this is why you should always name your riv files by the runtime version in the case when the-rive player changes formats.

This is the basic strategy you have to use to ensure you track down and catch every exception in your flutter application code.

The Artboard and SimpleAnimation Controller

An artboard is an animation itself. There can be more than one artboard. And the artboard name is what the Animation Controller needs to grab the animation. In this code case, Animation 1, is the artboard.

The SimpleAnimation Controller needs the artboard to use for animation play-black. In this case, it’s Animation 1. The isActive boolean flag indicates whether that artboard is active being played as an animation. That means we actually should set it to false before setting the artboard state the first time.

This way the file will load in our widget container as part of the-rive player but not immediately start except when we press the play button.

The Source and The Video

The source is at this project repo in the rive_animations subfolder as the stop_start_animation project:

https://github.com/fredgrott/flutter_design_and_arch_rosetta

That repo is where I am putting all my medium article code and the demo apps I am building for my flutter book developer series.

The video of the demo in action is at youtube and embedded here:

Conclusion

As I go further into rive animations I will be covering how to use them for background candy in login-screens,

buttons on the appbar, buttons in bottom navbar navigation, and other neat stuff to help you brand your flutter application. And, yes, some advanced stuff I will cover includes how to integrate the animation controllers with the state management solutions out there such as riverpod, provider, getit, getx, and mobx.

Resources

Resources specific to the article:

Rive plugin at pub.dev https://pub.dev/packages/rive

rive studio app to edit animations https://rive.app/

rive flutter source code https://github.com/rive-app/rive-flutter

flutter design and arch rosetta https://github.com/fredgrott/flutter_design_and_arch_rosetta

General Flutter and Dart resources:

Flutter Community Resources https://flutter.dev/community

Flutter SDK https://flutter.dev/docs/get-started/install

Android Studio IDE https://developer.android.com/studio

MS’s Visual Studio Code https://code.visualstudio.com/

Flutter Docs https://flutter.dev/docs

Dart Docs https://dart.dev/guides

Google Firebase Mobile Device TestLab https://firebase.google.com/docs/test-lab

Trademark Notice

Google LLC owns the following trademarks; Dart, Flutter, Android, Roboto, Noto. Apple Inc owns the trademarks iOS, MacOSX, Swift, and Objective-C. Apple Inc owns trademarks to their fonts of SF Pro, Sf Compact, SF mono, and New York. JetBeans Inc owns the trademarks to JetBeans, IntelliJ, and Kotlin. Oracle Inc owns the Java trademark. Microsoft Inc owns the trademarks to MS Windows OS and Powershell. Gradle is a trademark of Gradle Inc. The Git Project owns the trademark to Git. Linux Foundation owns the trademark to Linux. Smartphone OEM’s own trademarks to their mobile phone product names. To the best of my ability, I follow the brand and usage guidelines with the above-mentioned trademarks.

About Fred Grott

I’m the crazy SOB who as a former android mobile developer is starting to write about flutter mobile app development, design, and life(see Eff COVID-19 and GOP ). Will I reach the pivotal One Million Medium monthly viewers mark? Sit back and watch. Find me on social platforms such as Xing, LinkedIN, Keybase, and Twitter.