title: Flutter - using PictureRecorder.endRecording().toImage returns blank image
body: <p>I am trying to create a new Image from two existing images using Canvas</p>
  
  <ol>
  <li>one Img from asset ("asset image")</li>
  <li>one Img from network</li>
  </ol>
  
  <p>To achieve that first problem is to draw "asset image" on Canvas using drawImage.. this is where I am facing the problem.</p>
  
  <p>drawCircle is working fine, But for using drawImage as per following code, it is outputting blank image.</p>
  
  <p>I am new to using Canvas and experimenting, any help appreciated.. </p>
  
  <p>Complete code..</p>
  
  <pre><code>import 'package:flutter/material.dart';
  //import 'package:path_provider/path_provider.dart';
  import 'dart:ui' as ui;
  import 'dart:typed_data';
  import 'dart:async';
  //import 'dart:io';
  import 'package:flutter/services.dart';
  
  void main() =&gt; runApp(new MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
  
    @override
    _MyHomePageState createState() =&gt; new _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    Image _image;
    ui.Image imagetoDraw;
  
    @override
    void initState() {
      super.initState();
      _image = new Image.network(
        'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png',
      );
  
      getImageFromAsset();
    }
  
    getImageFromAsset() async {
      imagetoDraw = await load('images/loading.png');
      print('...getImageFromAsset done');
    }
  
    Future&lt;ui.Image&gt; 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;
    }
  
    _generateImage() {
      _generate().then((val) =&gt; setState(() {
            _image = val;
          }));
    }
  
    Future&lt;Image&gt; _generate() async {
      ui.PictureRecorder recorder = new ui.PictureRecorder();
      Canvas c = new Canvas(recorder);
      var rect = new Rect.fromLTWH(0.0, 0.0, 100.0, 100.0);
      c.clipRect(rect);
  
      final paint = new Paint();
      paint.strokeWidth = 2.0;
      paint.color = const Color(0xFF333333);
      paint.style = PaintingStyle.fill;
  
      final offset = new Offset(50.0, 50.0);
  //    c.drawCircle(offset, 40.0, paint); 
  
      c.drawImage(imagetoDraw, offset, paint);
  
      var picture = recorder.endRecording();
  
      final pngBytes = await picture
          .toImage(100, 100)
          .toByteData(format: ui.ImageByteFormat.png);
  
      var image = Image.memory(pngBytes.buffer.asUint8List());
      return image;
    }
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: &lt;Widget&gt;[
              _image,
            ],
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: _generateImage,
          tooltip: 'Generate',
          child: new Icon(Icons.add),
        ),
      );
    }
  }
  </code></pre>