Как я перестал верстать чеки в коде и написал визуальный редактор шаблонов для Flutter

Привет!

Если вы хоть раз писали приложение для ритейла, склада или кафе на Flutter, то наверняка сталкивались с «тихим ужасом» — версткой документов для печати. Пакет pdf прекрасен, но когда дело доходит до реализации десятого варианта чека для термопринтера 80мм, энтузиазм быстро угасает.

В чем главная боль?

Обычно верстка документа зашита прямо в код. Чтобы изменить размер шрифта или передвинуть логотип, нужно:

1. Лезть в pw.Column, pw.Row и pw.SizedBox.

2. Пересобирать проект.

3. Проверять результат (часто на реальном принтере).

4. Повторять до победного.

А теперь представьте, что у вас сотни касс и админ, который хочет добавить акцию в подвал чека «прямо сейчас», не дожидаясь релиза в сторах. Я решил, что хватит это терпеть, и написал pdf_kit_editor — визуальный конструктор, который отделяет дизайн документа от данных.

Идея: Шаблон как данные

Суть проста: мы создаем скелет документа (Template) в визуальном редакторе, сохраняем его в JSON, а в момент печати просто «наливаем» в него живые данные из приложения.

Вот как это выглядит в коде для разработчика:

PdfKitEditor(
  data: myReceiptData, // Map с данными для превью
  onSave: (template) {
    // Сохраняем JSON в базу
    saveToDb(template.toJson());
  },
  // Ну или просто ставим этот флаг true что бы не возиться сохранениями)
  // Под капотом shared_preferences все сделает за нас
  useDefaultStorage: true,
)

Что под капотом?

При разработке я придерживался принципа Zero-Bloat (насколько это возможно). Я осознанно отказался от использования любых внешних стейт-менеджеров — в пакете нет ни BLoC, ни Provider, ни даже ValueNotifier. Весь проект построен на чистом, нативном Flutter.

Почему это важно:

• 📦 Никакого «жира»: Ваше приложение не увеличится в размере из-за лишних зависимостей пакета.

• 🛠️ Полная совместимость: Пакет не будет конфликтовать с вашей архитектурой, будь то чистый setState, Riverpod или GetX.

• ⚡ Прозрачность: Код максимально понятен любому Flutter-разработчику, так как использует базовые кирпичики самого фреймворка.

Ключевые фичи, которые экономят время:

• mart Data Binding: Поддержка вложенных данных через dot-notation (например, order.customer.name ^[1]). Пакет сам найдет значение в вашем Map.

• Динамические таблицы: Вы просто указываете ключ списка (например, items), и пакет сам генерирует строки таблицы.

• Conditional Visibility: Можно скрыть любой элемент (например, блок «Скидка»), если в данных по этому ключу пусто или false.

• Авто-загрузка изображений: Передали URL или путь к файлу — пакет сам разберется с загрузкой и рендерингом в PDF.

• Любые форматы: От чековой ленты (Roll 58/80mm) до стандартных A4/A5 или полностью кастомных размеров.

Предпросмотр в реальном времени

Самое приятное — это Live Preview. Админ двигает ползунок размера шрифта или меняет выравнивание, и PDF тут же обновляется. Больше не нужно гадать, влезет ли текст в ширину ленты.

Для поддержки кириллицы и спецсимволов я добавил интеграцию с Google Fonts. Вам не нужно мучаться с подгрузкой .ttf файлов вручную — всё работает из коробки.

Что в итоге?

Разработка превращается из «двигания пикселей в коде» в предоставление пользователю готового инструмента. Вы даете клиенту свободу менять дизайн, а себе освобождаете время для более интересных задач, чем верстка инвойсов.

Пакет открытый, и я буду очень рад фидбеку, баг-репортам и идеям по развитию.

🔗 Ссылка на pub.dev ^[2]: [https://pub.dev/packages/pdf_kit_editor ^[3]]