Skip to main content
1y ago

How to set different colors to instances?

I have very simple symbol that is a Solo with two states, and artboard with its multiple instances.

How can I assign different colors to instances? So end result look like 2nd picture:

And how can I do that in Flutter at runtime, setting colors dynamicaly?

I looked all tutorials and closest that I found is "skinning". But skinning is way more complex, like creating new instance in particular color.

3 replies
1y ago

Hi , In order to change the colors in Rive you have to create a state machine in Person artbard where you change the color using a numerical input and expose the input. Then in the main artboard, you can use the nested inputs if you want to change the color of each person or create another state machine with a new input that activates the nested inputs, to be able to access it in Runtime. Tell me if you need any examples of this.

Regarding the color change in runtime, here is an example. https://github.com/HayesGordon/rive_flutter_runtime_color_change_example

1y ago

Thank you! Of course If you have any examples it would be very helpful!

1y ago

This is a simple demo. You need to create and animation for each color. Then add them to the state machine using Any State. Create a numerical input and use it as a condition for each transition. Finally, expose the input. In the main artboard add the color/character artboard, duplicate it and you will see that in the state machine you will be able to access the input of each instance and configure the color you want. I hope this helps.