Guides

Page Navigation

When using the CPDFReaderWidget component to display a PDF, the CPDFReaderWidgetController can be used to perform the following actions:

Navigate to a Specific Page

await _controller.setDisplayPageIndex(pageIndex);

When you need to navigate to a specific page and simultaneously highlight certain content (for example, highlighting an annotation when clicked), you can use the rectList parameter of setDisplayPageIndex to draw rectangles on the page.

The following example shows how to jump to the page containing an annotation and highlight the annotation area with a rectangle:

final pageIndex = 0;
CPDFPage page = controller.document.pageAtIndex(pageIndex);
final pageAnnotations = await page.getAnnotations();
final annotation = pageAnnotations[0];
await controller.setDisplayPageIndex(pageIndex: annotation.page, rectList: [annotation.rect]);

// Clear highlight
await controller.clearDisplayRect();

Example Result:

Android	iOS

Get the Current Page Index

int currentPageIndex = await _controller.getCurrentPageIndex();

You can also set a page number listener when using CPDFReaderWidget to get the current sliding page number in real time.

CPDFReaderWidget(
  document: widget.documentPath,
  configuration: CPDFConfiguration(),
  onCreated: (controller) {

  },
  onPageChanged: (pageIndex){
    debugPrint('pageIndex:${pageIndex}');
  },
)