Taking Flutter Animations for a Test Rive

#flutter #rive #beginners

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.

The Theory

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.

For Android and iOS, the engine is Skia which is well known for its use in Chrome for 2D text and graphics rendering. For web, the engine converts Dart code to JavaScript.

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 ...

The Practice

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.

Setting Up

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 Hello World Flutter App

Creating a basic Flutter app is as simple as ...

$ flutter create hello_world

Note you can use whatever name for the app you want.

Now you can open the newly created folder and debug it. The first time it starts takes a while but update thereafter are very fast.

Creating a Simple Rive-amation

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 ...

Now simply export the animation to a binary file and note that the name of the animation is "Untitled" in my case.

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:

import 'package:flare_flutter/flare_actor.dart';

So lets give it a whirl and see the final result ...

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.