# Real-Time Code Preview: See Your Flutter CustomPainter Code Instantly

One of the most powerful features of Flutter Shape Builder is the **real-time code preview**. As you draw, move, resize, or style shapes on the canvas, the corresponding Flutter Dart code updates instantly in the sidebar panel. There is no "generate" button to click — the code is always live and always in sync.

---

## **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:

| Format | What you get | Best for |
| --- | --- | --- |
| **Full Runnable App** | Complete `main.dart` with MaterialApp | Quick testing and demos |
| **StatelessWidget** | Reusable widget with CustomPaint | Dropping into existing widget trees |
| **CustomPainter Only** | Just the painter class | When you have your own widget setup |

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:

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

---