Question 79416 in Flutter Question posted in
The official Flutter documentation can be found here.

How to update assets image value for a Lottie json file in flutter

I have a Lottie json file which i am using in the project. I am able to render the Lottie animation successfully. My question is i want to update the asset from the json file in order to update the icon on Lottie animation.

I have tried below but it doesnt work. It shows Lottie animation with the default value and after that its shows blank.

Lottie file

    {
  "v": "4.8.0",
  "meta": {
    "g": "LottieFiles AE 3.1.1",
    "a": "",
    "k": "",
    "d": "",
    "tc": ""
  },
  "fr": 30,
  "ip": 0,
  "op": 300,
  "w": 400,
  "h": 400,
  "nm": "Comp 2",
  "ddd": 1,
  "assets": [
    {
      "id": "image_0",
      "w": 32,
      "h": 32,
      "u": "",
      "p": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAABAAAAAQBPJcTWAAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAADdUlEQVRYhc2XzWsbRxjGfzO7lTCx15ccShVBfUvIQerF1L44l8TQkw1tc6xS7JOJiZN723/AaXDoqaEVPRlhsE+FHgIWBpvqUuvg6NiCvKFQXSS1CK13d3rY9Uqrr518QZ7T7ny87/POO/O8MwJN/PtDJm/4agXELVBLo0eJMqhDT4qD6Q37VMeuSBrQ2ckUlFAPBOR0yQIoqAolnkxt2sXXItD5/sOPMY3i+Gh1Icq4XmFq6++/tAn89/SjFQlFYPbNnEdo+lC4cv/lwWCHHGzo7GQKEvbfonOAWQn7nZ1MYbAjtgJh5Pu6Vs3cOqpdx7ePUd2W1hwfVvtXIiIQ5Fyeohm5SFuk12sAdH/5FDO3BoBXK+E3ziZNbeL6+cs90UuBaRQnORdpC3P+ETKzAIDMLAKg2ueoVh3jxl2M3BqkrSTus6GvwC0EeU/a7TKziDn/EHgIThvVbQYEWvWAVGoGAN8+SSIAqKXOTqYwtWkXJYAS6oHGLFTjRfCRmkHMXAuJLZBa3Yv6hZXVMRX5FKHC/aE1C0it7kVpGAev+gy3sp24MT0pPpGBvOpDtc97P04bZ/cO7tF3sXYjt8YHn/2UaMvw1YoMtF0f/dH79jF+4wy3+iPO7u1eisJx8urNBGvilnwVqRVWNso9gH/e23Cq28K3j+MTEk+EWjJ1nQNDuZfXFjCcJqpVR1hZjBt34+Yn6wEQHkN9Aovx/7ll5NzyyLFu5bGWOg7VgskEeiugGi/wqs9ieb+E/+dvuJVtPZu6zgfz79VKXBx9S3f3Ns7+5/ENOLeMOf/o7RAQVjbI7/UvY+39G863T3B+/TpuOEErLmGG16ixJyG1uheLHACnPVRwhsZoQZRNUIfASALy6s3RhlMzpL/6HdU4w//nDJG2hk9Av2CNhTpMlGJhZQNRySxiXP9Cw2gAZ/dOUlkOpHh6wz5VUB3LsVXHq5Vwj76J2tzK4/EROm0unm8lOldQnd6wT00AocQThPp50oT++u9WtjHz6wBcPN9CterROL1yHPokFKKpTbvYeZpwJwhl1bdPAo0P679XK2k5HHBfvryu95TQ9QqTrmRerYRXK0X1XjfSEWjieoWISn/Pq15KXweDl9KYEF25//IAJe69M+9K3Bt8G7x/DxMIV8L184FKvilEGdfPj3IO7/PjdBDv6nn+P/q8gqi9Sz0EAAAAAElFTkSuQmCC",
      "e": 1
    }
  ],
  "layers": [
    {
      "ddd": 1,
      "ind": 1,
      "ty": 2,
      "nm": "Layer 1",
      "refId": "image_0",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "rx": {
          "a": 0,
          "k": 0,
          "ix": 8
        },
        "ry": {
          "a": 0,
          "k": 0,
          "ix": 9
        },
        "rz": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "or": {
          "a": 0,
          "k": [
            0,
            0,
            0
          ],
          "ix": 7
        },
        "p": {
          "a": 1,
          "k": [
            {
              "i": {
                "x": 0.833,
                "y": 0.833
              },
              "o": {
                "x": 0.167,
                "y": 0.167
              },
              "t": 0,
              "s": [
                65,
                217,
                0
              ],
              "to": [
                41.667,
                0,
                0
              ],
              "ti": [
                -41.667,
                0,
                0
              ]
            },
            {
              "t": 96,
              "s": [
                315,
                217,
                0
              ]
            }
          ],
          "ix": 2
        },
        "a": {
          "a": 0,
          "k": [
            16,
            16,
            0
          ],
          "ix": 1
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100,
            100
          ],
          "ix": 6
        }
      },
      "ao": 0,
      "ip": 0,
      "op": 300,
      "st": 0,
      "bm": 0
    }
  ],
  "markers": []
}

This is how i am trying to change the asset from code.

class LottieSample extends StatelessWidget {
  LottieSample({Key? key}) : super(key: key);

  LottieImageAsset updatedAsset = LottieImageAsset(
      width: 32,
      height: 32,
      id: 'image_0',
      fileName:
          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANsAAADmCAMAAABruQABAAAAhFBMVEUAAAD39/f////7+/vb29v19fX29vbk5OTIyMjg',
      dirName: '');

  @override
  Widget build(BuildContext context) {
    var asset2 = Lottie.asset(
        'assets/lottie/revolve.json',
        delegates: LottieDelegates(
          image: (LottieComposition composition, LottieImageAsset asset) {
            if (asset.id == 'image_0') {
              asset = updatedAsset;
            }
            if (composition.images.containsKey('image_0')) {
              print(composition.images['image_0']?.dirName);
              print(composition.images['image_0']?.loadedImage);
              print(composition.images['image_0']?.fileName);
              composition.images.update(
                'image_0',
                (value) => updatedAsset);
            }
          },
        ),
      );
    return Container(
      color: Colors.white,
      child: asset2,
    );
  }
}
Tags:

2

Answers


  1. 0

    referring to the comments:

    Write to a file

    Future<String> getFilePath() async {
    Directory appDocumentsDirectory = await getApplicationDocumentsDirectory(); // 1
    String appDocumentsPath = appDocumentsDirectory.path; // 2
    String filePath = '$appDocumentsPath/demoTextFile.txt'; // 3

    return filePath;
}
  
void saveFile() async {
    File file = File(await getFilePath()); // 1
    file.writeAsString("This is my demo text that will be saved to : demoTextFile.txt"); // 2
}

    So you fetch the Lottie file once on the initial start-up of the app on that device and store it locally. Now you can update it any time you like by replacing the file.

    Login or Signup to reply.
  2. 0 
    image: (LottieComposition composition, LottieImageAsset asset) {
  return ui.Image image;  //(need to return ui.Image)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search