Visão Geral
JSON Canvas Viewer é uma aplicação Flutter que combina edição de código em tempo real com renderização visual interativa, permitindo criar, editar e visualizar layouts baseados em JSON através de uma interface intuitiva de arrastar e soltar.
O projeto implementa sincronização bidirecional: mudanças no código refletem instantaneamente no canvas visual e vice-versa, oferecendo aos desenvolvedores controle total sobre a estrutura JSON enquanto manipulam elementos visualmente.
Funcionalidades Principais
Editor de Código em Tempo Real
Editor JSON com syntax highlighting, validação automática e debouncing inteligente para performance otimizada.
Renderização Visual Interativa
Canvas que renderiza elementos baseados em JSON com suporte para múltiplos tipos de elementos e transformações.
Drag and Drop
Arraste elementos visualmente e veja o JSON atualizar em tempo real. Suporte completo para posicionamento preciso.
Redimensionamento Visual
Handles de resize em todos os cantos para ajustar dimensões de elementos com feedback visual instantâneo.
Múltiplos Tipos de Elementos
Suporte para text, rect, image, circle, icon, gradient e line com propriedades customizáveis.
Google Fonts Dinâmico
Carregamento automático de 1400+ fontes do Google Fonts sem necessidade de empacotamento.
Filtros de Imagem
Filtros predefinidos (paris, vintage, classic) aplicados via Core Image com ColorFilter.matrix.
Sistema de Escala Inteligente
Design em coordenadas fixas que escalam automaticamente para qualquer tamanho de tela.
Começar Rápido
Exemplo de JSON
{
"canvas": {
"width": 360,
"height": 640,
"backgroundColor": "#F8F9FA"
},
"elements": [
{
"type": "rect",
"x": "center",
"y": 100,
"width": 280,
"height": 200,
"color": "#FFFFFF",
"borderRadius": 20,
"zIndex": 1
},
{
"type": "text",
"content": "Hello World",
"x": "center",
"y": 150,
"fontSize": 24,
"fontFamily": "Roboto",
"weight": "bold",
"color": "#000000",
"textAlign": "center",
"zIndex": 2
}
]
}
Navegação da Documentação
Para Desenvolvedores
Especificação JSON
Formato JSON completo, propriedades do canvas e sistema de cores.
Ver Especificação →Referências Técnicas
Arquitetura
O sistema utiliza arquitetura modular com separação clara de responsabilidades e gerenciamento de estado local via StatefulWidget:
┌─────────────────────────────────────────────┐
│ HomePage │
│ (Coordenador Principal) │
└─────────────┬────────────┬──────────────────┘
│ │
┌─────────┘ └─────────┐
▼ ▼
┌──────────────────┐ ┌──────────────────┐
│ JsonEditorWidget │ │CanvasViewerWidget│
│ │ │ │
│ • Validação │◄──────►│ • Renderização │
│ • Debouncing │ │ • Interatividade │
│ • Syntax HL │ │ • Callbacks │
└──────────────────┘ └────────┬─────────┘
│
▼
┌──────────────────┐
│JsonCanvasViewer │
│ │
│ • Parse JSON │
│ • Render Elements│
│ • Gestos │
└──────────────────┘
Stack
| Tecnologia | Versão | Propósito |
|---|---|---|
| Flutter | 3.8.1+ | Framework cross-platform |
| Dart | 3.8.1+ | Linguagem de programação |
| flutter_code_editor | 0.3.0 | Editor com syntax highlighting |
| google_fonts | 6.1.0 | Carregamento dinâmico de fontes |
| highlight | 0.7.0 | Syntax highlighting JSON |
Casos de Uso
Plataformas Suportadas
| Plataforma | Status | Notas |
|---|---|---|
| Web (Chrome) | ✅ Totalmente testado | Plataforma recomendada |
| Web (Edge) | ⚠️ Parcialmente testado | Funcionalidade básica |
| Desktop | ⚠️ Não testado | Deve funcionar |
| Mobile | ❌ Não otimizado | Interface não adaptada |
Próximos Passos
Contribuindo
Esta é uma documentação viva e o projeto está em desenvolvimento ativo. Contribuições são bem-vindas!
Made with 💙 by Conty Team