Rive Color Modifier

This package provides an easy and straightforward way to modify the Color of specific Components within Rive Animations at runtime, while also maintaining their opacity (alpha values) throughout the animation.

Demo

Getting started

Important Notes

1. Exporting Names: When exporting your Rive file, make sure to enable the "Export Options -> Export all names" setting. This is crucial for the package to function correctly.

2. Rive Pro vs. No Pro: There are some limitations when using the runtime export version of Rive files, particularly for changing the colors of certain elements like Strokes and Fills. To get full functionality, it might be necessary to use the backup export option, which is a Rive Pro feature. The issue at hand is that since version v0.8.1440 of the Rive editor, the option to not export object names was enabled to reduce file size. This causes a problem where only the names of Shapes are exported, but not the names of the elements they contain, such as Fills and Strokes. I am exploring effective solutions for non-Pro users so that the package can still be used with the names of fills and strokes.

3. Gradients Support: As of version 2.1.1, this package now supports changing both linear and radial gradients using the new RiveGradientComponent widget.

Before starting to work with this package, it's essential to understand that it is necessary to have a .riv file, which must contain the animations you wish to modify. If you have not yet created any animation in Rive or are unfamiliar with its editor, there's no need to worry. You can visit the community section to explore and edit the impressive animations shared by the community. In my case, I borrowed this fabulous animation from JcToon. Once you access the editor, it is crucial to consider some key aspects before integrating the file into our project.

1- It is crucial to assign a name to the Artboard that houses the animation you wish to alter. This step is essential because we will need to later retrieve the artboard using the assigned name in the following manner:

// This method will be called in the initState method of your StatefulWidget
Future<void> _load() async {
  // Load the RiveFile from the asset bundle
  final avatarFile = await RiveFile.asset('assets/avatar.riv');
  // Get the artboard containing the animation you want to modify
  final artboard = avatarFile.artboardByName('Avatar')!;

  setState(
    () {
      // Initialize the _avatarArtboard variable previously declared
      _avatarArtboard = artboard;
    },
  );
}

Thus, we can then pass the previously initialized variable _avatarArtboard to our RiveColorModifier.

Changing the name of the Artboard in the Rive editor is a straightforward process: simply double-click on any of the two highlighted areas and change the name to one you find most suitable for yourself.

2- Then, make sure that each Shape has a unique name, as this will be the identifier we use to modify the color of each one. To change the name of a Shape, simply click on the current name and modify it to the one you desire.

Next, I'll show you an example of how the name of each Shape is used to modify its color in the code:

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: 'Left Earring', // Shape name
      // rest of the code
    ),
    RiveColorComponent(
      shapePattern: 'Right Earring', // Shape name
      //...
    ),
    //* BANDANA LINES COLOR
    RiveColorComponent(
      shapePattern: 'Bandana Lines', // Shape name
      //...
    ),
    //* BANDANA COLOR
    RiveColorComponent(
      shapePattern: 'Bandana', // Shape name
      //...
    ),
    //* HEAD SKIN COLOR
    RiveColorComponent(
      shapePattern: 'Head Skin', // Shape name
      //...
    ),
  ],
)

Or you can use patterns to match multiple Shapes with a single RiveColorComponent:

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: '.*Earring', // Pattern to match all Shapes that end with "Earring"ss
      // rest of the code
    ),
    // ...
  ],
)

3- Finally, it's important that each Fill or Stroke you wish to modify has a unique name. To change the name of a Fill or Stroke, simply click on the current name and modify it to the one you desire.

• First, select the Shape that contains the Fill or Stroke you wish to modify.

As we can see on the right, in this case, it's a Fill.

• Then click on the highlighted area and change the name to the one you desire.

I always recommend naming it using the same name assigned to the Shape plus "Stroke" or "Fill" depending on the type.

