title: Flutter - How to draw an Image on Canvas using DrawImage method
body: <p>I'm trying to draw an image file into the canvas to compose my widget in Flutter. </p>
  
  <p>I did follow <a href="https://docs.flutter.io/flutter/dart-ui/Canvas/drawImage.html" rel="noreferrer">canvas documentation</a> but a did not success. O <a href="https://docs.flutter.io/flutter/dart-ui/Image-class.html" rel="noreferrer">Image docs</a>, thay say that:</p>
  
  <blockquote>
    <p>To obtain an Image object, use instantiateImageCodec.</p>
  </blockquote>
  
  <p>I did try use <code>instantiateImageCodec</code> method, but i just get a <code>Codec</code> instance, not a <a href="https://docs.flutter.io/flutter/dart-ui/Image-class.html" rel="noreferrer">Image</a></p>
  
  <p>How is the right way to get an instance of ui.Image to draw on canvas using <code>canvas.drawImage</code></p>
  
  <p>Here is a snnipet of my code:</p>
  
  <pre><code>Future&lt;ui.Codec&gt; _loadImage(AssetBundleImageKey key) async {
    final ByteData data = await key.bundle.load(key.name);
     if (data == null)
    throw 'Unable to read data';
     return await ui.instantiateImageCodec(data.buffer.asUint8List());
  }
  
  final Paint paint = new Paint()
    ..color = Colors.yellow
    ..strokeWidth = 2.0
    ..strokeCap = StrokeCap.butt
    ..style = PaintingStyle.stroke;
  
  var sunImage = new ExactAssetImage("res/images/grid_icon.png");
  
  sunImage.obtainKey(new ImageConfiguration()).then((AssetBundleImageKey key){
    _loadImage(key).then((ui.Codec codec){
      print("frameCount: ${codec.frameCount.toString()}");
      codec.getNextFrame().then((info){
        print("image: ${info.image.toString()}");
        print("duration: ${info.duration.toString()}");
        canvas.drawImage(info.image, size.center(Offset.zero), paint);
      });
    });
  });
  </code></pre>