Aleka est une application de dessin multiplateforme basée sur Flutter

Aleka est une application de dessin légère et rapide écrite en Flutter. Il fonctionne partout : dans le navigateur, sur le bureau (Windows, macOS, Linux) et sur les appareils mobiles (iOS, Android).

Sous le capot se trouve du pur Dart, du Matériau 3 et une attention aux détails.

Opportunités

• Dessin à main levée : traits fluides avec interpolation quadratique de Bézier.
• Palette de 15 couleurs : sélection rapide avec indication visuelle.
• Taille du pinceau : réglable avec un curseur de 1 à 30 px.
• Annuler : reculez dans vos traits.
• Effacer le canevas : en un seul clic.
• Flood Fill : BFS avec tolérance pour les bords lisses.
• Enregistrement : au format .aleka (JSON).
• Chargement : ouvrez les dessins précédemment enregistrés et continuez.
• Exportation PNG : Capturez le canevas à une résolution x 3.
• 🎬 Mode Animation : Animation image par image avec chronologie :
  • Ajout et suppression de cadres, chacun avec son propre design.
  • Durée de trame de 50 ms à 5 s.
  • Modifier le FPS : 6, 8, 12, 15, 24, 30 ou 60.
  • Exporter au format MP4 (via ffmpeg sur ordinateur, ffmpeg.wasm dans le navigateur).
• Thème sombre et clair : Matériau 3, suit le système.

Pourquoi Flutter ?

Flutter vous permet d’écrire une application pour six plates-formes sans dupliquer le code. Aleka utilise uniquement les capacités natives des SDK Dart et Flutter et un minimum de dépendances tierces : file_picker, image pour travailler avec les pixels lors du remplissage, ffmpeg_wasm pour exporter la vidéo dans le navigateur.

Architecture

Le projet adhère aux principes d’architecture propre et SOLIDE :

• PaintCanvasController – contrôle l’état des traits et des remplissages via le modèle Listener/Observer.
• PaintToolbar – composant d’interface utilisateur de la palette, du curseur et des boutons.
• AlekaFile – sérialisation/désérialisation en JSON, capture PNG.
• MovieController – modèle d’images et état d’animation.
• VideoExport : encapsule la logique d’encodage MP4 (ordinateur de bureau/Web).

Les fonctions d’E/S (saveStrokes, loadStrokes, capturePng, etc.) sont rendues injectables – elles peuvent être remplacées par des simulations pendant les tests. Le projet comporte 79 tests : vérification de la sérialisation, annulation, chargement/enregistrement, exportation PNG et vidéo, modèle d’image et chronologie.

Format de fichier .aleka

Le fichier .aleka est un JSON lisible qui peut être ouvert dans n’importe quel éditeur de texte :

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

Chaque trait stocke une couleur (ARGB32), une épaisseur et un tableau de points. Le format est versionné par le champ aleka.

Mode animation

L’une des fonctionnalités clés est l’éditeur d’animation image par image intégré. Vous dessinez un cadre, en ajoutez un nouveau, dessinez le suivant, et ainsi de suite. La chronologie affiche des vignettes et vous permet de modifier l’ordre et la durée des images. L’animation terminée peut être exportée vers MP4.

L’algorithme d’exportation parcourt toutes les images, les capture via RepaintBoundary, collecte les octets PNG et les transfère à l’encodeur. Sur le bureau, le système ffmpeg est appelé, dans le navigateur, ffmpeg.wasm est utilisé – un portage à part entière de ffmpeg vers WebAssembly, fonctionnant directement dans le bac à sable du navigateur.

Remplissage d’inondation

L’implémentation de remplissage utilise Breadth First Search (BFS) avec une tolérance de couleur (_kFillTolerance = 1000). Cela vous permet de gérer correctement les bords lisses des traits – le remplissage ne dépasse pas le contour, mais capture les pixels translucides sur la bordure. Pour un canevas vide, un remplissage solide est créé sans calculs inutiles.

Essayez

Aleka est disponible sur le web et en application native :

demensdeum.com/software/aleka/

Le code source est ouvert sous licence MIT :

github.com/demensdeum/Aleka