Next, I'll show you an example of how the name of each Fill or Stroke is used to modify its color in the code:

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: 'Left Earring',
      fillPattern: 'Left Earring Fill', // Fill name
      color: Colors.yellow, // Color
    ),
    RiveColorComponent(
      shapePattern: 'Right Earring',
      fillPattern: 'Right Earring Fill', // Fill name
      color: Colors.yellow, // Color
    ),
    //* BANDANA LINES COLOR
    RiveColorComponent(
      shapePattern: 'Bandana Lines',
      strokePattern: 'Bandana Lines Stroke', // Stroke name
      color: Colors.orange.shade300;, // Color
    ),
    //* BANDANA COLOR
    RiveColorComponent(
      shapePattern: 'Bandana',
      fillPattern: 'Bandana Fill', // Fill name
      color: Colors.orange, // Color
    ),
    // ...
  ],
)

Or you can use patterns to match multiple Fills or Strokes with a single RiveColorComponent:

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: '.*Earring', // Pattern to match all Shapes that end with "Earring"
      fillPattern: '.*Earring Fill', // Pattern to match all Fills that end with "Earring Fill"
      color: Colors.yellow, // Color
    ),
    // ...
  ],
)

On certain occasions, we might encounter a component we want to change that, instead of being a Shape, is a geometric figure. In this case, what we need to do is select the figure and edit the vertices to turn it into a Shape, as shown in the following image.

• Expand the element tree of the figure.

• Select the Path of the figure and click the "Edit Vertices" button.

• Then click the "Convert" button.

• And voila! It's now a Shape!!

How It Works

Without using patterns

This package allows you to dynamically modify the Color properties of specific components in your Rive Animations. Below is an example demonstrating how to use RiveColorModifier along with RiveColorComponent to change the color of particular Shapes within an animation.

You just have to provide the Artboard of the Rive asset you are using to the RiveColorModifier, and in the components property, you pass a RiveColorComponent for each Shape you want to change the color of. You also pass the name of the Fill or Stroke and then the Color you want it to have. Super simple!

// Example of how to use RiveColorModifier
RiveColorModifier(
  artboard: _yourArtboard,
  components: [
    // Changing the color of a Shape's Fill
    RiveColorComponent(
      shapePattern: 'Your Shape Name',
      fillPattern: 'Your Fill Name',
      color: isDarkMode ? Colors.white : Colors.black, // Dynamic color depending on the theme
    ),
    // Changing the color of a Shape's Stroke
    RiveColorComponent(
      shapePattern: 'Your Shape Name',
      strokePattern: 'Your Stroke Name',
      color: isDarkMode ? Colors.white : Colors.black, // Dynamic color depending on the theme
    ),
  ],
)

Using patterns

// Example of how to use RiveColorModifier with patterns
RiveColorModifier(
  artboard: _yourArtboard,
  components: [
    // Changing the color of multiple Shapes' Fills and Strokes with a single RiveColorComponent
    RiveColorComponent(
         shapePattern : '.*',        // Pattern to match all Shapes
         fillPattern  : '.*primary', //          ""          Fills that end with "primary"
         strokePattern: '.*primary', //          ""          Strokes that end with "primary"
         color: primaryColor,
      ),
  ]
)

If you want to see a complete example, you can check the example provided in the package.

Changing Gradients

New in version 2.1.1, you can now modify linear and radial gradients:

// Example of how to change gradients with RiveGradientComponent
RiveColorModifier(
  artboard: _yourArtboard,
  components: [
    // Changing a linear or radial gradient
    RiveGradientComponent(
      shapePattern: 'Your Shape Name',
      fillPattern: '.*', // Pattern to match all Fills
      colors: [Colors.red, Colors.blue],
      stops: [0.0, 1.0],
    ),
  ],
)

Additional information

For more information on how to use this package, or if you want to contribute, please visit the GitHub repository. If you encounter any issues or have feature requests, please file them in the issue tracker.

Don't forget to like the package if you find it useful, and if you have any suggestion, please let me know.

Your feedback and contributions are welcome to help improve this package!