| name | syncfusion-flutter-pdf-viewer |
| description | Create sample code using Syncfusion Flutter SfPdfViewer. Generate Dart/Flutter code for embedding, configuring, and loading PDF documents. |
| compatibility | Flutter 3.x+, syncfusion_flutter_pdfviewer |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29"} |
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 . |
