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

2026-03-10 в 8:46, admin, рубрики: dart, flutter, iOS, PDF, windows, мобильная разработка, утилита

Привет!

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

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

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

Лезть в pw.Column, pw.Row и pw.SizedBox.
Пересобирать проект.
Проверять результат (часто на реальном принтере).
Повторять до победного.

А теперь представьте, что у вас сотни касс и админ, который хочет добавить акцию в подвал чека «прямо сейчас», не дожидаясь релиза в сторах. Я решил, что хватит это терпеть, и написал 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). Пакет сам найдет значение в вашем Map.
Динамические таблицы: Вы просто указываете ключ списка (например, items), и пакет сам генерирует строки таблицы.
Conditional Visibility: Можно скрыть любой элемент (например, блок «Скидка»), если в данных по этому ключу пусто или false.
Авто-загрузка изображений: Передали URL или путь к файлу — пакет сам разберется с загрузкой и рендерингом в PDF.
Любые форматы: От чековой ленты (Roll 58/80mm) до стандартных A4/A5 или полностью кастомных размеров.

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

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

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

Просмотр переданных данных(полей) которые доступны для подключения в шаблоне.

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

Что в итоге?

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

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

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

Автор: anvi_7

Источник