Flutter - Draw over a photo

Question

I am developing an app that allows the user to take a picture and draw lines on the image with different size strokes and colours.

I have used the plugin image_picker to allow the user to take a picture using the camera.

I am currently stuck as I can't seem to find a solution that will let me to implement the feature to allow the user draw on to the image.

Any suggestions please.

Example of what I am trying to achieve from a different app:

Solution 1

Maybe this code can help you.

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

import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:typed_data';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() =>  _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ui.Image image;
  bool isImageloaded = false;
  GlobalKey _myCanvasKey = new GlobalKey();

  void initState() {
    super.initState();
    init();
  }

  Future <Null> init() async {
    final ByteData data = await rootBundle.load('img/guide1.png');
    image = await loadImage( Uint8List.view(data.buffer));
  }

  Future<ui.Image> loadImage(List<int> img) async {
    final Completer<ui.Image> completer =  Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      setState(() {
        isImageloaded = true;
      });
      return completer.complete(img);
    });
    return completer.future;
  }

  Widget _buildImage() {
    ImageEditor editor= ImageEditor(image: image);
    if (this.isImageloaded) {
      return  GestureDetector(
        onPanDown: (detailData){
          editor.update(detailData.localPosition);
          _myCanvasKey.currentContext.findRenderObject().markNeedsPaint();

        },
        onPanUpdate: (detailData){
          editor.update(detailData.localPosition);
          _myCanvasKey.currentContext.findRenderObject().markNeedsPaint();

        },
        child: CustomPaint(
          key: _myCanvasKey,
          painter:  editor,
        ),
      );
    } else {
      return  Center(child:  Text('loading'));
    }
  }
  @override
  Widget build(BuildContext context) {

    return  _buildImage();
  }
}

class ImageEditor extends CustomPainter {

  ImageEditor({
    this.image,
  });

  ui.Image image;

  List<Offset> points=List();

  final Paint painter = new Paint()
    ..color = Colors.blue[400]
    ..style = PaintingStyle.fill;

  void update(Offset offset){
    points.add(offset);
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image,  Offset(0.0, 0.0),  Paint());
    for(Offset offset in points){
      canvas.drawCircle(offset, 10, painter);
    }
  }

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

}

Solution 2

Check out the code below, reference from @LuckyDog, but the image is resized, and the list points in the range of image height.

class ImagePainter extends CustomPainter {
  ImagePainter({this.image, this.pointsList});
  ui.Image image;

  List<DrawingPoints> pointsList;
  List<Offset> offsetPoints = List();

  List<Offset> points = List();

  // final Paint painter = new Paint()


  @override
  void paint(Canvas canvas, Size size) {
    // canvas.drawImage(this.image, Offset(0.0, 0.0), Paint());
    final imageSize = Size(image.width.toDouble(), image.height.toDouble());
    final src = Offset.zero & imageSize;
    final dst = Offset.zero & size;
    // canvas.pic
    canvas.drawImageRect(this.image, src, dst, Paint());
    // for (Offset offset in points) {
    //   canvas.drawCircle(offset, 10, painter);
    // }
    pointsList = pointsList.map((e) {
      if (e != null) {
        if (e.points.dy <= dst.height) {
          return e;
        }
      }

      return null;
    }).toList();
    for (int i = 0; i < pointsList.length - 1; i++) {
      if (pointsList[i] != null && pointsList[i + 1] != null) {
        canvas.drawLine(pointsList[i].points, pointsList[i + 1].points,
            pointsList[i].paint);
      } else if (pointsList[i] != null && pointsList[i + 1] == null) {
        offsetPoints.clear();
        offsetPoints.add(pointsList[i].points);
        offsetPoints.add(Offset(
            pointsList[i].points.dx + 0.1, pointsList[i].points.dy + 0.1));
        canvas.drawPoints(
            ui.PointMode.points, offsetPoints, pointsList[i].paint);
      }
    }
  }

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