canvas - Either drawImage or paintImage doesn't work properly in Flutter

Question

I basically want to show an image that I have in the assets folder onto the canvas.

    import 'package:flutter/material.dart' as ui;

    ...

    ui.Image img = ui.Image.asset("images/some_image.png");
    ui.paintImage(canvas: canvas, image: img);

And have got the following error message when I tried to assign img to paintImage's image.

The argument type 'Image (C:ABCflutterpackagesflutterlibsrcwidgetsimage.dart)' can't be assigned to the parameter type 'Image (C:ABCflutterincachepkgsky_enginelibuipainting.dart)'.

I don't really know what could go wrong, I have seen other codes that had a similar approach with ui.Image.

Please advise.

Answer 1

There are two classes called Image in flutter, in different packages.

There's the Widget, which behaves like a widget and can be instantiated from an asset, from memory or from the network through its named constructors.

There's also the ui package Image which is used when painting at a lower level, for example in a CustomPainter. Since this version is in the ui package it's normally imported with the ui prefix like this:

import 'dart:ui' as ui;

Don't import material as ui! That will lead to a lot of confusion.

To make a widget, use the Image.asset constructor, passing the asset name.

To make a ui.Image from an asset use this snippet:

  Future<ui.Image> load(String asset) async {
    ByteData data = await rootBundle.load(asset);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }