> For the complete documentation index, see [llms.txt](https://flutter2015.firefirestyle.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutter2015.firefirestyle.net/rendering/doc-3.md).

# draw\_image

<https://github.com/kyorohiro/hello_skyengine/tree/master/draw_image>

![](https://1814295318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M23mFK0BQXfvUtsV5Gz%2F-M23mHdwSyo8rV1dBqZS%2F-M23mNZcDKEYX-hA7mQR%2Fscreen.png?generation=1583849515385252\&alt=media)

```
//
// following code is checked in 2016/01/13.
//
// fetchUrl(url) can not load assets image now.
import 'package:flutter/widgets.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';
import 'package:flutter/src/services/fetch.dart';
import 'dart:ui' as sky;
main() async {
  runApp(new DrawImageWidget());
}

class ImageLoader {
  static Future<sky.Image> load(String url) async {
    UrlResponse response = await fetchUrl(url);
    if (response.body == null) {
      throw "failed load ${url}";
    } else {
      // normally use following
      // import 'package:flutter/services.dart';
      // Future<ui.Image> decodeImageFromDataPipe(MojoDataPipeConsumer consumerHandle)
      // Future<ui.Image> decodeImageFromList(Uint8List list) {
      Completer<sky.Image> completer = new Completer();
      sky.decodeImageFromDataPipe(response.body.handle.h, (sky.Image image) {
        completer.complete(image);
      });
      return completer.future;
    }
  }
}

class DrawImageWidget extends OneChildRenderObjectWidget {
  double angle = 0.0;
  RenderObject createRenderObject() {
    return new DrawImageObject();
  }
}

class DrawImageObject extends RenderBox {
  double x = 50.0;
  double y = 50.0;
  sky.Image image = null;

  void loadImage() {
    if (image == null) {
      ImageLoader.load("https://avatars0.githubusercontent.com/u/1310669?v=3&s=460").then((sky.Image img) {
        image = img;
        this.markNeedsPaint();
      });
    }
  }

  @override
  void performLayout() {
    size = constraints.biggest;
  }

  void paint(PaintingContext context, Offset offset) {
    loadImage();
    Paint paint = new Paint()
      ..color = new Color.fromARGB(0xff, 0xff, 0xff, 0xff);
    Point point = new Point(x, y);
    if (image == null) {
      Rect rect = new Rect.fromLTWH(x, y, 50.0, 50.0);
      context.canvas.drawRect(rect, paint);
    } else {
      context.canvas.drawImage(image, point, paint);
    }
  }
}
```