How to change the properties of a lottie animation using the lottie for flutter package?

Question

I am unable to change the properties of a lottie animation I have set up in flutter. (I specifically wish to change the color.)

Based on the package README I understand I can use a ValueDelegate class to do this.

README

//From the README

    return Lottie.asset(
      'assets/Tests/Shapes.json',
      delegates: LottieDelegates(
        text: (initialText) => '**$initialText**',
        values: [
          ValueDelegate.color(
            const ['Shape Layer 1', 'Rectangle', 'Fill 1'],'
// UNSURE WHERE TO OBTAIN THESE ABOVE PROPERTY VALUES //
            value: Colors.red,
          ),
         

\\here is my code - I am unsure how to obtain the appropriate values for keyPath, value and callBack properties, in the ValueDelegate.color.

                  child: Lottie.asset(
                    'assets/lottie/audio.json',
                    delegates: LottieDelegates(
                      text: (initialText) => '**$initialText**',
                      values: [
                        ValueDelegate.color(
                          const ['Path 1','ADBE Vector Shape - Group','Fill 1'],
                          value: Colors.blue,
                        ),
                      ],
                    ),
                  ),

~~~


This is the JSON file of the lottie animation I am currently working with....

{"v":"5.1.18","fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":20,"h":20,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"wave_2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.916},"o":{"x":0.167,"y":0.085},"n":"0p833_0p916_0p167_0p085","t":0,"s":[18.118,9.963,0],"e":[16.868,9.963,0],"to":[-0.20833332836628,0,0],"ti":[0.20833332836628,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":8,"s":[16.868,9.963,0],"e":[16.868,9.963,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.623,"y":1},"o":{"x":0.194,"y":0.147},"n":"0p623_1_0p194_0p147","t":13,"s":[16.868,9.963,0],"e":[18.118,9.963,0],"to":[0.20833332836628,0,0],"ti":[-0.20833332836628,0,0]},{"t":25.0000010182709}],"ix":2},"a":{"a":0,"k":[2.827,7.401,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.192,0],[0.146,0.147],[-0.293,0.293],[3.217,3.217],[-0.293,0.293],[-0.293,-0.293],[3.801,-3.801]],"o":[[-0.192,0],[-0.293,-0.293],[3.217,-3.217],[-0.293,-0.293],[0.293,-0.293],[3.801,3.802],[-0.146,0.147]],"v":[[-1.406,7.151],[-1.936,6.931],[-1.936,5.871],[-1.936,-5.797],[-1.936,-6.858],[-0.876,-6.858],[-0.876,6.931]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0.6,0.647000002394,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.479,7.401],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"wave_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.89},"o":{"x":0.333,"y":0.23},"n":"0p833_0p89_0p333_0p23","t":4,"s":[14.063,9.959,0],"e":[13.125,9.959,0],"to":[-0.15625,0,0],"ti":[0.15625,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":13,"s":[13.125,9.959,0],"e":[13.125,9.959,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.711,"y":0.995},"o":{"x":0.102,"y":0.082},"n":"0p711_0p995_0p102_0p082","t":19,"s":[13.125,9.959,0],"e":[14.063,9.959,0],"to":[0.15625,0,0],"ti":[-0.15625,0,0]},{"t":30.0000012219251}],"ix":2},"a":{"a":0,"k":[1.95,4.218,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.192,0],[0.146,0.147],[-0.293,0.293],[1.462,1.462],[-0.293,0.293],[-0.293,-0.292],[2.046,-2.048]],"o":[[-0.191,0],[-0.293,-0.292],[1.462,-1.462],[-0.293,-0.293],[0.293,-0.292],[2.046,2.047],[-0.146,0.147]],"v":[[-0.876,3.969],[-1.406,3.749],[-1.406,2.689],[-1.406,-2.615],[-1.406,-3.676],[-0.346,-3.676],[-0.346,3.749]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0.6,0.647000002394,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.95,4.218],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"speaker Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[5.049,9.975,0],"ix":2},"a":{"a":0,"k":[5.051,7.326,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-0.132,-0.106],[0,0],[0,0],[0,0],[0.17,0],[0,0]],"o":[[0,0],[0.17,0],[0,0],[0,0],[0,0],[-0.132,0.106],[0,0],[0,0]],"v":[[-3.301,1.976],[-0.45,1.976],[0.018,2.14],[3.301,4.765],[3.301,-4.716],[0.018,-2.09],[-0.45,-1.926],[-3.301,-1.926]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0.11,0],[0.136,0.109],[0,0],[0,0],[0,0.414],[0,0],[-0.414,0],[0,0],[0,0],[-0.26,-0.124],[0,-0.289],[0,0],[0.26,-0.124]],"o":[[-0.167,0],[0,0],[0,0],[-0.414,0],[0,0],[0,-0.414],[0,0],[0,0],[0.225,-0.181],[0.26,0.124],[0,0],[0,0.289],[-0.104,0.051]],"v":[[4.051,7.076],[3.582,6.912],[-0.713,3.476],[-4.051,3.476],[-4.801,2.726],[-4.801,-2.676],[-4.051,-3.426],[-0.713,-3.426],[3.582,-6.862],[4.376,-6.952],[4.801,-6.276],[4.801,6.326],[4.376,7.001]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0.6,0.647000002394,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[5.051,7.326],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0}],"markers":[]}

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 example, if you wish to select all the groups with name wave_2 Outlines, 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 ['**', 'wave_2 Outlines', '**'],
      value: Colors.orange,
    ),
  ],
),

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