Flutter-如何在画布上从相机/画廊绘制图像？

Question

I am learning flutter and came across with drawing image from gallery/camera on canvas using CustomPainter. My code is drawing image , but for some reason it is just showing a small part of whole image(not the complete picture) on the screen.

_loadAssetAsImage is being called in initState() function where key is the actual path of the image.

void _loadImage( String key ) async {
var data = await rootBundle.load( key );
var codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
codec.getNextFrame().then((info){
  setState(() {
    isImageloaded = true;
    image = info.image;
  });
});
  }

Once setState is called, than _buildImage() get called which is in the build() function

Widget _buildImage() {
if (this.isImageloaded) {
  return new CustomPaint(
      painter: new ImageEditor(image: image),
  );
} else {
  return new Center(child: new Text('loading'));
}
  }

Here ImageEditor is the custom class extending CustomPainter

class ImageEditor extends CustomPainter {
  ui.Image image;
  ImageEditor({this.image});

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image, new Offset(0.0, 0.0),new Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Everything looks right to me in here, but not able to understand why only a very small part of Image gets shown on the whole screen instead of full picture. Please help me if anyone has a good suggestion on whats missing in the code.

This is what I expected

This is what I am getting

Answer 1

The reason why the canvas only displays a small portion of the image is because the image that's being displayed wasn't scaled down to fit on the widget. What you can do here is scale the image size when painted on the canvas.

class ImageEditor extends CustomPainter {

  ...

  @override
  void paint(Canvas canvas, Size size) {
    paintImage(
        canvas: canvas,
        rect: Rect.fromLTWH(0.0, 0.0, scaledWidth, scaledHeight),
        image: image,
        fit: BoxFit.fitWidth);
  }
}