Lottie JSON saved to database not working when write to JSON file

[EUGinsane]

Hi, this is a great plugin for flutter, really appreciate your effort!

But I'm currently facing a problem when using a manually-parsed JSON file that saved from my database and it does not work, just show a blank widget without any errors.

Here is the detail flow:

1. Copy the content of any working Lottie JSON file into the database (MySQL), this field is json type.
2. Fetch the JSON data to the client, write it as string into a .json file
3. Use File to locate the parsed .json file
4. use Lottie.file(jsonFile) to render the animation. => this show blank without any errors

I think this is a bug, because when I put that jsonFile I just parsed to https://lottiefiles.com/ and it working fine.

Also I'm using this version: lottie: ^0.7.0+1

Thanks

[EUGinsane]

Another thing, I also test with https://pub.dev/packages/mark922_flutter_lottie and it working fine with my parsed JSON file, the only problem with this library is that it cannot read file that saved to the system. :( Only file in assets

[xvrh]

Hi, can you share a full example reproducing the problem? Thanks

[EUGinsane]

So here is the JSON that I parsed from the database, please copy and save it as JSON file, move this into your asset and use Lottie.asset() to view the result, it should be blank without any errors. Then try to upload that json file to https://lottiefiles.com/preview, and you can see it is a valid Lottie JSON file because it will show a bell animation. Thanks.

JSON that has problem

