Flip a Ui.Image in Dart

user_13856881 0
Viewed 422

I am building a app that uses a canvas to render images. To do so, I need to load them using a Ui.Image object. Is there anyway to horizontally flip the image when I load the image? Maybe by reversing the byte array or something?

Here is my Function for loading images:

static Future<ui.Image> loadImage(String imagePath) async {
    ByteData bd = await rootBundle.load(imagePath);

    final Uint8List bytes = Uint8List.view(bd.buffer);

    final ui.Codec codec = await ui.instantiateImageCodec(bytes);

    final ui.Image image = (await codec.getNextFrame()).image;

    return image;
  }

I've heard that there's a way to horizontally flip an image using canvas, but it's an expensive operation and efficency in redrawing the canvas is important to my project. Is there any way to flip the image while it's being loaded?

dart flutter flip canvas image
2 Answers

Try this please

Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(math.pi),
child: Image.asset('image path.png'),
)
user_171690370

you can draw your image with paintImage() function which can be used inside flutter canvas, which make it easier to do anything image.

paintImage(
    canvas: canvas,
    rect: _rect,
    image: _img,
    flipHorizontally: true,
);

Where the parameter _rect describe the position and size where the image will be drawn.

user_85750300
Related