Flutter中如何使用flutter_pdf_annotation实现PDF标注功能

在Flutter项目中集成flutter_pdf_annotation插件时遇到了问题：

  1. 如何正确添加文本标注和高亮注释到PDF文档？
  2. 点击保存后标注无法持久化，是否需要手动处理文件存储？
  3. 插件是否支持自由绘图或自定义形状的注释？
  4. 在Android/iOS上渲染标注时出现位置偏移，如何校准坐标系统？
  5. 能否通过示例代码演示完整的标注->保存->重新加载流程？
2 回复

在Flutter中使用flutter_pdf_annotation实现PDF标注，步骤如下：

  1. 添加依赖到pubspec.yaml：
dependencies:
  flutter_pdf_annotation: ^最新版本
  1. 导入包：
import 'package:flutter_pdf_annotation/flutter_pdf_annotation.dart';
  1. 使用PDFAnnotationWidget加载PDF并启用标注：
PDFAnnotationWidget(
  filePath: 'path/to/pdf',
  onAnnotationAdded: (annotation) {
    // 处理标注添加
  },
)
  1. 通过手势交互添加标注，支持画笔、高亮等工具。

需注意文件路径权限和PDF渲染兼容性。

更多关于Flutter中如何使用flutter_pdf_annotation实现PDF标注功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用flutter_pdf_annotation库实现PDF标注功能，主要包括以下步骤：

1. 添加依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_pdf_annotation: ^最新版本号

运行 flutter pub get 安装。

2. 基本用法

import 'package:flutter_pdf_annotation/flutter_pdf_annotation.dart';

class PDFAnnotationScreen extends StatefulWidget {
  @override
  _PDFAnnotationScreenState createState() => _PDFAnnotationScreenState();
}

class _PDFAnnotationScreenState extends State<PDFAnnotationScreen> {
  final PdfAnnotationController _controller = PdfAnnotationController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PdfAnnotationWidget(
        controller: _controller,
        filePath: "assets/sample.pdf", // PDF文件路径
      ),
    );
  }
}

3. 添加标注功能

// 添加文本标注
_controller.addTextAnnotation(
  TextAnnotation(
    text: '标注内容',
    position: Offset(100, 100),
    pageNumber: 1,
  ),
);

// 添加高亮标注
_controller.addHighlightAnnotation(
  HighlightAnnotation(
    rect: Rect.fromLTWH(50, 50, 100, 20),
    pageNumber: 1,
    color: Colors.yellow,
  ),
);

// 添加手绘标注
_controller.addFreehandAnnotation(
  FreehandAnnotation(
    points: [Offset(10, 10), Offset(50, 50)],
    pageNumber: 1,
    color: Colors.red,
    strokeWidth: 2,
  ),
);

4. 保存和加载标注

// 保存标注到文件
await _controller.saveAnnotations('annotations.json');

// 从文件加载标注
await _controller.loadAnnotations('annotations.json');

5. 完整示例

class PDFAnnotationScreen extends StatefulWidget {
  @override
  _PDFAnnotationScreenState createState() => _PDFAnnotationScreenState();
}

class _PDFAnnotationScreenState extends State<PDFAnnotationScreen> {
  final PdfAnnotationController _controller = PdfAnnotationController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF标注'),
        actions: [
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () => _controller.saveAnnotations('annotations.json'),
          ),
        ],
      ),
      body: PdfAnnotationWidget(controller: _controller, filePath: "assets/sample.pdf"),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTextAnnotation,
        child: Icon(Icons.edit),
      ),
    );
  }

  void _addTextAnnotation() {
    _controller.addTextAnnotation(
      TextAnnotation(
        text: '示例标注',
        position: Offset(100, 100),
        pageNumber: 1,
        color: Colors.blue,
      ),
    );
  }
}

注意事项：

  1. 确保PDF文件路径正确
  2. 标注数据需要单独保存和管理
  3. 不同标注类型有不同的参数配置
  4. 支持撤销/重做功能可通过控制器实现

这个库提供了完整的PDF标注解决方案，包括文本、高亮、下划线、手绘等多种标注类型。

回到顶部