title: Is it possible to draw an image with Dart/Flutter?
body: <p>I'm looking to find a path to generating an image (jpeg or png) from within a flutter application. The image would be composed of circles, lines, text etc.</p>
  
  <p>There does appear to be a means of drawing to the screen using a canvas (<a href="https://docs.flutter.io/flutter/dart-ui/Canvas/Canvas.html" rel="noreferrer">https://docs.flutter.io/flutter/dart-ui/Canvas/Canvas.html</a>), however there doesn't appear to be the equivalent for creating an image that could be presented within or sent/used outside the application.</p>
  
  <p>Is there any dart library available for drawing an image? It would seem that it possible given the underlying skia framework. In the Dart-html package there is a CanvasRenderingContext2D.</p>
  
  <p>Edit: Getting something like the following working (as per Richard's suggestions) would be a start:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:path_provider/path_provider.dart';
  import 'dart:ui';
  import 'dart:typed_data';
  import 'dart:async';
  import 'dart:io';
  
  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;
  
    @override
    void initState() {
      super.initState();
      _image = new Image.network(
        'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png',
      );
    }
  
    Future&lt;String&gt; get _localPath async {
      final directory =
          await getApplicationDocumentsDirectory(); //From path_provider package
      return directory.path;
    }
  
    Future&lt;File&gt; get _localFile async {
      final path = await _localPath;
      return new File('$path/tempImage.png');
    }
  
    Future&lt;File&gt; writeImage(ByteData pngBytes) async {
      final file = await _localFile;
      // Write the file
      file.writeAsBytes(pngBytes.buffer.asUint8List());
      return file;
    }
  
    _generateImage() {
      _generate().then((val) =&gt; setState(() {
            _image = val;
          }));
    }
  
    Future&lt;Image&gt; _generate() async {
      PictureRecorder recorder = new 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);
      var picture = recorder.endRecording();
  
      final pngBytes =
          await picture.toImage(100, 100).toByteData(format: ImageByteFormat.png);
  
      //Aim #1. Upade _image with generated image.
      var image = Image.memory(pngBytes.buffer.asUint8List());
      return image;
  
      //new Image.memory(pngBytes.buffer.asUint8List());
      // _image = new Image.network(
      //   'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
      // );
  
      //Aim #2. Write image to file system.
      //writeImage(pngBytes);
      //Make a temporary file (see elsewhere on SO) and writeAsBytes(pngBytes.buffer.asUInt8List())
    }
  
    @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>