# Flutter Dart Code Generation: From Visual Design to Production Code

The core promise of Flutter Shape Builder is simple: **design shapes visually, get production-ready Dart code**. No more guessing coordinates. No more trial-and-error hot-reload cycles. Draw it, style it, export it.

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.

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

| HEX Input | Opacity | Flutter Output |
| --- | --- | --- |
| `#6366f1` | 100% | `Color(0xFF6366F1)` |
| `#10b981` | 50% | `Color(0x8010B981)` |
| `#ef4444` | 75% | `Color(0xBFEF4444)` |

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

---