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: about 1 month 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 (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-07T13:26:21.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T21:51:26.376Z (4 months 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.

![CleanShot 2023-03-07 at 14 24 24](https://user-images.githubusercontent.com/13705472/223434984-ce839e80-03d9-4f8b-aeee-8308975b3300.png)

https://user-images.githubusercontent.com/13705472/223434324-5bcc0d61-302f-4501-b978-68bd12eaa4f4.mp4