# Flutter Shape Builder

> Flutter Shape Builder is a high-performance vector editing tool designed specifically for Flutter developers. It bridges the gap between manual drawing and `dart:ui` code generation, allowing for the creation of complex, high-performance UI elements without external SVG dependencies.

- [Main App Page](https://fluttershaper.com/): Visual path designer and editor interface.
- [App Editor](https://fluttershaper.com/editor): Direct link to the design canvas workspace.
- [Technical Overview (llm.txt)](https://fluttershaper.com/llm.txt): A concise, high-level summary of the codebase, tech stack, and components.
- [Complete Context (llms-full.txt)](https://fluttershaper.com/llms-full.txt): Fully consolidated markdown file containing the entire codebase architecture and technical guides.

## The Flutter Toolset Suite

The platform contains six interactive visual tools, each designed to generate production-ready Flutter code:

1. **[Flutter Shape Builder (Flagship Tool)](https://fluttershaper.com/editor)**: The flagship vector canvas tool. Composes multi-layer shapes, custom paths with a Pen/Bezier tool, and boolean path operations (Union, Subtract, Intersect, Exclude) generating clean `CustomPainter` code.
2. **[Gradient Builder](https://fluttershaper.com/gradient-builder)**: Tweak linear, radial, and sweep gradients with unlimited color stops, angles, and center points. Generates `BoxDecoration` widgets.
3. **[Shadow Generator](https://fluttershaper.com/shadow-generator)**: Visualizes and layers offset shadows with spreading, blurring, and customized opacity. Generates `BoxDecoration` with `List<BoxShadow>` values.
4. **[Blob Generator](https://fluttershaper.com/blob-generator)**: Generates organic, fluid SVG shapes using customizable growth, complexity nodes, and seed randomizers. Exports `CustomPainter` and `ClipPath` code.
5. **[Wave Generator](https://fluttershaper.com/wave-generator)**: Creates custom layered waves and liquid dividers using sine wave algorithms, stacked depths, and steepness controllers. Generates optimized `ClipPath` clippers.
6. **[SVG Path Importer](https://fluttershaper.com/import-svg)**: Paste any raw SVG vector markup to parse and transpile coordinate instructions directly into clean, lightweight Flutter Dart `Path` code.

## Core Documentation

- [User & Developer Guide](https://fluttershaper.com/DOCUMENTATION.md): Complete guide to using the canvas drawing system, geometry logic, and export options.
- [Anchor Points & Curve Editing](https://fluttershaper.com/CURVE_EDITING_GUIDE.md): Visual and mathematical specifications of curves, anchors, handles, and supported SVG commands.
- [Key Features List](https://fluttershaper.com/KEY_FEATURES.md): Comprehensive listing of user interfaces, canvas controls, keyboard shortcuts, and export options.
- [Landing Copy Reference](https://fluttershaper.com/LANDING_COPY.md): High-fidelity marketing copy, value propositions, and page layouts.

## Technical Architecture & Design System

- **Core Stack**: React 19 (Vite) + Konva.js (Canvas Engine) + Paper.js (Geometry Logic) + Zustand (State & History Persistence) + Tailwind CSS (Layout utilities).
- **Z-Order System**: Layer IDs are managed inside the store `layerIds` to ensure precise rendering order, locking, Z-index shift, and multi-selection.
- **Transpilation Pipeline**: Normalized SVG path commands (M, L, C, Q, Z) are parsed into an AST and transpiled 1:1 to Flutter `path.moveTo`, `path.lineTo`, `path.cubicTo`, etc., with accurate Hex-to-Flutter color conversions.