# Boolean Operations: Unite, Subtract, Intersect & Exclude Shapes in Flutter

Creating complex shapes in Flutter often means combining simpler shapes together. A speech bubble is a rectangle merged with a triangle. A donut is a circle with another circle subtracted from its center. A badge is the intersection of two overlapping forms.

**Flutter Shape Builder** provides four boolean operations that let you combine shapes visually and export the result as a single, clean Flutter `Path`. These operations are powered by the **Paper.js** computational geometry engine for pixel-perfect accuracy.

---

## **The four boolean operations**

### **Unite (Merge)**

The **Unite** operation merges two or more overlapping shapes into a single combined shape. The result is the outer boundary of all selected shapes combined.

**Use cases:** speech bubbles, complex silhouettes, merged UI elements, logos with connected parts.

```dart
// Before: two separate shapes
// After unite: one merged path
final mergedPath = Path();
mergedPath.moveTo(50.0, 50.0);
// ... combined outline coordinates
mergedPath.close();
canvas.drawPath(mergedPath, paint);
```

### **Subtract (Cut)**

The **Subtract** operation cuts one shape out of another, like a cookie cutter. Select two shapes — the first shape is the base, and the second shape is removed from it.

**Use cases:** donut shapes, cutout effects, keyhole shapes, notched containers, ring indicators.

### **Intersect (Overlap)**

The **Intersect** operation keeps only the area where all selected shapes overlap. Everything outside the intersection is removed.

**Use cases:** Venn diagram overlaps, clipped shapes, masked regions, cropped elements.

### **Exclude (XOR)**

The **Exclude** operation keeps everything *except* the overlapping region. It is the inverse of Intersect.

**Use cases:** frame effects, inverted masks, decorative patterns, hollow logo shapes.

---

## **How to use boolean operations**

1. **Draw two or more shapes** using the Rectangle, Circle, Polygon, or Pen tools
    
2. **Select multiple shapes** by holding Shift and clicking each shape
    
3. **Choose an operation** from the toolbar — Unite, Subtract, Intersect, or Exclude
    
4. The shapes are combined into a **single new path** with the result of the operation
    

The resulting shape is a standard path that you can further edit, style, combine with other shapes, or export as Flutter code.

---

## **Under the hood: Paper.js geometry engine**

Boolean operations on vector paths are computationally complex. Flutter Shape Builder uses **Paper.js**, a battle-tested open-source vector graphics library, to perform these calculations with precision. Paper.js handles edge cases like tangent intersections, self-intersecting paths, and floating-point rounding that would be extremely difficult to implement from scratch.

The workflow internally:

1. Your canvas shapes are converted to Paper.js path representations
    
2. Paper.js computes the boolean operation (unite, subtract, intersect, or exclude)
    
3. The resulting path is converted back to SVG commands
    
4. Those commands are displayed on the canvas and translated to Flutter Dart code
    

---

## **Practical examples**

### **Creating a speech bubble**

1. Draw a rounded rectangle for the bubble body
    
2. Draw a small triangle for the tail pointer
    
3. Select both shapes and click **Unite**
    
4. Result: a single path representing a complete speech bubble
    

### **Creating a ring / donut**

1. Draw a large circle (outer ring)
    
2. Draw a smaller circle centered inside (inner cutout)
    
3. Select both and click **Subtract**
    
4. Result: a ring shape with a hollow center
    

### **Creating a badge with cutout**

1. Draw a hexagon for the badge shape
    
2. Draw a star or icon shape on top
    
3. Select both and click **Exclude**
    
4. Result: a hexagonal badge with the icon shape cut through it
    

---

## **Flutter Path.combine comparison**

Flutter's built-in `Path.combine()` method supports `PathOperation.union`, `PathOperation.difference`, `PathOperation.intersect`, and `PathOperation.xor`. Flutter Shape Builder pre-computes these operations at design time, so your exported code contains just the final path coordinates — no runtime computation needed. This results in faster rendering and simpler code.

---

## **Combine shapes visually**

Draw overlapping shapes, select them, and apply boolean operations. Export the result as clean Flutter code.

[**Open the Editor →**](https://fluttershaper.com/editor)

---