CODEWITHSUNDEEP
flutter
Manukumar S B
Manukumar S B

Reputation: 138

performance issue in drawing using flutter

I'm using gestuereDetector to detect offset and CustomePaint to paint the offset in flutter. but after drawing the performance of drawing is becoming slow so please help me to solve this issue.

How can I make it more efficient. My code just follows the below 

 Widget build(BuildContext context) {
    _currentPainter = new DrawPainting(_points);

    return new Container(
      child: new ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        child: new GestureDetector(
          onPanUpdate: (DragUpdateDetails details) {
            setState(() {
              RenderBox referenceBox = context.findRenderObject();

              Offset localPosition =
              referenceBox.globalToLocal(details.globalPosition);
              _points = new List.from(_points)..add(localPosition);
            });
          },
          onPanEnd: (DragEndDetails details) =>_points.add(null),
          child: new CustomPaint(
            painter: _currentPainter,

          ),
        ),
      ),
    );
  }


class DrawPainting extends CustomPainter {
  List<Offset> points = [];
  Canvas _lastCanvas;
  Size _lastSize;
  DrawPainting(points){

    this.points = points;
  }

  void paint(Canvas canvas, Size size) {
    print({"the main paint is called .... ": {"size" : size}});
    _lastCanvas = canvas;
    _lastSize = size;
    Paint paint = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 8.0;


    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null &&
          points[i + 1] != null &&
          (points[i].dx >= 0 &&
              points[i].dy >= 0 &&
              points[i].dx < size.width &&
              points[i].dy < size.height) &&
          (points[i + 1].dx >= 0 &&
              points[i + 1].dy >= 0 &&
              points[i + 1].dx < size.width &&
              points[i + 1].dy < size.height)){
        canvas.drawLine(points[i], points[i + 1], paint);
      }
    }
  }
  bool shouldRepaint(DrawPainting other) => other.points != points;
}

Upvotes: 3

Views: 3286

Answers (2)

Igniti0n
Igniti0n

Reputation: 151

I made a blog on how to make this feature, I hope it helps you.

It describes how to get rid of the weird-looking lines when drawing and also how to implement erase and undo feature as well. Also, setState is not used and a Bloc is used instead.

Blog: https://ivanstajcer.medium.com/flutter-drawing-erasing-and-undo-with-custompainter-6d00fec2bbc2

Summary: divide all lines into objects and store a Path for each line, as well as a list of Offsets. Then draw the path by calling canvas.drawPath() (this is better than going through all offsets and drawing in between them) and also draw a circle in all of the offsets.

I hope this solves your problem.

Upvotes: 0

Manukumar S B
Manukumar S B

Reputation: 138

The performance issue in drawing app using flutter is resolved by using drawPath() and instead of using setState for each points to update use NotifyListener() to refresh than it will be more efficient than setState.

Upvotes: 3

Related Questions