Introduction

Building a vector graphics editor in Flutter requires mastering the CustomPaint widget and writing a robust CustomPainter. In this advanced tutorial, you’ll learn how to architect a vector editor featuring freehand drawing, shape manipulation, and export capabilities. We assume you’re comfortable with Flutter fundamentals, state management, and Canvas APIs.

Setting Up CustomPainter for Vector Paths

Start by defining a CustomPainter subclass that maintains a list of drawable paths. Each path can represent either a freehand stroke or a primitive shape. Use Paint to configure stroke width, color, and cap style.

class VectorPainter extends CustomPainter {
  final List<Path> paths;
  final List<Paint> paints;

  VectorPainter({required this.paths, required this.paints});

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < paths.length; i++) {
      canvas.drawPath(paths[i], paints[i]);
    }
  }

  @override
  bool shouldRepaint(covariant VectorPainter old) {
    return old.paths != paths;
  }
}

Integrate it in your widget tree:

CustomPaint(
  size: Size.infinite,
  painter: VectorPainter(paths: editorPaths, paints: editorPaints),
)

This CustomPaint setup is the core of your canvas painting surface.

Capturing Touch Input and Building Paths

To create freehand strokes, wrap the CustomPaint in a GestureDetector. Track onPanStart, onPanUpdate, and onPanEnd events to accumulate points into a Path. Use state management (e.g., Provider, BLoC) to update your lists.

GestureDetector(
  onPanStart: (details) {
    setState(() {
      currentPath = Path()..moveTo(details.localPosition.dx, details.localPosition.dy);
      currentPaint = Paint()
        ..color = selectedColor
        ..strokeWidth = strokeWidth
        ..style = PaintingStyle.stroke;
      editorPaths.add(currentPath);
      editorPaints.add(currentPaint);
    });
  },
  onPanUpdate: (details) {
    setState(() {
      currentPath.lineTo(details.localPosition.dx, details.localPosition.dy);
    });
  },
  onPanEnd: (_) {
    // Commit stroke; ready for next
  },
  child: CustomPaint(
    painter: VectorPainter(paths: editorPaths, paints: editorPaints),
    size: Size.infinite,
  ),
)

This snippet demonstrates how custom painting and state updates combine to render vector strokes in real time.

Implementing Shape and Control Handles

Beyond freehand lines, support vector shapes: rectangles, circles, and Bézier curves. Model each shape as an object holding its parameters and control points. Extend your painter to switch between path objects and shape objects in the draw loop.

For instance, a rectangle shape:

class RectShape {
  Offset topLeft, bottomRight;
  Paint paint;
  RectShape(this.topLeft, this.bottomRight, this.paint);

  Path toPath() {
    return Path()..addRect(Rect.fromPoints(topLeft, bottomRight));
  }
}

In your VectorPainter, detect the type:

for (var element in elements) {
  if (element is RectShape) {
    canvas.drawPath(element.toPath(), element.paint);
  } else if (element is FreehandPath) {
    canvas.drawPath(element.path, element.paint);
  }
}

Provide draggable control handles by drawing small rectangles at key points. Capture onTapDown and onPanUpdate in a layered Stack to let users select and drag handles, updating shape parameters and triggering a repaint.

Tooling: Selection, Undo/Redo, and Export

A polished editor needs common tools:

Selection tool: Hit-test shapes by checking Path.contains(point) or bounding-box overlap.

Undo/Redo: Maintain a history stack of element lists; push on every commit.

Export: Serialize your vector data to SVG or JSON, then render via dart:convert or a small SVG library.

Example SVG export stub:

String exportToSvg(List<Path> paths, List<Paint> paints) {
  final buffer = StringBuffer('<svg xmlns="http://www.w3.org/2000/svg">');
  for (int i = 0; i < paths.length; i++) {
    final color = paints[i].color.toRadixString(16).padLeft(8, '0');
    buffer.write('<path d="${paths[i].toSvgString()}" fill="none" stroke="#$color"/>');
  }
  buffer.write('</svg>');
  return buffer.toString();
}

Implement toSvgString() by traversing path commands (e.g., moveTo, lineTo, cubicTo) and concatenating SVG path syntax.

Performance Tips and Optimization

Handling thousands of vector elements can tax the GPU and UI thread. To optimize:

• Batch static shapes into a single Picture using PictureRecorder.

• Cache rendered layers as ui.Image where possible.

• Use shouldRepaint judiciously; compare only changed objects.

Example of caching:

Future<ui.Image> cacheCanvas(Size size, VectorPainter painter) {
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  painter.paint(canvas, size);
  return recorder.endRecording().toImage(size.width.toInt(), size.height.toInt());
}

Draw the cached image directly in paint() when no edits occur, bypassing complex path loops.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By leveraging Flutter’s CustomPaint, CustomPainter, and rich Canvas APIs, you can construct a full-featured vector graphics editor with freehand drawing, shape tools, undo/redo, and export capabilities. Fine-tuning performance through layer caching and smart repaint logic ensures the editor remains responsive, even with complex drawings.

Integrate these custom painting techniques into your next project to deliver a powerful, responsive vector editor experience in Flutter.