mirror of
https://github.com/rive-app/rive-flutter.git
synced 2025-08-24 00:26:17 +08:00
175 lines
4.6 KiB
Markdown
175 lines
4.6 KiB
Markdown
[](https://pub.dev/packages/rive)
|
|
|
|
|
|
|
|
|
|
|
|
# Rive
|
|
|
|
Runtime docs are available in [Rive's help center](https://help.rive.app/runtimes/quick-start).
|
|
|
|
[Rive](https://rive.app/) is a real-time interactive design and animation tool. Use our collaborative editor to create motion graphics that respond to different states and user inputs. Then load your animations into apps, games, and websites with our lightweight open-source runtimes.
|
|
|
|
## Add to pubspec.yaml
|
|
|
|
```yaml
|
|
dependencies:
|
|
rive: ^0.7.22
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
Play an animation from a Rive file over HTTP:
|
|
|
|
```dart
|
|
import 'package:flutter/material.dart';
|
|
import 'package:rive/rive.dart';
|
|
|
|
void main() {
|
|
runApp(MaterialApp(home: SimpleAnimation()));
|
|
}
|
|
|
|
class SimpleAnimation extends StatelessWidget {
|
|
const SimpleAnimation({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const Scaffold(
|
|
body: Center(
|
|
child: RiveAnimation.network(
|
|
'https://cdn.rive.app/animations/vehicles.riv',
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
To play an animation from an asset bundle, use:
|
|
|
|
```dart
|
|
RiveAnimation.asset('assets/truck.riv');
|
|
```
|
|
|
|
Control playing and pausing a looping animation:
|
|
|
|
```dart
|
|
import 'package:flutter/material.dart';
|
|
import 'package:rive/rive.dart';
|
|
|
|
void main() {
|
|
runApp(MaterialApp(home: PlayPauseAnimation()));
|
|
}
|
|
|
|
class PlayPauseAnimation extends StatefulWidget {
|
|
const PlayPauseAnimation({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
_PlayPauseAnimationState createState() => _PlayPauseAnimationState();
|
|
}
|
|
|
|
class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
|
|
// Controller for playback
|
|
late RiveAnimationController _controller;
|
|
|
|
// Toggles between play and pause animation states
|
|
void _togglePlay() =>
|
|
setState(() => _controller.isActive = !_controller.isActive);
|
|
|
|
/// Tracks if the animation is playing by whether controller is running
|
|
bool get isPlaying => _controller.isActive;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = SimpleAnimation('idle');
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: Center(
|
|
child: RiveAnimation.network(
|
|
'https://cdn.rive.app/animations/vehicles.riv',
|
|
controllers: [_controller],
|
|
// Update the play state when the widget's initialized
|
|
onInit: (_) => setState(() {}),
|
|
),
|
|
),
|
|
floatingActionButton: FloatingActionButton(
|
|
onPressed: _togglePlay,
|
|
tooltip: isPlaying ? 'Pause' : 'Play',
|
|
child: Icon(
|
|
isPlaying ? Icons.pause : Icons.play_arrow,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Play a one-shot animation repeatedly on demand
|
|
|
|
```dart
|
|
/// Demonstrates playing a one-shot animation on demand
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:rive/rive.dart';
|
|
|
|
void main() {
|
|
runApp(MaterialApp(home: PlayOneShotAnimation()));
|
|
}
|
|
|
|
class PlayOneShotAnimation extends StatefulWidget {
|
|
const PlayOneShotAnimation({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
_PlayOneShotAnimationState createState() => _PlayOneShotAnimationState();
|
|
}
|
|
|
|
class _PlayOneShotAnimationState extends State<PlayOneShotAnimation> {
|
|
/// Controller for playback
|
|
late RiveAnimationController _controller;
|
|
|
|
/// Is the animation currently playing?
|
|
bool _isPlaying = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = OneShotAnimation(
|
|
'bounce',
|
|
autoplay: false,
|
|
onStop: () => setState(() => _isPlaying = false),
|
|
onStart: () => setState(() => _isPlaying = true),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('One-Shot Example'),
|
|
),
|
|
body: Center(
|
|
child: RiveAnimation.network(
|
|
'https://cdn.rive.app/animations/vehicles.riv',
|
|
animations: const ['idle', 'curves'],
|
|
controllers: [_controller],
|
|
),
|
|
),
|
|
floatingActionButton: FloatingActionButton(
|
|
// disable the button while playing the animation
|
|
onPressed: () => _isPlaying ? null : _controller.isActive = true,
|
|
tooltip: 'Play',
|
|
child: const Icon(Icons.arrow_upward),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
## Antialiasing
|
|
|
|
If you want to disable antialiasing (usually for performance reasons), you can set `antialiasing` to `false` on the `Rive` and `RiveAnimation` widgets.
|