How to use canvas.drawImage with a image from pubspec.yaml?

[Linton Achmad]

Hi All,

I'm really struggling with the canvas.drawImage. How do I use use an image from my project directory that is added in pubspec.yaml?

[Simon Lightfoot]

You need to load the asset as bytes and decode it as a Image, you can then call canvas.drawImage to render it.

import 'dart:async';

import 'dart:ui' as ui;

import 'package:flutter/services.dart' show rootBundle;

import 'package:flutter/painting.dart' show decodeImageFromList;

// load the image async and then draw with `canvas.drawImage(image, Offset.zero, Paint());`

Future<ui.Image> loadImageAsset(String assetName) async {

  final data = await rootBundle.load(assetName);

  return decodeImageFromList(data.buffer.asUint8List());

}

That should do it.

Simon

[Linton Achmad]

Simon, thanks for your help. I will give this a try and let you know how it goes.

[Linton Achmad]

Wow Simon! Thank you for this. It works well. I tried digging into some docs yesterday and came across image codec:

a) https://api.flutter.dev/flutter/dart-ui/instantiateImageCodec.html

that didn't work well. Keep in touch Simon :)