Aleka é um aplicativo de desenho multiplataforma desenvolvido em Flutter

Aleka é um aplicativo de desenho leve e rápido escrito em Flutter. Funciona em qualquer lugar: no navegador, no desktop (Windows, macOS, Linux) e em dispositivos móveis (iOS, Android).

Sob o capô está puro Dart, Material 3 e atenção aos detalhes.

Oportunidades

• Desenho à mão livre: traços suaves com interpolação quadrática de Bézier.
• Paleta de 15 cores: seleção rápida com indicação visual.
• Tamanho do pincel: ajustável com um controle deslizante de 1 a 30 px.
• Desfazer: retroceda nas pinceladas.
• Limpe a tela: com um clique.
• Preenchimento de inundação: BFS com tolerância para bordas suaves.
• Salvar: formato .aleka (JSON).
• Carregando: abra os desenhos salvos anteriormente e continue.
• Exportação PNG: capture tela com resolução 3x.
• 🎬 Modo de animação: Animação quadro a quadro com linha do tempo:
  • Adicionar e remover molduras, cada uma com seu próprio design.
  • Duração do quadro de 50 ms a 5 s.
  • Alterar FPS: 6, 8, 12, 15, 24, 30 ou 60.
  • Exporte para MP4 (via ffmpeg no desktop, ffmpeg.wasm no navegador).
• Tema escuro e claro: Material 3, segue o sistema.

Por que vibrar?

Flutter permite que você escreva um aplicativo para seis plataformas sem duplicar código. Aleka usa apenas os recursos nativos do Dart e Flutter SDK e um mínimo de dependências de terceiros: file_picker, image para trabalhar com pixels durante o preenchimento, ffmpeg_wasm para exportar vídeo no navegador.

Arquitetura

O projeto segue os princípios da arquitetura limpa e SOLID:

• PaintCanvasController – controla o estado dos traços e preenchimentos através do padrão Ouvinte/Observador.
• PaintToolbar – componente de UI da paleta, controle deslizante e botões.
• AlekaFile – serialização/desserialização em JSON, captura PNG.
• MovieController – modelo de frames e estado de animação.
• VideoExport – encapsula a lógica de codificação MP4 (desktop/web).

Funções de E/S (saveStrokes, loadStrokes, capturePng, etc.) são injetáveis ​​- elas podem ser substituídas por simulações durante o teste. O projeto conta com 79 testes: verificação de serialização, cancelamento, carregamento/salvamento, exportação de PNG e vídeo, modelo de quadro e linha do tempo.

Formato de arquivo .aleka

O arquivo .aleka é um JSON legível que pode ser aberto em qualquer editor de texto:

  "aleka": "1.0",
  "strokes": [
    {
      "color": 4278190080,
      "strokeWidth": 3.0,
      "points": [[100.0, 200.0], [150.0, 250.0]]
    }
  ]
}

Cada traço armazena uma cor (ARGB32), uma espessura e uma matriz de pontos. O formato é versionado pelo campo aleka.

Modo de animação

Um dos principais recursos é o editor de animação quadro a quadro integrado. Você desenha uma moldura, adiciona uma nova, desenha a próxima e assim por diante. A linha do tempo mostra miniaturas e permite alterar a ordem e a duração dos quadros. A animação finalizada pode ser exportada para MP4.

O algoritmo de exportação percorre todos os quadros, captura-os via RepaintBoundary, coleta bytes PNG e os transfere para o codificador. Na área de trabalho, o sistema é chamado de ffmpeg, no navegador é usado ffmpeg.wasm – uma porta completa do ffmpeg para WebAssembly, trabalhando diretamente na sandbox do navegador.

Preenchimento de inundação

A implementação de preenchimento usa Breadth First Search (BFS) com tolerância de cores (_kFillTolerance = 1000). Isso permite que você processe corretamente as bordas suaves dos traços – o preenchimento não flui além do contorno, mas captura pixels translúcidos na borda. Para uma tela vazia, um preenchimento sólido é criado sem cálculos desnecessários.

Tente

Aleka está disponível na web e como aplicativo nativo:

demensdeum.com/software/aleka/

O código-fonte está aberto sob a licença do MIT:

github.com/demensdeum/Aleka