In this article, we dive deep into the code generation engine — the three export modes, how colors are converted, what the generated code looks like, and how validation keeps your output clean.

Three export modes

Flutter Shape Builder offers three levels of Dart code export, depending on how you want to use the generated code:

1. Full Runnable App

Generates a complete main.dart file with a MaterialApp, a StatelessWidget, and the CustomPainter class. You can paste this directly into a new Flutter project and run it immediately.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            size: Size(400, 300),
            painter: MyShapePainter(),
          ),
        ),
      ),
    );
  }
}

class MyShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Color(0xFF6366F1)
      ..style = PaintingStyle.fill;

    final path = Path();
    path.moveTo(50.0, 100.0);
    path.lineTo(200.0, 50.0);
    path.lineTo(350.0, 100.0);
    path.lineTo(200.0, 250.0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

2. StatelessWidget

Generates a reusable widget class that wraps the CustomPaint widget and painter. Drop this into any existing widget tree.

3. CustomPainter Only

Generates just the CustomPainter class with its paint() method. This is ideal when you already have a widget structure and just need the painting logic.

Automatic color conversion

Flutter Shape Builder handles the color format conversion automatically. When you pick a color using the built-in HEX color picker (with alpha channel support), the exporter converts it to Flutter's Color(0xAARRGGBB) format:

Fill colors, stroke colors, stroke widths, and opacity values are all encoded correctly in the generated Paint objects.

Multi-shape compositions

When your canvas contains multiple shapes, the code generator produces painting commands for each shape in the correct z-order (layer order). Each shape gets its own Paint configuration and path definition, ensuring the final rendering matches your visual design exactly.

Pre-export validation

Before generating code, Flutter Shape Builder runs a validation pass to catch potential issues:

• Unsupported SVG features — warnings for features like SVG Arcs that don't have a direct Path equivalent in Flutter

• Empty shapes — alerts if a shape has no path data

• Linting feedback — shown directly in the sidebar so you can fix issues before copying the code

This validation ensures the code you export compiles and renders correctly on the first try.

Additional export formats

Beyond Dart code, Flutter Shape Builder supports:

• SVG export — standard-compliant SVG files for web use, design tools, and documentation

• JSON export — raw shape configuration data for custom processing pipelines

Why generated code beats hand-written paths

• Speed — design complex shapes in minutes instead of hours

• Accuracy — every coordinate is exactly where you placed it visually

• Consistency — colors, strokes, and transforms are always correctly formatted

• Iteration — change your design and the code updates instantly

• Clean output — generated code uses standard Flutter APIs with no external dependencies

Generate your first Flutter shape

Draw a shape, pick your export mode, and copy production-ready Dart code in seconds.

Open the Editor →

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.

// 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 →

Understanding layers in Flutter Shape Builder

Every shape you create is added as a layer in the layer panel (visible in the sidebar). Layers determine the z-order — which shapes appear in front of or behind other shapes. The layer at the top of the list is drawn last (appears on top), just like in Figma, Sketch, or Photoshop.

This z-order directly maps to the order of canvas.drawPath() calls in your generated Flutter code. Shapes drawn later appear on top of shapes drawn earlier.

Z-order management

Reorder your shapes to control which elements overlap which:

• Bring to Front — move the selected shape to the top of the stack (drawn last, appears on top)

• Send to Back — move the selected shape to the bottom of the stack (drawn first, appears behind everything)

• Move Up / Move Down — nudge a shape one position in the layer order

These operations are accessible via the context menu (right-click on a shape) or through the layer panel controls.

Multi-selection

Select multiple shapes at once to apply bulk operations:

• Shift+Click — add or remove shapes from the current selection

• Bulk property editing — change fill color, stroke, or opacity for all selected shapes simultaneously

• Boolean operations — select two or more shapes and apply Unite, Subtract, Intersect, or Exclude

• Group delete — remove all selected shapes at once

Multi-selection is essential for efficient editing of complex designs with many elements.

Shape locking

Lock a shape to prevent accidental edits. When a shape is locked:

• It cannot be moved, resized, or rotated

• It cannot be deleted accidentally

• It remains visible on the canvas but is non-interactive

• It can still be selected in the layer panel for unlocking

Shape locking is invaluable when you have background elements or reference shapes that should stay fixed while you work on foreground details.

Layer renaming

Give your layers meaningful names to keep track of what each shape represents:

• Double-click a layer name in the sidebar to rename it

• Use descriptive names like "Header Background", "Icon Outline", or "Button Shape"

• Named layers make it easier to find and select specific shapes in complex compositions

Context menu

Right-click on any shape on the canvas to access the context menu with quick actions:

• Bring to Front / Send to Back — z-order controls

• Lock / Unlock — toggle shape locking

• Delete — remove the shape

• Duplicate — create a copy of the shape

The context menu provides fast access to the most common layer operations without needing to navigate the sidebar.

How layers affect generated code

The layer order directly determines the order of paint operations in your exported Flutter code. Shapes at the bottom of the layer stack are painted first:

@override
void paint(Canvas canvas, Size size) {
  // Bottom layer - painted first (behind)
  final backgroundPaint = Paint()..color = Color(0xFF1A1A24);
  canvas.drawRect(Rect.fromLTWH(0, 0, 400, 300), backgroundPaint);

  // Middle layer
  final shapePaint = Paint()..color = Color(0xFF6366F1);
  canvas.drawPath(shapePath, shapePaint);

  // Top layer - painted last (in front)
  final overlayPaint = Paint()..color = Color(0x8010B981);
  canvas.drawPath(overlayPath, overlayPaint);
}

This means you get pixel-perfect control over which shapes appear in front — the visual order on your canvas matches the code output exactly.

Tips for organizing complex designs

1. Name your layers as you create them — it saves time later when your design has 10+ shapes

2. Lock background shapes early so you don't accidentally move them while editing foreground elements

3. Use z-ordering strategically — place decorative elements behind functional shapes

4. Select multiple shapes with Shift+Click before applying boolean operations or bulk style changes

5. Use the context menu for quick access to common operations instead of searching the sidebar

Organize your Flutter shapes

Use the layer system to keep complex compositions clean and manageable.

Open the Editor →

How it works

The code preview panel is located in the sidebar on the right side of the editor. It shows the generated Dart code for all shapes currently on the canvas. Every action you take is immediately reflected:

• Draw a new shape → new path and paint code appears

• Move a shape → coordinate values update

• Change fill color → Color() value updates

• Resize or rotate → dimensions and transform values update

• Delete a shape → its code block is removed

• Reorder layers → paint call order changes

This tight feedback loop means you always know exactly what your Flutter code looks like — no surprises when you paste it into your project.

Syntax highlighting

The code preview uses syntax highlighting powered by React Syntax Highlighter with a dark theme optimized for the editor's color scheme. The highlighting covers:

• Dart keywords (final, class, void, override)

• Type names (Path, Paint, Canvas, Color)

• String and number literals

• Method calls and property access

• Comments

Code is displayed in Fira Code monospace font for readability, matching what you would see in VS Code or Android Studio.

Copy to clipboard

Click the copy button to copy the entire generated code to your clipboard in one click. Paste it directly into your Flutter project's .dart file and it compiles immediately. No formatting fixes or manual edits required.

Pre-export validation

Before you copy, Flutter Shape Builder runs an automatic validation pass and displays any warnings directly in the sidebar:

• Unsupported features — alerts you if your design uses features like SVG Arcs that don't have a direct Flutter equivalent

• Empty shapes — warns if a shape has no path data

• Rendering issues — flags potential problems that could cause unexpected behavior at runtime

Validation warnings appear as non-blocking notices — you can still export the code, but the warnings help you make an informed decision about whether to adjust your design first.

Export format options

The code preview panel lets you switch between three export formats:

Switching between formats updates the preview instantly — you can quickly compare what each option looks like.

What the live preview looks like

Here is a simplified example of what you see in the code preview panel as you draw a filled diamond shape:

class MyShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint_0 = Paint()
      ..color = Color(0xFF6366F1)
      ..style = PaintingStyle.fill;

    final path_0 = Path();
    path_0.moveTo(200.0, 50.0);
    path_0.lineTo(350.0, 175.0);
    path_0.lineTo(200.0, 300.0);
    path_0.lineTo(50.0, 175.0);
    path_0.close();

    canvas.drawPath(path_0, paint_0);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Every pixel you drag, every color you change — this code updates in real time.

Why real-time preview matters

Eliminates the guessing game

Traditional CustomPainter development is a cycle of: write code → hot reload → check result → adjust → repeat. With real-time preview, you see the code and the visual result simultaneously.

Builds intuition for Flutter paths

Watching how your visual edits translate to moveTo, lineTo, cubicTo, and close calls is one of the fastest ways to learn the Flutter Path API.

Catches problems early

Validation warnings appear as you work, not after you have already pasted the code into your project. Fix issues while you are still in the design phase.

Speeds up iteration

Change a shape, see the code update, copy it. The entire design-to-code cycle takes seconds instead of minutes.

See your code update in real time

Open the editor and start drawing. Your Flutter code appears instantly in the sidebar.

Open the Editor →

Tool shortcuts

Switch between drawing tools instantly with single-key shortcuts:

These shortcuts work globally in the editor — no need to click the toolbar first.

Editing shortcuts

Canvas navigation

Flutter Shape Builder uses Figma-style canvas navigation for a familiar, intuitive experience:

Zoom

The zoom level is displayed as a percentage in the toolbar. Zooming is centered on the canvas viewport, so you can zoom into specific areas of your design.

Pan

Hold the spacebar and drag to move around the canvas freely. This works regardless of which tool is active — you do not need to switch to a hand tool.

Grid alignment

Toggle the alignment grid to help position shapes precisely:

• The grid provides visual reference lines across the canvas

• Shapes snap to grid lines for consistent spacing

• Toggle the grid on/off from the toolbar

The grid is purely a visual aid — it does not affect the generated code or export output.

Undo/Redo history

Flutter Shape Builder maintains a 50-step undo/redo history using a snapshot-based system:

• Every significant action (draw, move, resize, delete, color change) creates a history snapshot

• Ctrl+Z steps backward through history

• Ctrl+Y steps forward through history

• History is cleared when you perform a new action after undoing (standard behavior)

This gives you the freedom to experiment — try different layouts, colors, and shapes knowing you can always go back.

Right-click context menu

Right-click on any shape to access quick actions without leaving the canvas:

• Bring to Front — move shape to top layer

• Send to Back — move shape to bottom layer

• Lock / Unlock — prevent accidental edits

• Delete — remove the shape

• Duplicate — create a copy

Canvas viewport controls

The toolbar displays the current zoom percentage and provides controls for resetting the view:

• Zoom to fit — automatically zoom to show all shapes

• Reset zoom — return to 100% zoom level

• Center canvas — reset pan position to the center

Keyboard shortcut quick reference

Here is the complete shortcut reference in one place:

Tips for maximum productivity

1. Learn the tool shortcuts first — switching between V, R, C, P without the mouse saves significant time

2. Use Space+Drag constantly — panning while drawing keeps you focused on the area you are editing

3. Ctrl+Z is your friend — experiment freely knowing undo is always one shortcut away

4. Toggle the grid when you need precise alignment, disable it when you want creative freedom

5. Right-click for context — the context menu is often faster than navigating the sidebar for common operations

Design faster with keyboard shortcuts

Master these shortcuts and your Flutter shape design workflow becomes significantly faster.

Open the Editor →

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 →

In this guide, we explore the three core drawing tools available in Flutter Shape Builder: the Rectangle Tool, the Circle Tool, and the Polygon Tool.

Rectangle Tool

The Rectangle Tool lets you create rectangles and rounded rectangles by simply clicking and dragging on the canvas. It is ideal for building cards, containers, buttons, and any box-based UI element.

Key capabilities

• Parametric width and height — adjust dimensions precisely in the property inspector

• Uniform corner radius — set a single border radius value that applies to all four corners

• Individual corner radii — customize each corner independently for asymmetric rounded shapes

• Drag-to-create interaction — click on the canvas and drag to define the rectangle dimensions visually

After drawing a rectangle, the property panel gives you full control over position (x, y), size (width, height), rotation, fill color, stroke color, stroke width, and opacity. The generated Dart code uses canvas.drawRRect for rounded rectangles and canvas.drawRect for sharp corners.

Example: Rounded rectangle in Flutter

final rrect = RRect.fromRectAndRadius(
  Rect.fromLTWH(50, 50, 200, 120),
  Radius.circular(16),
);
canvas.drawRRect(rrect, paint);

Circle Tool

The Circle Tool creates perfect circles with a single click-and-drag gesture. It is the fastest way to add circular elements like avatars, icons, status indicators, or decorative shapes to your Flutter layout.

Key capabilities

• Parametric radius — set the circle radius exactly in the properties panel

• Fill and stroke styling — apply solid fill colors with HEX + alpha, configure stroke width and color

• Position control — adjust the center point coordinates for pixel-perfect placement

Circles are rendered internally as SVG arc paths. The generated Flutter code uses canvas.drawOval or arc path commands depending on the export format you choose.

Polygon Tool

The Polygon Tool creates regular polygons with a configurable number of sides — from triangles (3 sides) to icosagons (20 sides). This is perfect for badges, star shapes, hexagonal grids, and decorative geometric patterns.

Key capabilities

• Dynamic side count — choose anywhere from 3 to 20 sides

• Click-to-add vertices — alternatively, click individual points to place vertices manually

• Regular polygon generation — automatically generates evenly-spaced vertices

• Close path with Enter — press Enter to finalize and close the polygon shape

Example: Triangle in Flutter

final path = Path();
path.moveTo(150, 50);
path.lineTo(250, 200);
path.lineTo(50, 200);
path.close();
canvas.drawPath(path, paint);

Shared features across all tools

No matter which drawing tool you use, Flutter Shape Builder provides a consistent set of features:

• Transform controls — adjust X, Y position, width, height, rotation, and scale

• Fill and stroke styling — HEX color picker with alpha channel support

• Opacity control — fine-tune the transparency of any shape

• Real-time code preview — see the generated Dart code update instantly as you draw and edit

• Multiple export formats — export as a full runnable Flutter app, StatelessWidget, CustomPainter class, SVG, or JSON

• Undo/Redo history — 50-step snapshot-based history for safe experimentation

Why use visual tools instead of writing CustomPainter by hand?

Writing CustomPainter code manually is powerful but slow. Every coordinate change requires a hot-reload cycle. Flutter Shape Builder gives you instant visual feedback — you see exactly what your shape looks like as you build it, and the generated code is always in sync.

This workflow is especially valuable for:

• Rapid prototyping — try different shape variations in seconds

• Complex compositions — combine multiple shapes with boolean operations

• Accurate positioning — use the grid and property inspector for pixel-perfect placement

• Learning Flutter paths — see how visual shapes translate to Dart code

Start drawing Flutter shapes visually

Open the editor, pick a tool, and start creating. Your Dart code is generated in real time.

Open the Editor →