Note that certain Rive features may not be supported yet for a particular runtime, or may require using the Rive Renderer.

For more details, refer to the feature support and choosing a renderer pages.

We’re revamping the Rive Flutter runtime. To explore the new API and a version of Rive Flutter that supports the latest features and the Rive Renderer, check out Rive Native.

​
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.13.14
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

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

GitHub: https://github.com/rive-app/rive-flutter

API Docs: https://pub.dev/documentation/rive/latest/

Examples: