Changing image dynamically about lottie-flutter

[xvrh]

Oh I see.
My answer doesn't work for this use case. The imageProviderFactory is, indeed, just for the initial loading.

What you can do is to change the ui.Image in the LottieComposition.images[].loadedImage:

composition.images['img_0'].loadedImage = yourNewImage;

Maybe I could add a "callback" so in the future we can write something like:

Lottie.asset(
  'assets/data.json',
  delegates: LottieDelegates(
    image: (composition, image) {
      if (image.id == 'img_0') {
        return myCustomImage;
      }
      
      // Will use the default method: composition.images[image.id].loadedImage;
      return null;
    },
  )
),

[xvrh]

I think this is already supported.
Most of the constructors have an imageProviderFactory parameter that allow to customise how to load the images.

Lottie.asset(
  'assets/example/data.json',
  imageProviderFactory: (image) {
    if (image.fileName == 'img_0') {
      return AssetImage('assets/image.png');
    } else if (image.fileName == 'img_1') {
      return NetworkImage('http://some_url/img.png');
    } else {
      // Fallback to the default image loading strategy
      return null;
    }
  },
),

[appycamper]

Thanks, I'm trying to change the images based on some user input but noticed that doing something like:

...
imageProviderFactory: (image) {
  if (image.fileName == 'img_0.png') {
    return AssetImage('assets/animations/example/images/$_image');
  } else {
    return null;
  }

Then later on:

setState(() {
   _image = 'img_6.png';
});

does not work, probably because the animation is cached. Is there a way to invalidate the cache or am I missing something?

Many thanks

[appycamper]

Thanks works like a charm! Just wondering how you would go about saving or caching the composition so that I wouldn't have to redo the image replacements every time the animation is loaded?

[xvrh]

how you would go about saving or caching the composition so that I wouldn't have to redo the image replacements every time the animation is loaded?

I'm not sure I understand this correctly. Do you have an example?

Once you have a LottieComposition, you can cache it and use it as many time as you want with the Lottie(composition:) constructor.

LottieComposition represents the loaded json and the Lottie widget is the player that displayed it on the screen.

[appycamper]

Thanks, so after making changes to the loaded images:

composition.images['img_0'].loadedImage = yourNewImage;

would it be possible to serialise the composition and save it as a new json file?

[xvrh]

It is not possible to serialise a LottieComposition.

What you can do instead, is to use the standard dart json converter to read the file, modify it and write it back.
Something like that:

void _modifyImage() async {
  var data = await rootBundle.loadString('assets/data.json');
  var lottie = jsonDecode(data) as Map<String, dynamic>;
  
  for (var asset in lottie['assets']) {
    var assetMap = asset as Map<String, dynamic>;
    if (assetMap['id'] == 'image_0') {
      // You can also write the image encoded in base64 with "data:image/png;base64,..."
      assetMap['p'] = 'other_image.png';
    }
  }
  
  var modifiedLottie = jsonEncode(lottie);
  
  // Save it to a file at a place where you have write access
  File('xxx').writeAsStringSync(modifiedLottie);
}

[leonardocustodio]

think this is already supported.
Most of the constructors have an imageProviderFactory parameter that allow to customise how to load the images.

Lottie.asset(
  'assets/example/data.json',
  imageProviderFactory: (image) {
    if (image.fileName == 'img_0') {
      return AssetImage('assets/image.png');
    } else if (image.fileName == 'img_1') {
      return NetworkImage('http://some_url/img.png');
    } else {
      // Fallback to the default image loading strategy
      return null;
    }
  },
),

This doesn't work. I also tried using the imageProviderFactory as followed and it does not work:

Lottie.asset(
                  'lib/lottie/spinning_carrousel.zip',
                  height: 256.0,
                  fit: BoxFit.cover,
                  // controller: _controller,
                  imageProviderFactory: (image) {
                    print('Image file name: ${image.fileName}');
                    if (image.fileName == 'img_1.png') {
                      return AssetImage('lib/images/couple_pack.png');
                    } else {
                      return null;
                    }
                  },

It doesn't even print the statement.

My animation is composed of a data.json with two images inside. I want to change the image to another one that is in the app. Basically it is like a roulette and it sorts an image to show up.

PS.: I don't need to change during the animation. I was trying just one time on load so the factory was supposed to work but looks like it doesn't even run.

Regards,

[xvrh]

@leonardocustodio can you share the spinning_carrousel.zip file so we can have a look?

If your images are embedded in the json file with data:base64, then imageProviderFactory doesn't work. Maybe we can change that.

[leonardocustodio]

Here is the file:
spinning_carrousel.zip

Thanks,

[xvrh]

@leonardocustodio
I fixed a few things in this pull request: #130

• Add the image callback in the LottieDelegates class
• Fix imageProviderFactory to work with a zip file.

This change has landed in the master branch which require a dart sdk >=2.12 (flutter beta). And I published v0.8.0-nullsafety.3

[sinshev]

@xvrh could you please add the image callback usage to examples? Is it possible to change the image for the specific frame?