Flutter

Flutter runtime for Rive

This article is out of date! Find the new version here.

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

Github: https://github.com/rive-app/rive-flutter API Docs: https://pub.dev/documentation/rive/latest/ Examples:

Last updated