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:

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.21.23.mp4