How to Use Rive Animation in Flutter?

Are you a programmer who’s looking to create stunning animations for your Flutter project? Then you need to check out Rive animation! This powerful and easy-to-use tool is the perfect way to create elaborate animations with just a few clicks. In this post, we’ll show you how to use Rive animation in Flutter.

What is Rive Animation?

Rive is a 2D animation tool that can be used to create animations for various platforms, including mobile apps built with Flutter. To use Rive animations in Flutter, you’ll need to follow these steps:

1. Create an animation in Rive: Use Rive to create the animation you want to use in your Flutter app. This can be done using Rive’s graphical user interface and its various tools.
2. Export the animation: Once you’re satisfied with your animation, export it as a Rive file. This file will contain all the information needed to play the animation in your Flutter app.
3. Add the Rive Flutter library to your app: To play Rive animations in Flutter, you’ll need to use the Rive Flutter library. This library can be added to your Flutter project by adding the following to your pubspec.yaml file:

dependencies:
rive: ^0.7.0

4. Load and play the animation: In your Flutter app, you can load and play the Rive animation by using the Rive widget. Here's an example of how to do this:

import 'package:rive/rive.dart';

class MyAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Rive(filename: "animation.rive"),
    );
  }
}

In this example, the Rive widget is used to load the Rive animation file and play it within a Container widget. You can customize the appearance and behavior of the animation by using the various properties and methods of the Rive widget.

5. Customize the animation: You can customize the behavior and appearance of the animation by using the various properties and methods of the Rive widget. For example, you can set the animation property to specify the name of the animation to play or use the play method to programmatically play the animation.

Here’s an example of how to customize the animation:

import 'package:rive/rive.dart';

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation> {
  RiveController _controller;

  @override
  void initState() {
    super.initState();
    _controller = RiveController();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Rive(
        filename: "animation.rive",
        controller: _controller,
      ),
    );
  }
}

In this example, a RiveController the object is created and assigned to the controller property of the Rive widget. This allows you to programmatically control the animation using the methods of the RiveController object.

These are the basic steps to use Rive animations in Flutter. For more information and advanced usage, you can refer to the Rive Flutter library’s official documentation.

Please check my YouTube channel where I demonstrate using Rive in a simple and fast way.

https://youtu.be/eNzBD7k_Wdw