syncfusion-flutter-pdf-viewer

Syncfusion Flutter SfPdfViewer – UI サンプルジェネレーター

ユーザーのプロジェクト向けに Dart コードを生成する (デフォルト)

トリガーキーワード： "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "widget", "create sample", "flutter pdfviewer"。

目的： syncfusion_flutter_pdfviewer を統合した実行可能な Flutter プロジェクトを用意し、リクエストされた機能のコードもプロジェクト内に生成します。これらを一度に行います。

ワークフロー：

ステップ 1 – 確認の質問をする（一度だけ、最初に）

ほかの作業を始める前に、ユーザーに以下を尋ねます。

1. プロジェクトの対象： 既存の Flutter プロジェクトがありますか？ それとも新しく作成しますか？
2. ファイルの配置： 生成したコードを既存のファイル（例：main.dart）に配置しますか？ それとも新しい Dart ファイル（例：pdf_viewer_sample.dart）に配置しますか？
3. プラットフォーム： アプリの対象はモバイル、デスクトップ、Web のどれですか？ (Web の index.html の更新が必要かどうかを判断するためにのみ使用します。)

ステップ 2 – 新しい Flutter プロジェクトを作成する (既存のプロジェクトがある場合は省略)

ターミナルで実行します。

flutter create pdf_viewer_app
cd pdf_viewer_app

ステップ 3 – Syncfusion の依存関係を追加する (pubspec.yaml にすでにある場合は省略)

pubspec.yaml の dependencies に追加します。

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_pdfviewer: ^33.2.8

次に実行します。

flutter pub get

注：

• pub.dev からパッケージの最新の安定版を使用します。

ステップ 4 – （Web のみ）web/index.html を更新する

対象プラットフォームが Web の場合は、web/index.html の <body> タグ内に PdfJs スクリプトを追加します。

<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>

ステップ 5 – Dart コードを作成して書き込む

1. ベーステンプレートとして references/basic-sample.md を使用します。
2. リクエストされた機能を特定し、references/*.md から該当するスニペットをベースに組み込みます。
3. 以下のコード生成ルールに従います。
   • 参照先に示されたコードをそのまま使用します。API の使い方を変更しないでください。
   • リクエストに必要な API のみを追加し、余分なものは含めないでください。
   • コントローラーベースの API を使用する場合は、必ず initState() で PdfViewerController を初期化します。
4. ステップ 1 で選択したファイルに最終的なコードを書き込みます。
   • 既存のファイル（例：main.dart）：編集ツールを使ってコードを挿入または置き換えます。
   • 新しい Dart ファイル（例：pdf_viewer_sample.dart）：ファイル作成ツールを使って作成します。
   • コードブロックとして表示するだけにしてはいけません。必ず適切なツールを使ってファイルに書き込みます。

ステップ 6 – アプリを実行する

flutter run

---

コードリファレンス

すべてのテンプレートと操作スニペットは references/*.md にあります。各ファイルには、エージェントがサンプルを生成する際に組み合わせる、目的を絞ったスニペットまたはテンプレートが含まれています。

フロー： 常に references/basic-sample.md から始め、一致する機能をその構造に組み込みます。キーワードが一致しない場合は、基本サンプルのみを返します。

ファイル	目的
basic-sample.md	ネットワーク／アセット URL、Scaffold、AppBar を備えた最小構成の SfPdfViewer。
magnification.md	PdfViewerController とウィジェットのプロパティを使用して、ズームレベル、最大ズーム、ダブルタップズーム、ズームコールバックを設定します。
page-navigation.md	jumpToPage、nextPage、previousPage、firstPage、lastPage、jumpTo オフセットメソッドを使用して、プログラムからページを移動します。
text-search.md	テキストを検索し、nextInstance／previousInstance で検索結果を移動し、検索をキャンセルし、ハイライトの色をカスタマイズします。
text-selection.md	テキスト選択を有効化／無効化し、選択色をカスタマイズし、onTextSelectionChanged コールバックを処理します。
bookmark-navigation.md	組み込みのブックマークビューを開き、jumpToBookmark を使用してプログラムからブックマークへ移動します。
scrolling.md	jumpTo を使用してプログラムからスクロールし、scrollOffset で現在のスクロールオフセットを取得します。
pdfviewer-properties.md	一般的な SfPdfViewer ウィジェットのプロパティに関するリファレンスです。canShowScrollHead、canShowPaginationDialog、interactionMode、pageLayoutMode、initialZoomLevel、onDocumentLoaded、onDocumentLoadFailed、onPageChanged などが含まれます。
annotation.md	PdfViewerController のメソッドと注釈コールバックを使用して、テキストマークアップ（ハイライト、下線、取り消し線、波線）と付箋注釈を追加、削除、選択、管理します。
signaturepad.md	canShowSignaturePadDialog で組み込みの署名パッドを非表示にし、onFormFieldFocusChange を介してカスタム SfSignaturePad ダイアログを表示し、描画した署名を取得して PdfSignatureFormField に割り当てます。
password-protected-pdf.md	password プロパティを使用して暗号化された PDF ドキュメントを開き、onDocumentLoadFailed で読み込み失敗を処理します。
link-navigation.md	enableDocumentLinkAnnotation でドキュメントのリンク注釈による移動を有効化／無効化し、onHyperlinkClicked でハイパーリンクのタップを処理します。
form-filling.md	PdfViewerController のメソッドとフォームフィールドのコールバックを使用して、AcroForm フィールド（テキストボックス、チェックボックス、ラジオボタン、コンボボックス、リストボックス、署名）への入力、編集、保存、エクスポート、インポート、クリアを行います。
localization.md	flutter_localizations、syncfusion_localizations、MaterialApp のロケール設定を使用して、SfPdfViewer の静的 UI テキストをサポートされている任意の言語にローカライズします。
directionality.md	SfPdfViewer を Directionality ウィジェットでラップするか、MaterialApp に RTL の locale を設定して、右から左（RTL）の表示を有効にします。
accessibility.md	スクリーンリーダー用の Semantics ウィジェット、キーボードナビゲーションショートカット、大きなフォントへの対応、タッチターゲットの標準を通じて、SfPdfViewer をアクセシブルにします。
gesture-callback.md	onTap コールバックと PdfGestureDetails（ページ番号、ページ上の位置、ウィジェット上の位置）を使用して、PDF ビューアー上のタップジェスチャーを処理します。

---