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":[]}

user_19741435 · Answer

We've struggled with this a while back as well, thus I hope our findings can help you too.

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 to be selected too by using '**' for the layer name.

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.

user_18055075 · Answer

Value and ValueCallback get called every time the animation is rendered.

So there are no values to obtain. You have to define the changes you want to effect, such as changing the colour. But keep in mind that you can only use one of them, using both results in an exception being thrown.

The value for keyPath can be obtained from your Lottie JSON file. The keyPath is the nm value for each of the image's layers.

So referring to your JSON file. At the very top level of each layer, there are three keyPath values you can use:

wave_2_outlines
wave_1_outlines
speaker Outlines

I use this VS Code JSON extension to analyse my files, making it much easier to find the values.

{
   "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",
         ...
      },
      {
         "ddd":0,
         "ind":2,
         "ty":4,
         "nm":"wave_1 Outlines",
         ...
      },
      {
         "ddd":0,
         "ind":5,
         "ty":4,
         "nm":"speaker Outlines",
         ....
      }
   ]...
}

user_10244998 · Answer

Didn't find how to change color using ValueDelegate.color So i used ValueDelegate.colorFilter instead:

delegates: LottieDelegates(
   values: [
      ValueDelegate.colorFilter(
         ['wave_2 Outlines', '**'],
         value: ColorFilter.mode(Colors.blue, BlendMode.src),
      ),
   ],
),

If you find a way using ValueDelegate.color, please post it here. Thankyou.

user_16048393 · Answer

I use ColorFiltered for some cases.

 ColorFiltered(
                      colorFilter: const ColorFilter.mode(
                        Colors.red,
                        BlendMode.modulate,
                      ),
                      child: Lottie.asset(
                        "assets/lottie/delete.json",
                        controller: _animationControllerDelete,

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

4 Answers