{"h": 512, "v": "5.5.9", "w": 512, "fr": 30, "ip": 0, "nm": "Bell", "op": 60, "ddd": 0, "assets": [], "layers": [{"ao": 0, "bm": 0, "ip": 13, "ks": {"a": {"a": 0, "k": [0, 0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 11}, "p": {"a": 0, "k": [306.988, 153.96, 0], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 10}, "s": {"a": 0, "k": [100, 100, 100], "ix": 6}}, "nm": "Red_Dot", "op": 63, "sr": 1, "st": 13, "ty": 4, "ddd": 0, "ind": 1, "shapes": [{"bm": 0, "hd": false, "it": [{"d": 1, "p": {"a": 0, "k": [0, 0], "ix": 3}, "s": {"a": 1, "k": [{"i": {"x": [0.667, 0.667], "y": [1, 1]}, "o": {"x": [0.333, 0.333], "y": [0, 0]}, "s": [0, 0], "t": 13}, {"s": [35, 35], "t": 18}], "ix": 2}, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "ty": "el"}, {"c": {"a": 0, "k": [1, 1, 1, 1], "ix": 3}, "o": {"a": 0, "k": 100, "ix": 4}, "w": {"a": 0, "k": 6, "ix": 5}, "bm": 0, "hd": false, "lc": 1, "lj": 1, "ml": 4, "mn": "ADBE Vector Graphic - Stroke", "nm": "Stroke 1", "ty": "st"}, {"c": {"a": 0, "k": [1, 0.219607828178, 0.219607828178, 1], "ix": 4}, "o": {"a": 0, "k": 100, "ix": 5}, "r": 1, "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "ty": "fl"}, {"a": {"a": 0, "k": [0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 7}, "p": {"a": 0, "k": [0, 0], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 6}, "s": {"a": 0, "k": [100, 100], "ix": 3}, "nm": "Transform", "sa": {"a": 0, "k": 0, "ix": 5}, "sk": {"a": 0, "k": 0, "ix": 4}, "ty": "tr"}], "ix": 1, "mn": "ADBE Vector Group", "nm": "Ellipse", "np": 3, "ty": "gr", "cix": 2}]}, {"ao": 0, "bm": 0, "ip": 0, "ks": {"a": {"a": 0, "k": [0, -60, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 11}, "p": {"a": 0, "k": [0, 32, 0], "ix": 2}, "r": {"a": 1, "k": [{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [0], "t": 3}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [30], "t": 8}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [-30], "t": 13}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [15], "t": 20}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [-15], "t": 28}, {"s": [0], "t": 37}], "ix": 10}, "s": {"a": 0, "k": [80, 80, 100], "ix": 6}}, "nm": "Tongue", "op": 60, "sr": 1, "st": 0, "ty": 4, "ddd": 0, "ind": 2, "parent": 3, "shapes": [{"bm": 0, "hd": false, "it": [{"hd": false, "ix": 1, "ks": {"a": 0, "k": {"c": true, "i": [[-13.807, 0], [0, -13.807], [13.807, 0], [0, 13.807]], "o": [[13.807, 0], [0, 13.807], [-13.807, 0], [0, -13.807]], "v": [[0, -25], [25, 0], [0, 25], [-25, 0]]}, "ix": 2}, "mn": "ADBE Vector Shape - Group", "nm": "Path 1", "ty": "sh", "ind": 0}, {"c": {"a": 0, "k": [0.933333333333, 0.658823529412, 0, 1], "ix": 4}, "o": {"a": 0, "k": 100, "ix": 5}, "r": 1, "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "ty": "fl"}, {"a": {"a": 0, "k": [0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 7}, "p": {"a": 0, "k": [0, 2.25], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 6}, "s": {"a": 0, "k": [100, 100], "ix": 3}, "nm": "Transform", "sa": {"a": 0, "k": 0, "ix": 5}, "sk": {"a": 0, "k": 0, "ix": 4}, "ty": "tr"}], "ix": 1, "mn": "ADBE Vector Group", "nm": "Ellipse", "np": 2, "ty": "gr", "cix": 2}, {"bm": 0, "hd": false, "it": [{"hd": false, "ix": 1, "ks": {"a": 1, "k": [{"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [{"c": true, "i": [[0, 0], [0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0], [0, 0]], "v": [[11.531, -7.305], [11.5, 30], [-11.5, 30], [-11.469, -7.305]]}], "t": 3}, {"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [{"c": true, "i": [[0, 0], [0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0], [0, 0]], "v": [[11.018, -11.142], [11.5, 30], [-11.5, 30], [-10.476, 1.814]]}], "t": 8}, {"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [{"c": true, "i": [[0, 0], [0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0], [0, 0]], "v": [[10.547, 1.572], [11.5, 30], [-11.5, 30], [-11.259, -11.416]]}], "t": 13}, {"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [{"c": true, "i": [[0, 0], [0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0], [0, 0]], "v": [[11.334, -10.316], [11.5, 30], [-11.5, 30], [-11.347, -4.086]]}], "t": 20}, {"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [{"c": true, "i": [[0, 0], [0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0], [0, 0]], "v": [[11.579, -4.265], [11.5, 30], [-11.5, 30], [-11.772, -10.722]]}], "t": 28}, {"s": [{"c": true, "i": [[0, 0], [0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0], [0, 0]], "v": [[11.531, -7.305], [11.5, 30], [-11.5, 30], [-11.469, -7.305]]}], "t": 37}], "ix": 2}, "mn": "ADBE Vector Shape - Group", "nm": "Path 1", "ty": "sh", "ind": 0}, {"c": {"a": 0, "k": [0.882352941176, 0.537254901961, 0, 1], "ix": 4}, "o": {"a": 0, "k": 100, "ix": 5}, "r": 1, "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "ty": "fl"}, {"a": {"a": 0, "k": [0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 7}, "p": {"a": 0, "k": [0, -30], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 6}, "s": {"a": 0, "k": [100, 100], "ix": 3}, "nm": "Transform", "sa": {"a": 0, "k": 0, "ix": 5}, "sk": {"a": 0, "k": 0, "ix": 4}, "ty": "tr"}], "ix": 2, "mn": "ADBE Vector Group", "nm": "Rectangle", "np": 2, "ty": "gr", "cix": 2}]}, {"ao": 0, "bm": 0, "ip": 0, "ks": {"a": {"a": 0, "k": [1.874, -119.5, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 11}, "p": {"a": 1, "k": [{"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [257.874, 136.5, 0], "t": 2, "ti": [0, 0, 0], "to": [0, -1.667, 0]}, {"i": {"x": 0.667, "y": 1}, "o": {"x": 0.333, "y": 0}, "s": [257.874, 126.5, 0], "t": 7, "ti": [0, -1.667, 0], "to": [0, 0, 0]}, {"s": [257.874, 136.5, 0], "t": 12}], "ix": 2}, "r": {"a": 1, "k": [{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [0], "t": 0}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [20], "t": 5}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [-20], "t": 10}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [10], "t": 17}, {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "s": [-10], "t": 25}, {"s": [0], "t": 34}], "ix": 10}, "s": {"a": 0, "k": [100, 100, 100], "ix": 6}}, "nm": "Main", "op": 60, "sr": 1, "st": 0, "ty": 4, "ddd": 0, "ind": 3, "shapes": [{"bm": 0, "hd": false, "it": [{"d": 1, "p": {"a": 0, "k": [0, 0], "ix": 3}, "s": {"a": 0, "k": [182, 16], "ix": 2}, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "ty": "el"}, {"c": {"a": 0, "k": [0.882352941176, 0.538235294118, 0, 1], "ix": 3}, "o": {"a": 0, "k": 100, "ix": 4}, "w": {"a": 0, "k": 2, "ix": 5}, "bm": 0, "hd": false, "lc": 1, "lj": 1, "ml": 4, "mn": "ADBE Vector Graphic - Stroke", "nm": "Stroke 1", "ty": "st"}, {"c": {"a": 0, "k": [0.737254901961, 0.398985021255, 0, 1], "ix": 4}, "o": {"a": 0, "k": 100, "ix": 5}, "r": 1, "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "ty": "fl"}, {"a": {"a": 0, "k": [0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 7}, "p": {"a": 0, "k": [4.75, 56.75], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 6}, "s": {"a": 0, "k": [102.695, 100], "ix": 3}, "nm": "Transform", "sa": {"a": 0, "k": 0, "ix": 5}, "sk": {"a": 0, "k": 0, "ix": 4}, "ty": "tr"}], "ix": 1, "mn": "ADBE Vector Group", "nm": "Hole", "np": 3, "ty": "gr", "cix": 2}, {"bm": 0, "hd": false, "it": [{"hd": false, "ix": 1, "ks": {"a": 0, "k": {"c": true, "i": [[0, 29], [7, 0], [-9.871, -3.217], [0, 0]], "o": [[-84, 0], [-7, 0], [18, 0], [0, 0]], "v": [[2, -114], [-68, 35], [-89, 58], [2, 57.813]]}, "ix": 2}, "mn": "ADBE Vector Shape - Group", "nm": "Path 1", "ty": "sh", "ind": 0}, {"hd": false, "ix": 2, "ks": {"a": 0, "k": {"c": true, "i": [[0, 29], [-7.356, 0], [10.373, -3.217], [0, 0]], "o": [[89, 0], [7.356, 0], [-18.915, 0], [0, 0]], "v": [[2, -114], [75.56, 35], [97.627, 58], [2, 57.813]]}, "ix": 2}, "mn": "ADBE Vector Shape - Group", "nm": "Path 2", "ty": "sh", "ind": 1}, {"c": {"a": 0, "k": [1, 0.705882293103, 0, 1], "ix": 4}, "o": {"a": 0, "k": 100, "ix": 5}, "r": 1, "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "ty": "fl"}, {"a": {"a": 0, "k": [0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 7}, "p": {"a": 0, "k": [0, 0], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 6}, "s": {"a": 0, "k": [100, 100], "ix": 3}, "nm": "Transform", "sa": {"a": 0, "k": 0, "ix": 5}, "sk": {"a": 0, "k": 0, "ix": 4}, "ty": "tr"}], "ix": 2, "mn": "ADBE Vector Group", "nm": "Main", "np": 3, "ty": "gr", "cix": 2}, {"bm": 0, "hd": false, "it": [{"d": 1, "p": {"a": 0, "k": [0, 0], "ix": 3}, "s": {"a": 0, "k": [24, 24], "ix": 2}, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "ty": "el"}, {"c": {"a": 0, "k": [0.933333337307, 0.658823549747, 0, 1], "ix": 3}, "o": {"a": 0, "k": 100, "ix": 4}, "w": {"a": 0, "k": 7, "ix": 5}, "bm": 0, "hd": false, "lc": 1, "lj": 1, "ml": 4, "mn": "ADBE Vector Graphic - Stroke", "nm": "Stroke 1", "ty": "st"}, {"a": {"a": 0, "k": [0, 0], "ix": 1}, "o": {"a": 0, "k": 100, "ix": 7}, "p": {"a": 0, "k": [1.875, -118.75], "ix": 2}, "r": {"a": 0, "k": 0, "ix": 6}, "s": {"a": 0, "k": [100, 100], "ix": 3}, "nm": "Transform", "sa": {"a": 0, "k": 0, "ix": 5}, "sk": {"a": 0, "k": 0, "ix": 4}, "ty": "tr"}], "ix": 3, "mn": "ADBE Vector Group", "nm": "Ring", "np": 2, "ty": "gr", "cix": 2}]}], "markers": []}

But if you try the following JSON file here, it is the same as above, but it works totally fine with Lottie.asset() :

JSON that works fine

{"v":"5.5.9","fr":30,"ip":0,"op":60,"w":512,"h":512,"nm":"Bell","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Red_Dot","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[306.988,153.96,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":13,"s":[0,0]},{"t":18,"s":[35,35]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.219607828178,0.219607828178,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Ellipse","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":13,"op":63,"st":13,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Tongue","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[30]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":13,"s":[-30]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[-15]},{"t":37,"s":[0]}],"ix":10},"p":{"a":0,"k":[0,32,0],"ix":2},"a":{"a":0,"k":[0,-60,0],"ix":1},"s":{"a":0,"k":[80,80,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-13.807,0],[0,-13.807],[13.807,0],[0,13.807]],"o":[[13.807,0],[0,13.807],[-13.807,0],[0,-13.807]],"v":[[0,-25],[25,0],[0,25],[-25,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.933333333333,0.658823529412,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,2.25],"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":"Ellipse","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":3,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11.531,-7.305],[11.5,30],[-11.5,30],[-11.469,-7.305]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11.018,-11.142],[11.5,30],[-11.5,30],[-10.476,1.814]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":13,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[10.547,1.572],[11.5,30],[-11.5,30],[-11.259,-11.416]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":20,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11.334,-10.316],[11.5,30],[-11.5,30],[-11.347,-4.086]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11.579,-4.265],[11.5,30],[-11.5,30],[-11.772,-10.722]],"c":true}]},{"t":37,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[11.531,-7.305],[11.5,30],[-11.5,30],[-11.469,-7.305]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.882352941176,0.537254901961,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,-30],"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":"Rectangle","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Main","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[-20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":25,"s":[-10]},{"t":34,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":2,"s":[257.874,136.5,0],"to":[0,-1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[257.874,126.5,0],"to":[0,0,0],"ti":[0,-1.667,0]},{"t":12,"s":[257.874,136.5,0]}],"ix":2},"a":{"a":0,"k":[1.874,-119.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[182,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.882352941176,0.538235294118,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.737254901961,0.398985021255,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[4.75,56.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[102.695,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":"Hole","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,29],[7,0],[-9.871,-3.217],[0,0]],"o":[[-84,0],[-7,0],[18,0],[0,0]],"v":[[2,-114],[-68,35],[-89,58],[2,57.813]],"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,29],[-7.356,0],[10.373,-3.217],[0,0]],"o":[[89,0],[7.356,0],[-18.915,0],[0,0]],"v":[[2,-114],[75.56,35],[97.627,58],[2,57.813]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.705882293103,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"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":"Main","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[24,24],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.933333337307,0.658823549747,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.875,-118.75],"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":"Ring","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}

[EUGinsane]

I updated the current Lottie version of Flutter

[xvrh]

Thanks for the reproduction. Can you review the differences between the 2 versions and try to isolate what make it break? ie. is this something when the json properties have a different order?

[EUGinsane]

Yes, props of these two are not in the same order, but everything else, including value, is identical, I did the comparison. But it's JSON right? Who cares about the order of props :(

[xvrh]

But it's JSON right? Who cares about the order of props :(

It seems the parser do care about the order of the properties. Here: https://github.com/xvrh/lottie-flutter/blob/master/lib/src/parser/content_model_parser.dart#L24 the parser expect to find the type (ty) of the shape as the first property of the object. And depending on the type, will delegate the rest of the parsing to a sub parser.

Lottie uses a json parser with a "pull" strategy to optimise the memory consumption

[EUGinsane]

Thanks @xvrh for the confirmation, that should explain everything. So do we plan for fixing this? Because right now I'm storing the JSON in MySQL and it will re-oder the props as said in MySQL official page (https://dev.mysql.com/doc/refman/5.7/en/json.html#json-comparison):

To make lookups more efficient, it also sorts the keys of a JSON object. You should be aware that the result of this ordering is subject to change and not guaranteed to be consistent across releases.

Or to resolve this temporarily, I just need to store this as text for now.

[xvrh]

This is not easily fixable. And I think Lottie-Android has the same problem too.

I think you should definitely store your lottie file as text or binary.

[EUGinsane]

Thanks for your time @xvrh, I will do that for now, again great plugin, keep up the good work!

[golottie-theo]

Hi @xvrh! I want to highlight that this is quite an important issue, because most of the tooling out there which parses JSON is adhering to JSON spec and thus doesn't guarantee ordering in objects. This means that in very many cases, processing LottieFiles meant to be consumed by this library is not possible. This is certainly the case in the Go ecosystem, as far as I can tell.

If you would have the time and motivation to address this issue in the future, it would be greatly appreciated!