How do I play a Rive Animation in flutter


I am new to Rive and because there is close to no good documentation for Rive 2 I wanted to ask here. How do I play my Rive Animation in flutter? I copy + pasted the example that was on for the rive dependecy and switched out their animation name to mine, but it just shows me a weird freezeframe of my animation. This is the code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  void _togglePlay() {
    setState(() => _controller.isActive = !_controller.isActive);

  /// Tracks if the animation is playing by whether controller is running.
  bool get isPlaying => _controller?.isActive ?? false;

  Artboard _riveArtboard;
  RiveAnimationController _controller;
  void initState() {

    // Load the animation file from the bundle, note that you could also
    // download this. The RiveFile just expects a list of bytes.
      (data) async {
        // Load the RiveFile from the binary data.
        final file = RiveFile.import(data);
        // The artboard is the root of the animation and gets drawn in the
        // Rive widget.
        final artboard = file.mainArtboard;
        // Add a controller to play back a known animation on the main/default
        // artboard.We store a reference to it so we can toggle playback.
        artboard.addController(_controller = SimpleAnimation('idle'));
        setState(() => _riveArtboard = artboard);

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _riveArtboard == null
            ? const SizedBox()
            : Rive(artboard: _riveArtboard),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,


You might need to change the name of the animation you want to play from your Rive file.

This line:

artboard.addController(_controller = SimpleAnimation('idle'));

attempts to play an animation called ‘idle’. If you animation is named differently, try replacing the name here.

This blog post has more info on using Rive with Flutter.

Answered By – Matt S.

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *