Mastering the Pen Tool: Bezier Curves for Flutter CustomPainter

The Pen Tool is the most powerful drawing instrument in Flutter Shape Builder. It lets you create any shape imaginable — from simple straight-line paths to fluid organic curves — all while generating clean, production-ready Path commands for Flutter's CustomPainter.

If you have ever used the Pen Tool in Figma, Adobe Illustrator, or Inkscape, you will feel right at home. If not, this guide covers everything you need to know.

---

How the Pen Tool works

Activate the Pen Tool with the keyboard shortcut Ctrl+P or by selecting it from the toolbar. Then click on the canvas to place anchor points. Each click adds a new vertex to your path:

1. Click to place a sharp corner point (linear segment)

2. Click and drag to create a smooth curve with control handles

3. Press Enter or click the first point to close the path

---

Understanding bezier curves

Flutter Shape Builder supports two types of bezier curves, matching the SVG and Flutter Path APIs:

Cubic bezier curves

Cubic bezier curves use two control points to define the shape of the curve between two anchor points. In Flutter, this maps to the path.cubicTo() method. Cubic curves offer the most control and can create S-curves, complex organic shapes, and smooth transitions.

// Generated Flutter code for a cubic bezier
path.cubicTo(
  100, 50,   // first control point
  200, 150,  // second control point
  300, 100,  // end point
);

Quadratic bezier curves

Quadratic bezier curves use one control point and are simpler than cubic curves. They map to path.quadraticBezierTo() in Flutter. They are ideal for gentle arcs, parabolic shapes, and simpler curved segments.

// Generated Flutter code for a quadratic bezier
path.quadraticBezierTo(
  150, 50,   // control point
  300, 100,  // end point
);

---

Anchor point editing

Once your path is drawn, switch to the Select tool (V) to enter editing mode. Flutter Shape Builder provides a comprehensive set of anchor point manipulation features:

• Drag anchor points — move any vertex to a new position

• Drag control handles — the green control points let you sculpt the curve shape in real time

• Double-click an anchor — toggle between sharp corner and smooth curve modes

• Click on a segment — insert a new anchor point at that location using De Casteljau's algorithm

• Delete key on a selected anchor — remove the point from the path

---

SVG path commands under the hood

Flutter Shape Builder uses standard SVG path notation internally, which it then converts to Flutter Dart code. The supported commands are:

All coordinates are absolute, which ensures the generated Flutter code is predictable and easy to modify manually.

---

Tips for creating smooth curves

1. Use fewer points — fewer anchor points with well-placed control handles produce smoother results than many points with short segments

2. Keep handles symmetric — when both control handles are roughly equal length and opposite angle, the curve flows smoothly through the anchor

3. Subdivide when needed — click on an existing segment to split it with a new point, giving you more local control without disrupting the rest of the curve

4. Toggle curve mode — double-click any sharp corner to convert it to a smooth curve, or vice versa

---

From pen strokes to production Flutter code

Every path you create with the Pen Tool is instantly reflected in the code preview panel. The generated Dart code uses Flutter's standard Path class with moveTo, lineTo, cubicTo, and quadraticBezierTo methods — no external packages required.

final path = Path();
path.moveTo(50.0, 100.0);
path.cubicTo(80.0, 30.0, 180.0, 30.0, 210.0, 100.0);
path.cubicTo(240.0, 170.0, 140.0, 200.0, 50.0, 100.0);
path.close();

canvas.drawPath(path, paint);

---

Try the Pen Tool now

Open the editor, press Ctrl+P, and start drawing bezier curves. Your Flutter code updates in real time.

Open the Editor →

---