{"id":121,"date":"2026-07-30T06:57:47","date_gmt":"2026-07-30T06:57:47","guid":{"rendered":"https:\/\/demensdeum.com\/blog\/2026\/07\/30\/aleka\/"},"modified":"2026-07-30T06:57:47","modified_gmt":"2026-07-30T06:57:47","slug":"aleka","status":"publish","type":"post","link":"https:\/\/demensdeum.com\/blog\/pt\/2026\/07\/30\/aleka\/","title":{"rendered":"Aleka \u00e9 um aplicativo de desenho multiplataforma desenvolvido em Flutter"},"content":{"rendered":"<p><a href=\"https:\/\/demensdeum.com\/software\/aleka\/\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2026\/07\/aleka.jpg\"\/><\/a><\/p>\n<p>Aleka \u00e9 um aplicativo de desenho leve e r\u00e1pido escrito em Flutter. Funciona em qualquer lugar: no navegador, no desktop (Windows, macOS, Linux) e em dispositivos m\u00f3veis (iOS, Android).<\/p>\n<p>Sob o cap\u00f4 est\u00e1 puro Dart, Material 3 e aten\u00e7\u00e3o aos detalhes.<\/p>\n<h2>Oportunidades<\/h2>\n<ul>\n<li><b>Desenho \u00e0 m\u00e3o livre:<\/b> tra\u00e7os suaves com interpola\u00e7\u00e3o quadr\u00e1tica de B\u00e9zier.<\/li>\n<li><b>Paleta de 15 cores:<\/b> sele\u00e7\u00e3o r\u00e1pida com indica\u00e7\u00e3o visual.<\/li>\n<li><b>Tamanho do pincel:<\/b> ajust\u00e1vel com um controle deslizante de 1 a 30 px.<\/li>\n<li><b>Desfazer:<\/b> retroceda nas pinceladas.<\/li>\n<li><b>Limpe a tela:<\/b> com um clique.<\/li>\n<li><b>Preenchimento de inunda\u00e7\u00e3o:<\/b> BFS com toler\u00e2ncia para bordas suaves.<\/li>\n<li><b>Salvar:<\/b> formato <code>.aleka<\/code> (JSON).<\/li>\n<li><b>Carregando:<\/b> abra os desenhos salvos anteriormente e continue.<\/li>\n<li><b>Exporta\u00e7\u00e3o PNG:<\/b> capture tela com resolu\u00e7\u00e3o 3x.<\/li>\n<li><b>&#x1f3ac; Modo de anima\u00e7\u00e3o:<\/b> Anima\u00e7\u00e3o quadro a quadro com linha do tempo:\n<ul>\n<li>Adicionar e remover molduras, cada uma com seu pr\u00f3prio design.<\/li>\n<li>Dura\u00e7\u00e3o do quadro de 50 ms a 5 s.<\/li>\n<li>Alterar FPS: 6, 8, 12, 15, 24, 30 ou 60.<\/li>\n<li>Exporte para MP4 (via ffmpeg no desktop, ffmpeg.wasm no navegador).<\/li>\n<\/ul>\n<\/li>\n<li><b>Tema escuro e claro:<\/b> Material 3, segue o sistema.<\/li>\n<\/ul>\n<h2>Por que vibrar?<\/h2>\n<p>Flutter permite que voc\u00ea escreva um aplicativo para seis plataformas sem duplicar c\u00f3digo. Aleka usa apenas os recursos nativos do Dart e Flutter SDK e um m\u00ednimo de depend\u00eancias de terceiros: <code>file_picker<\/code>, <code>image<\/code> para trabalhar com pixels durante o preenchimento, <code>ffmpeg_wasm<\/code> para exportar v\u00eddeo no navegador.<\/p>\n<h2>Arquitetura<\/h2>\n<p>O projeto segue os princ\u00edpios da arquitetura limpa e SOLID:<\/p>\n<ul>\n<li><b>PaintCanvasController<\/b> &#8211; controla o estado dos tra\u00e7os e preenchimentos atrav\u00e9s do padr\u00e3o Ouvinte\/Observador.<\/li>\n<li><b>PaintToolbar<\/b> &#8211; componente de UI da paleta, controle deslizante e bot\u00f5es.<\/li>\n<li><b>AlekaFile<\/b> &#8211; serializa\u00e7\u00e3o\/desserializa\u00e7\u00e3o em JSON, captura PNG.<\/li>\n<li><b>MovieController<\/b> &#8211; modelo de frames e estado de anima\u00e7\u00e3o.<\/li>\n<li><b>VideoExport<\/b> &#8211; encapsula a l\u00f3gica de codifica\u00e7\u00e3o MP4 (desktop\/web).<\/li>\n<\/ul>\n<p>Fun\u00e7\u00f5es de E\/S (<code>saveStrokes<\/code>, <code>loadStrokes<\/code>, <code>capturePng<\/code>, etc.) s\u00e3o injet\u00e1veis \u200b\u200b- elas podem ser substitu\u00eddas por simula\u00e7\u00f5es durante o teste. O projeto conta com 79 testes: verifica\u00e7\u00e3o de serializa\u00e7\u00e3o, cancelamento, carregamento\/salvamento, exporta\u00e7\u00e3o de PNG e v\u00eddeo, modelo de quadro e linha do tempo.<\/p>\n<h2>Formato de arquivo .aleka<\/h2>\n<p>O arquivo <code>.aleka<\/code> \u00e9 um JSON leg\u00edvel que pode ser aberto em qualquer editor de texto:<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-unknown\" data-lang=\"unknown\"><code>  \"aleka\": \"1.0\",\n  \"strokes\": [\n    {\n      \"color\": 4278190080,\n      \"strokeWidth\": 3.0,\n      \"points\": [[100.0, 200.0], [150.0, 250.0]]\n    }\n  ]\n}\n<\/code><\/pre>\n<\/div>\n<p>Cada tra\u00e7o armazena uma cor (ARGB32), uma espessura e uma matriz de pontos. O formato \u00e9 versionado pelo campo <code>aleka<\/code>.<\/p>\n<h2>Modo de anima\u00e7\u00e3o<\/h2>\n<p>Um dos principais recursos \u00e9 o editor de anima\u00e7\u00e3o quadro a quadro integrado. Voc\u00ea desenha uma moldura, adiciona uma nova, desenha a pr\u00f3xima e assim por diante. A linha do tempo mostra miniaturas e permite alterar a ordem e a dura\u00e7\u00e3o dos quadros. A anima\u00e7\u00e3o finalizada pode ser exportada para MP4.<\/p>\n<p>O algoritmo de exporta\u00e7\u00e3o percorre todos os quadros, captura-os via <code>RepaintBoundary<\/code>, coleta bytes PNG e os transfere para o codificador. Na \u00e1rea de trabalho, o sistema \u00e9 chamado de ffmpeg, no navegador \u00e9 usado ffmpeg.wasm &#8211; uma porta completa do ffmpeg para WebAssembly, trabalhando diretamente na sandbox do navegador.<\/p>\n<h2>Preenchimento de inunda\u00e7\u00e3o<\/h2>\n<p>A implementa\u00e7\u00e3o de preenchimento usa Breadth First Search (BFS) com toler\u00e2ncia de cores (<code>_kFillTolerance = 1000<\/code>). Isso permite que voc\u00ea processe corretamente as bordas suaves dos tra\u00e7os &#8211; o preenchimento n\u00e3o flui al\u00e9m do contorno, mas captura pixels transl\u00facidos na borda. Para uma tela vazia, um preenchimento s\u00f3lido \u00e9 criado sem c\u00e1lculos desnecess\u00e1rios.<\/p>\n<h2>Tente<\/h2>\n<p>Aleka est\u00e1 dispon\u00edvel na web e como aplicativo nativo:<\/p>\n<p><a href=\"https:\/\/demensdeum.com\/software\/aleka\/\"><b>demensdeum.com\/software\/aleka\/<\/b><\/a><\/p>\n<p>O c\u00f3digo-fonte est\u00e1 aberto sob a licen\u00e7a do MIT:<\/p>\n<p><a href=\"https:\/\/github.com\/demensdeum\/Aleka\"><b>github.com\/demensdeum\/Aleka<\/b><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aleka \u00e9 um aplicativo de desenho leve e r\u00e1pido escrito em Flutter. Funciona em qualquer lugar: no navegador, no desktop (Windows, macOS, Linux) e em dispositivos m\u00f3veis (iOS, Android). Sob o cap\u00f4 est\u00e1 puro Dart, Material 3 e aten\u00e7\u00e3o aos detalhes. Oportunidades Desenho \u00e0 m\u00e3o livre: tra\u00e7os suaves com interpola\u00e7\u00e3o quadr\u00e1tica de B\u00e9zier. Paleta de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-121","post","type-post","status-publish","format-standard","hentry","category-software"],"translation":{"provider":"WPGlobus","version":"3.0.3","language":"pt","enabled_languages":["en","ru","zh","de","ja","fr","es","pt","hi"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ru":{"title":true,"content":true,"excerpt":false},"zh":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false},"ja":{"title":true,"content":true,"excerpt":false},"fr":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"pt":{"title":true,"content":true,"excerpt":false},"hi":{"title":true,"content":true,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":0,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}