Flutter Lottie: Change Stroke and Content Color

Question

I am having trouble changing color of a lottie animation stroke and elements inside other elements.

I am using this flutter package to implement Lottie: https://pub.dev/packages/lottie

Lottie File: https://lottie.host/f948b752-c810-49e7-80b0-9897f992f48f/ILKE0jRVvc.json

Public Link: https://lottiefiles.com/118721-3d-box

The shade element is a stroke for which I am not able to change color.

After effects file: https://bafybeieytnbxl4rqy2obamn4urezwsdnldq7btv5gkoxg6cr7gfoxcztuu.ipfs.dweb.link/1378-3-d-flat.aep

I am use following code since this keypath works for everything else:

LottieBuilder.network(
        'https://lottie.host/f948b752-c810-49e7-80b0-9897f992f48f/ILKE0jRVvc.json',
        delegates:   LottieDelegates(
          values: [
           ValueDelegate.color(
          ['3d_box', '**'],
          value: Colors.red
        ),
          ],
        ),
      ),

What keypath should I use for strokes? Also What should I use for contents of an element like: box, which is content of 3d_box (check file for reference)

Answer 1

The ValueDelegate.color goes through the Lottie file in hierarchical order and selects the colors to change as specified in the keyPath list. This order is labeled in the code below as layer, group and shape name for better understanding.

For example, if you wish to select all the groups with name 3d_box, all the layers should also be selected by using '**' for the layer name in the key path.

delegates: LottieDelegates(
  values: [
    ValueDelegate.color(
      // keyPath order: ['layer name', 'group name', 'shape name']
      const ['**', '3d_box', '**'],
      value: Colors.red,
    ),
  ],
),

This approach also works to color several groups at once, provided they have the same group name in the Lottie file.