Aleka — кроссплатформенное приложение для рисования на Flutter

Aleka — это лёгкое, быстрое приложение для рисования, написанное на Flutter. Оно работает везде: в браузере, на десктопе (Windows, macOS, Linux) и на мобильных устройствах (iOS, Android).

Под капотом — чистый Dart, Material 3 и внимание к деталям.

Возможности

• Рисование от руки: плавные штрихи с квадратичной интерполяцией Безье.
• Палитра из 15 цветов: быстрый выбор с визуальной индикацией.
• Размер кисти: регулируется слайдером от 1 до 30 px.
• Отмена (Undo): шаг назад по вашим штрихам.
• Очистка холста: одним нажатием.
• Заливка (Flood Fill): BFS с tolerance для сглаженных краёв.
• Сохранение: формат .aleka (JSON).
• Загрузка: открывайте ранее сохранённые рисунки и продолжайте.
• Экспорт PNG: захват холста в 3x разрешении.
• 🎬 Режим анимации: покадровая анимация с временной шкалой:
  • Добавление и удаление кадров, каждый со своим рисунком.
  • Длительность кадра от 50 мс до 5 с.
  • Смена FPS: 6, 8, 12, 15, 24, 30 или 60.
  • Экспорт в MP4 (через ffmpeg на десктопе, ffmpeg.wasm в браузере).
• Тёмная и светлая тема: Material 3, следует за системой.

Почему Flutter?

Flutter позволяет писать одно приложение для шести платформ без дублирования кода. Aleka использует только нативные возможности Dart и Flutter SDK и минимум сторонних зависимостей: file_picker, image для работы с пикселями при заливке, ffmpeg_wasm для экспорта видео в браузере.

Архитектура

Проект придерживается принципов чистой архитектуры и SOLID:

• PaintCanvasController — управляет состоянием штрихов и заливки через паттерн Listener/Observer.
• PaintToolbar — UI-компонент палитры, ползунка и кнопок.
• AlekaFile — сериализация/десериализация в JSON, захват PNG.
• MovieController — модель кадров и состояния анимации.
• VideoExport — инкапсулирует логику кодирования MP4 (десктоп/веб).

Функции ввода-вывода (saveStrokes, loadStrokes, capturePng и др.) сделаны injectable — их можно заменять на моки при тестировании. В проекте 79 тестов: проверка сериализации, отмены, загрузки/сохранения, экспорта PNG и видео, модели кадров и временной шкалы.

Формат файла .aleka

Файл .aleka — это читаемый JSON, который можно открыть в любом текстовом редакторе:

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

Каждый штрих хранит цвет (ARGB32), толщину и массив точек. Формат версионирован полем aleka.

Режим анимации

Одна из ключевых фич — встроенный редактор покадровой анимации. Вы рисуете кадр, добавляете новый, рисуете следующий — и так далее. Временная шкала показывает миниатюры, позволяет менять порядок и длительность кадров. Готовую анимацию можно экспортировать в MP4.

Алгоритм экспорта перебирает все кадры, захватывает их через RepaintBoundary, собирает PNG-байты и передаёт в энкодер. На десктопе вызывается системный ffmpeg, в браузере используется ffmpeg.wasm — полноценный порт ffmpeg в WebAssembly, работающий прямо в песочнице браузера.

Заливка (Flood Fill)

Реализация заливки использует поиск в ширину (BFS) с допуском по цвету (_kFillTolerance = 1000). Это позволяет корректно обрабатывать сглаженные края штрихов — заливка не вытекает за контур, но захватывает полупрозрачные пиксели на границе. Для пустого холста создаётся сплошная заливка без лишних вычислений.

Попробовать

Aleka доступна в вебе и как нативное приложение:

demensdeum.com/software/aleka/

Исходный код открыт под лицензией MIT:

github.com/demensdeum/Aleka