# 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.

```dart
// 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.

```dart
// 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:

| Command | Description | Flutter equivalent |
| --- | --- | --- |
| `M x y` | Move to (starting point) | `path.moveTo(x, y)` |
| `L x y` | Line to (straight segment) | `path.lineTo(x, y)` |
| `C x1 y1 x2 y2 x y` | Cubic bezier curve | `path.cubicTo(x1, y1, x2, y2, x, y)` |
| `Q x1 y1 x y` | Quadratic bezier curve | `path.quadraticBezierTo(x1, y1, x, y)` |
| `Z` | Close path | `path.close()` |

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.

```dart
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 →**](https://fluttershaper.com/editor)

---