Bookmark navigation in Flutter PDF Viewer (SfPdfViewer)

25 Jul 20223 minutes to read

Navigate to the desired bookmark topics using the default bookmark view or the controller method programmatically.

Open and close the built-in bookmark view programmatically

The built-in bookmark view in the SfPdfViewer can be opened using the openBookmarkView method and it can be closed either by tapping the close icon or device’s back button. Also, we can close the bookmark programmatically by using the Navigator’s pop method.

Bookmark view

The following code example explains the opening of built-in bookmark view programmatically.

final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Syncfusion Flutter PdfViewer'),
      actions: <Widget>[
        IconButton(
          icon: Icon(
            Icons. bookmark,
            color: Colors.white,
          ),
          onPressed: () {
            _pdfViewerKey.currentState?.openBookmarkView();
          },
        ), 
      ],
    ),
    body: SfPdfViewer.network(
      'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
      key: _pdfViewerKey,
    ),
  );
}

You can navigate to the desired bookmark topic programmatically using the jumpToBookmark controller method. The following code example explains the same.

late PdfViewerController _pdfViewerController;
late PdfBookmark _pdfBookmark;

@override
void initState() {
  _pdfViewerController = PdfViewerController();
  super.initState();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Syncfusion Flutter PdfViewer'),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.arrow_drop_down_circle,
              color: Colors.white,
            ),
            onPressed: () {
              _pdfViewerController.jumpToBookmark(_pdfBookmark);
            },
          ),
        ],
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        controller: _pdfViewerController,
        onDocumentLoaded: (PdfDocumentLoadedDetails details) {
          _pdfBookmark = details.document.bookmarks[0];
        },
      ),
    ),
  );
}