Overview
Building a mobile invoicing app? Your users expect to create professional invoices and send them instantly. This tutorial shows you how to add PDF invoice generation to your FlutterFlow app using TemplateFox.
We'll use a professional invoice template and connect it to your app via FlutterFlow's API Call feature. The same approach works for receipts, quotes, or any other document.
What you'll build: A "Generate Invoice" button that creates a PDF invoice with customer details, line items, and totals — then lets users download or share it.
Choose an invoice template
Start by picking an invoice template. We'll use the Modern Invoice with QR Code template — it's designed for mobile payments and includes a QR code for instant payment.
- Go to Invoice Templates
- Choose a template that fits your use case
- Click Use Template to add it to your dashboard
Other options: Freelancer Invoice for consultants, EU Corporate Invoice for European businesses, US Invoice with ACH for bank transfers.
You can also create your own template with our drag-and-drop editor. Add your logo, adjust colors, and include any fields you need.
Get your API key and template ID
You'll need two things from your TemplateFox dashboard:
Security tip: Don't hardcode your API key in the app for production. Store it in FlutterFlow's environment variables, or fetch it from your backend (Firebase Functions, Supabase Edge Functions).
Create the API Call in FlutterFlow
Now set up the API call that will generate your invoices.
3.1 — Create a new API Call
- In FlutterFlow, go to API Calls in the left sidebar
- Click + Add API Call
- Name it
generateInvoice
3.2 — Configure the request
POSThttps://api.pdftemplateapi.com/v1/pdfContent-Type: application/jsonX-API-Key: your-api-key3.3 — Set up the request body
The body contains your template ID and invoice data. Here's the structure:
3.4 — Map FlutterFlow variables
In the Body tab, click the +Variable icon next to dynamic fields. Map them to your app data:
Hardcode (static)
- •
template_id - •
company_name - •
company_address - •
company_email
Map from app (dynamic)
- •
client_name→ customer doc - •
items→ line items list - •
total→ calculated amount - •
invoice_number→ generated ID
Tip: Use FlutterFlow's Custom Functions to format dates, calculate totals, or generate invoice numbers before passing them to the API.
Trigger and handle the response
Add a "Generate Invoice" button
- Add a Button widget to your invoice page
- Set the text to "Generate Invoice" or "Download PDF"
- Add an Action → API Call
- Select your
generateInvoiceAPI call
Handle the response
The API returns the PDF URL:
Add follow-up actions to let users view or share the invoice:
Download / Open in browser
Add Launch URL action with the response url. Opens the PDF for download or viewing.
Share via native share sheet
Add Share action. Users can send the invoice via WhatsApp, email, or any other app.
Save to Firestore
Add Backend Call to save the PDF URL to your invoices collection. Useful for invoice history.
That's it! Your FlutterFlow app can now generate professional PDF invoices. Users tap a button, the invoice generates in 1-2 seconds, and they can download or share it instantly.
