RiveAnimation
Rive is a real-time interactive design and animation tool. Using the RiveAnimation widget you can easily import your Rive assets to FlutterFlow and use them inside your app.
Designing Animation
You can create an animation from scratch by using Rive Editor.
Click + New File.
Specify the Artboard dimensions (Width and Height).
Click Create.
Use the Rive design tools or import image files to start designing your animation. Once your design is ready you can use the Timeline and use keying to easily animate your design.
You should have at least one Artboard inside your Rive file but you can add an infinite amount of Artboards.
Learn more about designing Rive animation from the following page:
After you have completed designing your animation, you can either download it as an asset (having .riv extension) or you can share it with others by publishing it to the Rive community.
To download the Rive file, click the Export icon (top-left corner of the Rive toolbar), and select Download -> For newest runtime.
To publish the file to the community, click the Export icon (top-left corner of the Rive toolbar), and select Publish to Community. Give a title and description to your animation and click Publish to Community.
For using a Rive animation file inside FlutterFlow, you should either download or publish the file to the community.
Instead of creating an animation from scratch, you can also use any Rive asset shared in the Community.
Adding RiveAnimation widget
Follow the steps below to use a Rive animation:
Drag and drop the RiveAnimation widget onto the canvas.
Select the Animation Source as either Network or Asset.
If you have selected Network, enter the Path (download URL) of the animation. Get the path by navigating to the Rive animation published in the community, right-click on the Download button and copy the link address.
If you have selected Asset,
Choose an Artboard from the dropdown list.
Select the Animations that you want to use (these are imported from the Rive asset). After selecting one or more animation(s), you can use the Preview Animations button to play it.
The Animation Type is selected as Once by default. If the selected animations contain a loop or boomerang, you will have an option to select Continuous. On choosing this option, if the animation contains a loop it will play continuously.
By default, the Auto Animate checkbox remains checked, which means that the animation will play as soon as the page loads. But if you want to use an Action to trigger the animation, uncheck this.
Specify the Width and Height of the RiveAnimation widget, and select a Box Fit type.
(Optional) If you plan to use an Action to trigger the animation, you can give an appropriate Name to this RiveAnimation widget for it to be easily identifiable.
Control Animation using Action
To trigger a RiveAnimation to start playing using an Action, you can use the Animation Action. Check out this page to know how to use the action.
References
FlutterFlow uses the rive package for Rive animations.
Last updated
