Comment on page
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.
pubspec.yaml
dependencies:
rive: 0.11.11
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
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
RiveAnimation.file('path/to/local/file.riv')
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)
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
Github: https://github.com/rive-app/rive-flutter
API Docs: https://pub.dev/documentation/rive/latest/
Examples:
Last modified 6d ago