FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Rive Animation

This action can be used to trigger the Rive animation inside your FlutterFlow app.
Rive Teddy's hands-up animation in action

Prerequisites

Before you start defining the Animation Action, add the RiveAnimation widget.

Defining Rive Animation Action

Follow the steps below to define an action to start the animation:
  1. 1.
    Select the widget (eg., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Animation.
  6. 6.
    Set Choose Animation Type to Rive Animation.
  7. 7.
    Under Choose Rive Animation, select the RiveAnimation widget (If you have given your RiveAnimation widget a name, that will be displayed here).
You should have the Auto Animate unchecked inside the properties of RiveAnimation widget to take advantage of this action.

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.

Widget Animation code

All the values to be used for the animation are stored inside the animationsMap variable. Inside initState, the setupTriggerAnimations method is used for initializing the widget animations:
Then the AnimationController is retrieved from the animationsMap variable. To start the animation forward() method is called on the controller:

Rive Animation code

The controllers for the Rive animation are initialized inside the initState:
The name of the animations are stored inside the teddyAnimationAnimationsList variable (in this case there is only one animation present), and the controllers are stored inside the teddyAnimationControllers variable.
Then the controllers are used to start the animation as the user taps the button. The generated code for the Rive Animation action can be viewed by selecting the button on which the action is added:
Here, controller.reactivate is set to true in order to start/restart the animation.

References

  • Know more about AnimationController from here.
Previous
Widget Animation
Next
Lottie Animation
Last modified 11mo ago