Syncfusion Flutter SfPdfViewer – UI Sample Generator
Generate Dart Code for the User's Project (default)
Trigger keywords: "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "widget", "create sample", "flutter pdfviewer".
Purpose: Scaffold a ready-to-run Flutter project with syncfusion_flutter_pdfviewer integrated and generate the requested feature code inside it — all in one pass.
Workflow:
Step 1 – Ask Clarifying Questions (once, upfront)
Before doing anything else, ask the user:
- Project target: Does a Flutter project already exist, or should a new one be created?
- File placement: Should the generated code go into an existing file (e.g.,
main.dart) or a new Dart file (e.g., pdf_viewer_sample.dart)?
- Platform: Is the app targeting mobile, desktop, or web? (Only needed to decide whether the web
index.html step is required.)
Step 2 – Create a New Flutter Project (skip if project already exists)
Run in the terminal:
flutter create pdf_viewer_app
cd pdf_viewer_app
Step 3 – Add the Syncfusion Dependency (skip if already present in pubspec.yaml)
Add under dependencies in pubspec.yaml:
dependencies:
flutter:
sdk: flutter
syncfusion_flutter_pdfviewer: ^33.2.8
Then run:
flutter pub get
Notes:
- Use the latest stable version of the package from pub.dev.
Step 4 – (Web only) Update web/index.html
If the target platform is web, add the PdfJs script inside the <body> tag of web/index.html:
<script type="module" async>
import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.min.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.worker.min.mjs";
</script>
Step 5 – Build and Write the Dart Code
- Start with
references/basic-sample.md as the base template.
- Identify the feature(s) requested and merge the relevant snippets from
references/*.md into the base.
- Follow these code-generation rules:
- Use code exactly as shown in the reference — do not alter API usage.
- Add only the APIs required by the request; do not include extras.
- Always initialise
PdfViewerController in initState() when controller-based APIs are used.
- Write the final code to the file chosen in Step 1:
- Existing file (e.g.,
main.dart): use the edit tool to insert or replace code.
- New Dart file (e.g.,
pdf_viewer_sample.dart): use the create file tool to create it.
- Never display the code only as a code block — always write it to the file using the appropriate tool.
Step 6 – Run the App
flutter run
Code References
All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.
Flow: Always start with references/basic-sample.md, then merge matched features into its structure. If no keyword matches, return only the basic sample.
| File |
Purpose |
| basic-sample.md |
Minimal SfPdfViewer with a network/asset URL, Scaffold, and AppBar. |
| magnification.md |
Configure zoom level, max zoom, double-tap zoom, and zoom callbacks using PdfViewerController and widget properties. |
| page-navigation.md |
Navigate pages programmatically using jumpToPage, nextPage, previousPage, firstPage, lastPage, and jumpTo offset methods. |
| text-search.md |
Search text, navigate results with nextInstance/previousInstance, cancel search, and customise highlight colors. |
| text-selection.md |
Enable/disable text selection, customise selection color, handle onTextSelectionChanged callback. |
| bookmark-navigation.md |
Open the built-in bookmark view and navigate to bookmarks programmatically using jumpToBookmark. |
| scrolling.md |
Programmatic scrolling using jumpTo and reading current scroll offset via scrollOffset. |
| pdfviewer-properties.md |
Common SfPdfViewer widget properties reference: canShowScrollHead, canShowPaginationDialog, interactionMode, pageLayoutMode, initialZoomLevel, onDocumentLoaded, onDocumentLoadFailed, onPageChanged, etc. |
| annotation.md |
Add, remove, select, and manage text markup (Highlight, Underline, Strikethrough, Squiggly) and Sticky Note annotations using PdfViewerController methods and annotation callbacks. |
| signaturepad.md |
Hide the built-in signature pad using canShowSignaturePadDialog and display a custom SfSignaturePad dialog via onFormFieldFocusChange to capture and assign drawn signatures to PdfSignatureFormField. |
| password-protected-pdf.md |
Open encrypted PDF documents using the password property and handle load failures with onDocumentLoadFailed. |
| link-navigation.md |
Enable/disable document link annotation navigation with enableDocumentLinkAnnotation and handle hyperlink taps using onHyperlinkClicked. |
| form-filling.md |
Fill, edit, save, export, import, and clear AcroForm fields (text box, checkbox, radio button, combo box, list box, signature) using PdfViewerController methods and form field callbacks. |
| localization.md |
Localize SfPdfViewer static UI text to any supported language using flutter_localizations, syncfusion_localizations, and MaterialApp locale configuration. |
| directionality.md |
Enable right-to-left (RTL) rendering by wrapping SfPdfViewer with the Directionality widget or setting an RTL locale in MaterialApp. |
| accessibility.md |
Make SfPdfViewer accessible via Semantics widget for screen readers, keyboard navigation shortcuts, large font support, and touch target standards. |
| gesture-callback.md |
Handle tap gestures on the PDF viewer using the onTap callback and PdfGestureDetails (page number, page position, widget position). |
1---2name: syncfusion-flutter-pdf-viewer3description: Create sample code using Syncfusion Flutter SfPdfViewer. Generate Dart/Flutter code for embedding, configuring, and loading PDF documents.4---56# Syncfusion Flutter SfPdfViewer – UI Sample Generator78## Generate Dart Code for the User's Project *(default)*910**Trigger keywords:** "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "widget", "create sample", "flutter pdfviewer".1112**Purpose:** Scaffold a ready-to-run Flutter project with `syncfusion_flutter_pdfviewer` integrated **and** generate the requested feature code inside it — all in one pass.1314**Workflow:**1516### Step 1 – Ask Clarifying Questions (once, upfront)17Before doing anything else, ask the user:181. **Project target:** Does a Flutter project already exist, or should a new one be created?192. **File placement:** Should the generated code go into an existing file (e.g., `main.dart`) or a new Dart file (e.g., `pdf_viewer_sample.dart`)?203. **Platform:** Is the app targeting mobile, desktop, or web? *(Only needed to decide whether the web `index.html` step is required.)*2122### Step 2 – Create a New Flutter Project *(skip if project already exists)*23Run in the terminal:24```bash25flutter create pdf_viewer_app26cd pdf_viewer_app27```2829### Step 3 – Add the Syncfusion Dependency *(skip if already present in `pubspec.yaml`)*30Add under `dependencies` in `pubspec.yaml`:31```yaml32dependencies:33 flutter:34 sdk: flutter35 syncfusion_flutter_pdfviewer: ^33.2.836```37Then run:38```bash39flutter pub get40```4142**Notes:**43- Use the latest stable version of the package from [pub.dev](https://pub.dev/packages/syncfusion_flutter_pdfviewer).4445### Step 4 – (Web only) Update `web/index.html`46If the target platform is web, add the PdfJs script inside the `<body>` tag of `web/index.html`:47```html48<script type="module" async>49 import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.min.mjs';50 pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.worker.min.mjs";51</script>52```5354### Step 5 – Build and Write the Dart Code551. Start with `references/basic-sample.md` as the base template.562. Identify the feature(s) requested and merge the relevant snippets from `references/*.md` into the base.573. Follow these code-generation rules:58 - Use code **exactly** as shown in the reference — do not alter API usage.59 - Add only the APIs required by the request; do not include extras.60 - Always initialise `PdfViewerController` in `initState()` when controller-based APIs are used.614. Write the final code to the file chosen in Step 1:62 - **Existing file** (e.g., `main.dart`): use the edit tool to insert or replace code.63 - **New Dart file** (e.g., `pdf_viewer_sample.dart`): use the create file tool to create it.64 - **Never** display the code only as a code block — always write it to the file using the appropriate tool.6566### Step 6 – Run the App67```bash68flutter run69```7071---7273### Code References7475All templates and operation snippets live in `references/*.md`. Each file is a focused snippet or template the agent will combine when generating samples.7677**Flow:** Always start with `references/basic-sample.md`, then merge matched features into its structure. If no keyword matches, return only the basic sample.7879| File | Purpose |80|---|---|81| **basic-sample.md** | Minimal SfPdfViewer with a network/asset URL, Scaffold, and AppBar. |82| **magnification.md** | Configure zoom level, max zoom, double-tap zoom, and zoom callbacks using `PdfViewerController` and widget properties. |83| **page-navigation.md** | Navigate pages programmatically using `jumpToPage`, `nextPage`, `previousPage`, `firstPage`, `lastPage`, and `jumpTo` offset methods. |84| **text-search.md** | Search text, navigate results with `nextInstance`/`previousInstance`, cancel search, and customise highlight colors. |85| **text-selection.md** | Enable/disable text selection, customise selection color, handle `onTextSelectionChanged` callback. |86| **bookmark-navigation.md** | Open the built-in bookmark view and navigate to bookmarks programmatically using `jumpToBookmark`. |87| **scrolling.md** | Programmatic scrolling using `jumpTo` and reading current scroll offset via `scrollOffset`. |88| **pdfviewer-properties.md** | Common SfPdfViewer widget properties reference: `canShowScrollHead`, `canShowPaginationDialog`, `interactionMode`, `pageLayoutMode`, `initialZoomLevel`, `onDocumentLoaded`, `onDocumentLoadFailed`, `onPageChanged`, etc. |89| **annotation.md** | Add, remove, select, and manage text markup (Highlight, Underline, Strikethrough, Squiggly) and Sticky Note annotations using `PdfViewerController` methods and annotation callbacks. |90| **signaturepad.md** | Hide the built-in signature pad using `canShowSignaturePadDialog` and display a custom `SfSignaturePad` dialog via `onFormFieldFocusChange` to capture and assign drawn signatures to `PdfSignatureFormField`. |91| **password-protected-pdf.md** | Open encrypted PDF documents using the `password` property and handle load failures with `onDocumentLoadFailed`. |92| **link-navigation.md** | Enable/disable document link annotation navigation with `enableDocumentLinkAnnotation` and handle hyperlink taps using `onHyperlinkClicked`. |93| **form-filling.md** | Fill, edit, save, export, import, and clear AcroForm fields (text box, checkbox, radio button, combo box, list box, signature) using `PdfViewerController` methods and form field callbacks. |94| **localization.md** | Localize SfPdfViewer static UI text to any supported language using `flutter_localizations`, `syncfusion_localizations`, and `MaterialApp` locale configuration. |95| **directionality.md** | Enable right-to-left (RTL) rendering by wrapping `SfPdfViewer` with the `Directionality` widget or setting an RTL `locale` in `MaterialApp`. |96| **accessibility.md** | Make SfPdfViewer accessible via `Semantics` widget for screen readers, keyboard navigation shortcuts, large font support, and touch target standards. |97| **gesture-callback.md** | Handle tap gestures on the PDF viewer using the `onTap` callback and `PdfGestureDetails` (page number, page position, widget position). |98---
syncfusion