Rive Guide
Search…
Flutter
Flutter runtime for Rive

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.

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

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

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

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

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

Make sure you add the Rive file to your asset bundle and reference it in pub.dev
RiveAnimation.asset(
'assets/vehicles.riv',
)

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.

Copy link
On this page
Overview
Getting Started
1. Add the Rive package dependency
2. Import the Rive package
3. Add a RiveAnimation widget
Complete example
Resources