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
dependencies:
  rive: 0.9.1
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 pub.dev
RiveAnimation.asset(
  'assets/vehicles.riv',
)
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.
Resources
Github: https://github.com/rive-app/rive-flutter
API Docs: https://pub.dev/documentation/rive/latest/
Examples:
Demo app: https://github.com/rive-app/rive-flutter/tree/master/example/lib​
Find the Dog (game): https://github.com/rive-app/find-the-dog​

Angular

Alternative Widget Setup

Last modified 5mo ago