https://github.com/HayesGordon/rive_flutter_runtime_color_change_example
An example demonstrating how to create a custom Rive render object that can update component colours at runtime
https://github.com/HayesGordon/rive_flutter_runtime_color_change_example
Last synced: 7 months ago
JSON representation
An example demonstrating how to create a custom Rive render object that can update component colours at runtime
- Host: GitHub
- URL: https://github.com/HayesGordon/rive_flutter_runtime_color_change_example
- Owner: HayesGordon
- Created: 2023-03-07T13:09:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T13:26:21.000Z (over 2 years ago)
- Last Synced: 2024-08-01T21:51:26.376Z (about 1 year ago)
- Language: Dart
- Size: 8.79 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-rive - Dynamically update component colors at runtime - Make use of a custom Rive render object to change a shape's fill color, accessing it by name. (Advanced / Sync Sounds at runtime)
README
# Rive Flutter Runtime Color Change Example
This example demonstrates how you can make use of a custom Rive render object to dynamically change the color of components at runtime - while also respecting their opacity (alpha values) during animation.
## Example
This example changes the color of two shapes, by specifying the correct shape and fill names (as defined in the editor).
Example code:
```dart
RiveColorModifier(
artboard: _riveArtboard!,
fit: BoxFit.contain,
components: [
RiveColorComponent(
shapeName: 'box-shape-1',
fillName: 'box-fill-1',
color: Colors.purple,
),
RiveColorComponent(
shapeName: 'box-shape-2',
fillName: 'box-fill-2',
color: Colors.green,
),
],
),
```
Note that the **shape** and **fill** names need to be specified in order to find them at runtime.
https://user-images.githubusercontent.com/13705472/223434324-5bcc0d61-302f-4501-b978-68bd12eaa4f4.mp4