FlutterCraft is a web-based visual builder for generating Flutter mobile screen code.
The goal is not to recreate Figma. The goal is to make a narrow editor that only supports Flutter-friendly layouts and can therefore export usable starter code reliably.
FlutterCraft lets a user:
- drag basic UI widgets onto a phone-sized canvas
- edit widget properties in an inspector
- organize widgets in a Flutter-safe tree
- save and load screens as JSON
- export a screen to Dart widget code
The first version intentionally supports a constrained subset of Flutter widgets:
ScaffoldContainerTextImageElevatedButtonTextFieldColumnRowStackListViewCardIconSpacer
The first version does not try to support:
- arbitrary freeform design
- multi-screen app generation
- live device preview
- design collaboration
- full design system management
- importing from Figma or Penpot
- perfect production-ready Flutter architecture
Freeform design tools are hard to export cleanly to Flutter because the design model and the Flutter layout model are different. FlutterCraft avoids that problem by making the internal document model look like Flutter from the beginning.
This is the key design rule of the project:
If the editor cannot represent it safely, the exporter should not pretend it can.
- React
- TypeScript
- Vite
- Zustand
- dnd-kit
- React Hook Form or a small custom form layer for the inspector
- Prettier and ESLint
The app itself should be web-based first. Once stable, it can later be wrapped as a desktop app with Tauri or Electron.
- docs/MVP.md
- docs/ARCHITECTURE.md
- docs/DATA_MODEL.md
- docs/IMPLEMENTATION_PLAN.md
- docs/QWEN_HANDOFF.md
The fastest path is:
- build the editor shell
- define the JSON node schema
- render the widget tree on the canvas
- support selection and property editing
- support drag/drop insertion and reordering
- export Flutter code from the same JSON tree
- a user can create one screen visually
- the screen is stored as structured JSON
- the canvas representation and the exported Flutter code match
- exported code is readable and manually editable
- unsupported combinations are blocked in the editor instead of failing late