Rive Guide
Ask or search…
⌃K
Comment on page

Flutter

Flutter runtime for Rive

Overview

This guide documents how to get started using the Flutter runtime library. Rive runtime libraries are open-source. The source is available in its GitHub repository. This library contains an API for Flutter apps to easily integrate their Rive assets.

Quick Start

See our quick start example that shows how to play a Rive animation in Flutter.

Getting Started

Follow the steps below for a quick start on integrating Rive into your Flutter apps.

1. Add the Rive package dependency

Check out Rive's pub.dev page to get the latest version.
pubspec.yaml
dependencies:
rive: 0.11.11

2. Import the Rive package

Import the Rive runtime library in the file you're looking to integrate Rive animations into.
import 'package:rive/rive.dart';

3. Add a RiveAnimation widget

There are a few different methods to integrating Rive Animations into your apps easily:

Via URL

RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
)

Via Asset Bundle

Make sure you add the Rive file to your asset bundle and reference it in pubspec.yaml
RiveAnimation.asset(
'assets/vehicles.riv',
)
In pubspec.yaml:
...
​
# To add assets to your application, add an assets section, like this:
assets:
- assets/vehicles.riv

Via Relative Path

RiveAnimation.file('path/to/local/file.riv')

Via Direct

If you use the same Rive file multiple times in your application, you may want to create a single RiveFile instance for that .riv, and feed it directly to RiveAnimation so that the Rive file is only loaded once.
final riveFile = await RiveFile.asset('assets/truck.riv');
​
RiveAnimation.direct(riveFile)

Complete example

main.dart
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
​
void main() => runApp(MaterialApp(
home: MyRiveAnimation(),
));
​
class MyRiveAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
fit: BoxFit.cover,
),
),
);
}
}
See subsequent runtime pages to learn how to control animation playback, state machines, and more.
Using Impeller and noticing visual bugs in your app? See our notes on rendering with Impeller for some triaging tips

Resources

Last modified 6d ago