Need help with rive-flutter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

rive-app
461 Stars 78 Forks MIT License 259 Commits 20 Opened issues

Services available

!
?

Need anything else?

Contributors list

Pub Version Build Status Discord badge Twitter handle

Rive

Runtime docs are available in Rive's help center.

Rive 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

dependencies:
  rive: ^0.7.22

Quick Start

Play an animation from a Rive file over HTTP:

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:

RiveAnimation.asset('assets/truck.riv');

Control playing and pausing a looping animation:

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 { // 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

/// 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 { /// 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.