I should preface this article by saying that I am very new to Flutter and Rive so if you find something incorrect then please let me know.
Flutter is Google's new UI toolkit that aims to achieve the holy grail of software development - write once, run everywhere (which has the hip new term "ambient computing").
Flutter is composed of 2 core components: the engine and the Dart framework.
The Dart language itself is an object-oriented language that supports static typing but also allows for dynamic types as well as immutability. The Dart virtual machine (VM) takes the Dart code and executes it depending on what is required. The Dart VM supports just-in-time (JIT) compilation to enable super-fast hot-reloading while developing. It also supports ahead-of-time (AOT) compilation to ARM, Intel or AMD architectures which yields native performance characteristics.
It is intended that the Flutter API is the same across mobile, desktop, and web although web is still in beta and desktop is currently in alpha.
One of the strong selling points of Flutter is its animation abilities and performance. However, creating animations can be a time-consuming process. Enter Rive (once known as Flare): A tool for creating Flutter animations and a library for running those animations. Rive is seriously cool - just take a look at these smooth animation transitions in response to user interaction ...
I got super-excited over the teddy so I decided I wanted to have a play. I couldn't find a super simple tutorial on using Rive when I tried to experiment with it so I decided I would create one.
Flutter can be installed on Linux, Windows, or macOS.
I am going to use Flutter for mobile and Visual Studio Code for Linux in this tutorial but you can use Visual Studio Code on Windows or macOS as well.
After this is done, you need to install the Flutter plugin for Visual Studio Code (noting that the Flutter plugin also installs the Dart plugin)
Creating a basic Flutter app is as simple as ...
$ flutter create hello_world
Next we head over to Rive and create a free account. You only have to pay if you want a private account.
Create a new file and adjust the height and width you want the animation to be. You can move the artboard around by right-click dragging (or spacebar and left-click dragging) and you can zoom by using the mouse wheel (or Control + or Control -).
Let's drag in an asset SVG from the Noun Project. It's free to join and you can use the SVGs for non-commercial use provided you give attribution. The dragon I am using is by prasong tadoungsorn from the Noun Project.
If we want to make the dragon's head move we can attach a bone. A bone is a versatile way to make parts of the animation move. In this very simple case we attach a bone from the spine to the head. Next we drag the head shape in the hierarchy tree on the left down to be under the bone. We must make sure the head is hierarchically under the bone or the head won't move when the bone is moved.
To create the animation, we switch to the animate view. We select all shapes and hit the "k" key to set the initial position (I am not sure if this step is actually needed but it was the only way I could get it to work). We then grab the bone, move it to the desired position, and it will auto key the position by default. Hit play and repeat to view the final product.
This example is about as simple as you can get but you can do some fun things with bones ...
Next we need to add the animation to our flutter app.
First add the Rive Flutter package to the pubspec.yaml file. When you save the pubspec.yaml file in Visual Studio Code, the package will be automatically downloaded. Note that spaces are important in yaml files so make sure you have the correct number of spaces.
dependencies: rive: ^0.0.1
Create a folder "assets/animations" in your project and move your animation file to the folder (e.g. assets/animations/dragon.flr). Update your pubspec.yaml file to refer to this new folder.
assets: - assets/animations/
Pick a place where you want to add the animation to main.dart and insert the following:
Container( height: 200, width: 200, child: FlareActor("assets/animations/dragon.flr", animation: "Untitled", color: Colors.red ), )
Note you will need to ensure this is added to the top of main.dart:
This is a very simple example to help people new to Flutter and Rive to get started. If you are interested in learning more, there are many more very good but more complex tutorials available.