Load a file

With the runtime added to your project, it's time to load an animation file!
Web
Flutter
iOS
Android
Web
1. Load a Rive file
With the Rive engine instantiated, we can load in our Rive (.riv) animation file
const req = new Request('./rive/loader.riv');
fetch(req).then((res) => {
  return res.arrayBuffer();
}).then((buf) => {
  // we've got the raw bytes of the animation,
  // let's load them into a Rive file
  const file = rive.load(new Uint8Array(buf));
  // ...
})
2. Grab an artboard
In Rive, animations are tied to artboards. A Rive file can have multiple artboards, but if you're just working with one you can grab it via defaultArtboard
const artboard = file.defaultArtboard();
Alternatively, you can reference a specific artboard
const artboard = file.artboard('my_artboard');
3. Reference an animation
Artboards hold references to animations. Reference a particular animation via its name set within the editor.
const myAnim = artboard.animation('animation_name');
Its good practice to create an instance of your animation
const myAnimInstance = new rive.LinearAnimationInstance(myAnim);
An animation instance is useful if you want Rive to manage state, which holds its time and direction. Rive manages looping via the instance. If you want to control the animation's time manually, then an instance isn't necessary; you can do this directly with the animation object.
We’re now ready to display and run the animation...
Flutter
1. Define an Artboard and Rive filename
Start by creating a new StatefulWidget and defining an Artboard object. In this instance, we've also declared the Rive filename as a variable.
class MyRiveAnimation extends StatefulWidget {
  @override
  _MyRiveAnimationState createState() => _MyRiveAnimationState();
}
​
class _MyRiveAnimationState extends State<MyRiveAnimation> {
  final riveFileName = 'assets/truck.riv';
  Artboard _artboard;
}
2. Create a load method
Define a method to load your animation into a RiveFile. Once imported we can access any of the file’s artboards and play the animations they contain. In this example, there’s one artboard, so we can fetch that with the file.mainArtboard property.
// loads a Rive file
void _loadRiveFile() async {
  final bytes = await rootBundle.load(riveFileName);
  final file = RiveFile();
​
  if (file.import(bytes)) {
    // Select an animation by its name
    setState(() => _artboard = file.mainArtboard
      ..addController(
        SimpleAnimation('idle'),
      )
    );
  }
}
Note that we load raw bytes. This gives you flexibility in where you source your Rive data: as assets, over a network, from a local database, or by other means.
3. Load the file
As we're using a StatefulWidget, we can now load the file directly inside the widget on initialization.
@override
void initState() {
  _loadRiveFile();
  super.initState();
}
Check out the example page to see these steps combined into a single file.
iOS
Stay tuned for information on our upcoming iOS runtime!
Android
Stay tuned for information on our upcoming Android runtime!
​
Runtimes - Previous
Add a runtime
Next - Runtimes
Play an animation
Last updated 3 weeks ago