Flutter flame loading parallax image data through network

Question

I am trying add a dynamic image for my parallax layer in the flutter flame, however I am stuck on converting the ParallaxImage to ParallaxImageData which will be used later in the loading of ParallaxLayer. Is there anyway to achieve this or I am actually on the wrong direction?

the var image are loaded through the suggestion of this post. which uses the Image class from dart:ui package.

I am also tried to achieve the similar by Sprite(image).image to get the flame/src/sprite Image class, without any luck.

Appreciate for your kind assistance!

Answer 1

The ParallaxImage is a ParallaxRenderer, which is what the ParallaxLayer takes in its default constructor. You can then pass in the layer to the Parallax, that you then pass to the ParallaxComponent.

In the ParallaxImage you can also set how it should repeat, its alignment and how it should fill the size that the parallax operating on (default is the full screen).

This API grew into this organically to be able to support many different types of parallaxes, we are going to refactor it in the future since this isn't very user friendly.

You can do this, without having to extend the ParallaxComponent:

Future<void> onLoad() async {
  ...
  final parallaxImage = ParallaxImage(image);
  final parallax = Parallax([ParallaxLayer(parallaxImage))];
  final component = ParallaxComponent(
    parallax,
    baseVelocity = Vector2(100, 0),
  );
  add(component);
}