To use the library, run npm install rive-canvas
and include it within the <body>
of your HTML file, adapting the path to suit your project's setup.
<script src="/node_modules/rive-canvas/rive.js"></script>
Then instantiate the Rive engine and load the WASM file(s) within your JavaScript.
Rive({locateFile: (file) => '/node_modules/rive-canvas/' + file,}).then((rive) => {// Rive's ready to rock 'n roll// Let's load up a Rive animation file...});
As with all npm packages, you can use the freely available CDN via unpkg.com.
<script src="https://unpkg.com/rive-canvas@0.6.5/rive.js"></script>
Rive({locateFile: (file) => 'https://unpkg.com/rive-canvas@0.6.5/' + file,}).then((rive) => {// Rive's ready to rock 'n roll// Let's load a Rive animation file...});
To get started, add the Rive package and your Rive file to your pubspec.yaml
file.
dependencies:rive: ^0.6.2​flutter:assets:- assets/truck.riv
Install the package from the command line.
$ flutter pub get
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, import the library.
import 'package:rive/rive.dart';
Stay tuned for information on our upcoming iOS runtime!
Stay tuned for information on our upcoming Android runtime!
​