This is a bit of an odd one related to not updating the flutter runtime since we moved to rive_native. @drawsgood and I observed that sometimes nested artboards weren't rendering properly to the stage (the nested artboard would appear as an empty node). I narrowed this down to whenever a file contained a layout with either a fill or stroke. The reason this was happening is because when we add a nested artboard, we use genRuntimeFile, which exports, then imports and validates the objects in the file. During the validation, if the file had a layout with a fill, the fill would attempt to validate, one of the conditions of which is that it's parent is a ShapePaintContainer. LayoutComponent IS a ShapePaintContainer, BUT the validate() happens against the flutter object, and since we haven't pushed updates to flutter, LayoutComponent there is NOT a ShapePaintContainer. The easiest fix for this is to just add the bits to LayoutComponent in flutter related to extending ShapePaintContainer. I think this should be ok since the added code doesn't have anything to do with rive_native and the new rendering pathway. One question I have is whether we should be continuing to validate against the flutter objects when it comes to nested artboards, now that we're using rive_native. @luigi-rosso perhaps we can discuss further when you are back in office. Diffs= c3137b923 Fix flutter validate() problem with drawable layouts (#7727) d9f5701ec add listener actions support for databind (#7710) dcb165130 Fix alignment when flex wrap enabled (#7722) fbfa3b545 Buildsystem fixes for build_rive.sh and PLS shaders (#7716) 405ca998b add click event support (#7668) 4732c37b5 Improve layout animation (#7712) a56419984 Simple procedural text rendering API (#7701) d6d79132b Add a test for nested events triggering listener in parent (#7709) 657f65e1c Fix for nested events in CPP (#7708) 0a11e599f Add a build_rive.sh script to unify the premake5 build process (#7691) d25b9097d viewmodel transitions runtime (#7680) Co-authored-by: Philip Chung <philterdesign@gmail.com>
Rive Flutter
Rive Flutter is a runtime library for Rive, a real-time interactive design and animation tool.
This library allows you to fully control Rive files with a high-level API for simple interactions and animations, as well as a low-level API for creating custom render loops for multiple artboards, animations, and state machines in a single canvas.
Table of contents
Overview of Rive
Rive is a powerful tool that helps teams create and run interactive animations for apps, games, and websites. Designers and developers can use the collaborative editor to create motion graphics that respond to different states and user inputs, and then use the lightweight open-source runtime libraries, like Rive Flutter, to load their animations into their projects.
For more information, check out the following resources:
🏡 Homepage
Getting started
To get started with Rive Flutter, check out the following resources:
For more information, see the Runtime sections of the Rive help documentation:
More advanced usage:
Choosing a Renderer
For more information see: https://rive.app/community/doc/overview/docD20dU9Rod
Note on the Impeller renderer
Starting in Flutter v3.10, Impeller has replaced Skia to become the default renderer for apps on the iOS platform and may continue to be the default on future platforms over time. As such, there is a possibility of rendering and performance discrepancies when using the Rive Flutter runtime with platforms that use the Impeller renderer that may not have surfaced before. If you encounter any visual or performance errors at runtime compared to expected behavior in the Rive editor, we recommend trying the following steps to triage:
- Try running the Flutter app with the
--no-enable-impeller
flag to use the Skia renderer. If the visual discrepancy does not show when using Skia, it may be a rendering bug on Impeller. However, before raising a bug with the Flutter team, try the second point below👇
flutter run --no-enable-impeller
- Try running the Flutter app on the latest master channel. It is possible that visual bugs may be resolved on the latest Flutter commits, but not yet released in the beta or stable channel.
- If you are still seeing visual discrepancies with just the Impeller renderer on the latest master branch, we recommend raising a detailed issue to the Flutter Github repo with a reproducible example, and other relevant details that can help the team debug any possible issues that may be present.
Supported platforms
Be sure to read the platform specific considerations for the Rive Flutter package.
Awesome Rive
For even more examples and resources on using Rive at runtime or in other tools, checkout the awesome-rive repo.
Contributing
We love contributions and all are welcome! 💙
Issues
Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our issues tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.