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.

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
1
dependencies:
2
rive: 0.9.0
Copied!

2. Import the Rive package

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

3. Add a RiveAnimation widget

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

Via URL

1
RiveAnimation.network(
2
'https://cdn.rive.app/animations/vehicles.riv',
3
)
Copied!

Via Asset Bundle

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

Complete example

main.dart
1
import 'package:flutter/material.dart';
2
import 'package:rive/rive.dart';
3
4
void main() => runApp(MaterialApp(
5
home: MyRiveAnimation(),
6
));
7
8
class MyRiveAnimation extends StatelessWidget {
9
@override
10
Widget build(BuildContext context) {
11
return const Scaffold(
12
body: Center(
13
child: RiveAnimation.network(
14
'https://cdn.rive.app/animations/vehicles.riv',
15
fit: BoxFit.cover,
16
),
17
),
18
);
19
}
20
}
Copied!
See subsequent runtime pages to learn how to control animation playback, state machines, and more.

Resources

Last modified 20d ago