pdf_kit_editor 0.1.0

A powerful visual PDF template builder for Flutter. Create receipts, documents, and reports with a drag-and-drop-like experience, supporting custom layouts, Google Fonts, and dynamic data.

pdf_kit

A powerful, visual PDF template builder for Flutter. Let users create branded receipts, invoices, and documents right inside your app — with a live preview, drag-and-drop element ordering, and dynamic data binding.

---

Features

• Embeddable Visual Editor — Drop PdfKitEditor anywhere to give users a full template designer.
• Live Preview — The PDF updates in real time as the user edits the template.
• Multiple Layouts — A4, A5, 80mm Receipt Roll, and fully Custom paper sizes.
• Dynamic Data Binding — Connect your app's JSON data to text fields, images, tables, and QR codes.
• Rich Element Library:
  • Text (static or from data, with alignment)
  • Data Fields (dynamic text keys)
  • Auto-generated QR Codes (with alignment)
  • Images (from URL, file path, or data key)
  • Tables (from a list of objects, with configurable columns and border styles)
  • Dividers and Spacers
• Google Fonts — Roboto, Lato, Open Sans, Oswald, Montserrat — switchable from the settings panel.
• Conditional Visibility — Show or hide elements based on a data flag.
• Nested Data Support — Dot-notation paths like "order.customer.name" resolve automatically.
• Mobile Responsive — The editor adapts to desktop, tablet, and phone screens.
• Configurable UI — Hide or expose share button, debug switch, settings panel, data viewer, and save button via flags.

---

Installation

dependencies:
  pdf_kit_editor: ^0.1.0

---

Quick Start — Embed the Editor

import 'package:pdf_kit_editor/pdf_layout_kit.dart';

// Your app's live data (shown in the preview)
final myData = {
  'customer_name': 'John Doe',
  'date': '2026-03-08',
  'logo_url': 'https://flutter.dev/assets/lockup_flutter_horizontal.d0515092173211776ceed19b39c2a041.png',
  'total': 'Total: \$42.00',
  'order_id': 'ORD-20260308',
  'items': [
    {'name': 'Widget Pro', 'qty': 2, 'price': 19.99},
    {'name': 'Gadget Lite', 'qty': 1, 'price': 2.02},
  ],
};

PdfKitEditor(
  data: myData,
  initialTemplate: savedTemplate, // Optional: load from your database
  onSave: (PdfTemplate template) {
    // Persist to your backend or local storage
    myDb.save(template.toJson());
  },
)

---

Saving & Loading Templates

pdf_kit gives you two ways to handle saving user templates:

1. Manual Storage (Recommended for Production)

Handle the storage yourself (e.g., uploading to Firebase, saving to SQLite, or keeping in memory). Leave useDefaultStorage: false and listen to the onSave callback:

PdfKitEditor(
  data: myData,
  initialTemplate: myStoredTemplate, // Load from your DB
  onSave: (PdfTemplate template) {
    // Convert to JSON and save to your DB
    final jsonString = jsonEncode(template.toJson());
    myDatabase.saveTemplate(jsonString);
  },
)

2. Automatic Local Storage (Great for Prototyping)

Let the package handle storage automatically on the local device using SharedPreferences.

PdfKitEditor(
  data: myData,
  useDefaultStorage: true, 
  // It will automatically load the last saved template 
  // and auto-save whenever the user presses "Save Template".
)

(Note: You can use both! If useDefaultStorage is true, the package will auto-save locally, AND still fire your onSave callback so you can sync to the cloud).

---

All PdfKitEditor Options

Parameter	Type	Default	Description
data	Map<String, dynamic>	required	Data used for live preview and in add/edit dialogs.
initialTemplate	PdfTemplate?	null	Pre-load an existing template.
onSave	ValueChanged<PdfTemplate>?	null	Called when the user taps Save Template.
onCustomPrint	Future<void> Function(Uint8List)?	null	Override the print button with your own handler.
useDefaultStorage	bool	false	Auto-save/load to device storage (no manual save needed).
hideDataViewer	bool	false	Hide the View Data button in the app bar.
hideSettingsPanel	bool	false	Hide the settings and element panel entirely.
showSaveButton	bool	true	Show the Save Template button in the panel.
showShareButton	bool	true	Show the Share button in the PDF preview toolbar.
showDebugSwitch	bool	false	Show a debug toggle that overlays bounding boxes on the preview.
appBarTitle	String?	null	Custom title for the AppBar (defaults to "PDF Kit Editor").

---

Programmatic PDF Generation

No editor needed — generate PDFs silently from any PdfTemplate:

import 'package:pdf_kit_editor/pdf_layout_kit.dart';

// Build a template in code
const template = PdfTemplate(
  id: 'invoice_v1',
  name: 'Invoice',
  elements: [
    PdfElement.text(text: 'INVOICE', alignment: PdfTextAlignment.center),
    PdfElement.text(dataKey: 'customer_name'),
    PdfElement.divider(),
    PdfElement.table(
      dataSourceKey: 'items',
      columns: {'Product': 'name', 'Qty': 'qty', 'Price': 'price'},
    ),
    PdfElement.text(dataKey: 'total', alignment: PdfTextAlignment.right),
    PdfElement.barcode(dataKey: 'order_id', alignment: PdfTextAlignment.center),
  ],
);

// Generate
final generator = PdfLayoutGenerator();
await generator.init(); // Optionally pass a custom pw.Font

final pdfBytes = await generator.generate(template, myData);

// Print or share
await Printing.layoutPdf(onLayout: (_) => pdfBytes);

---

Data Binding

The data map can be nested. Use dot-notation paths to resolve nested values:

final data = {
  'customer': {
    'name': 'Jane Smith',
    'email': '[e-mail]',
  },
  'items': [
    {'product': 'Widget', 'price': 9.99},
  ],
};

// In your template:
PdfElement.text(dataKey: 'customer.name') // → "Jane Smith"

Table elements read from a List key and automatically generate one row per item. Each column maps a header label to a field path within each list item:

PdfElement.table(
  dataSourceKey: 'items',
  columns: {'Product': 'product', 'Price': 'price'},
  borderStyle: PdfTableBorderStyle.horizontal,
)

---

Conditional Visibility

Any element can be shown or hidden based on a boolean or non-empty string value in your data:

PdfElement.text(
  text: 'PAID',
  visibleIfKey: 'is_paid', // Only renders if data['is_paid'] == true
)

---

Additional Information

See the example/ folder for a fully working Flutter app showing template storage, data binding, and all element types in action.