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.9.1
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
pub.dev
RiveAnimation.asset(
'assets/vehicles.riv',
)
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.
Github: https://github.com/rive-app/rive-flutter
API Docs: https://pub.dev/documentation/rive/latest/
Examples:
Last modified 5mo ago