Hyperlink navigation in Flutter PDF Viewer (SfPdfViewer)

28 Jul 20232 minutes to read

The SfPdfViewer allows you to open URLs or website links in the default browser. You can hide the built-in hyperlink navigation dialog or add a customized one with supported functionalities.

Hyperlink navigation dialog

You can enable or disable the hyperlink navigation using the enableHyperlinkNavigation property. The following code example explains the same.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer'),
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        enableHyperlinkNavigation: false,
      ),
    );
  }

By default, the built-in hyperlink navigation dialog will be displayed when any hyperlink is clicked. You can customize the visibility of the hyperlink navigation dialog using the canShowHyperlinkDialog property. The following code example explains the same.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer'),
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        canShowHyperlinkDialog: false,
      ),
    );
  }

Callbacks

The SfPdfViewer hyperlink navigation supports the PdfHyperlinkClickedCallback to notify when any hyperlink is clicked.

The onHyperlinkClicked callback triggers when any hyperlink in the PDF document is clicked. The PdfHyperlinkClickedDetails will return the uri clicked in the PDF document. The following code example explains the same.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer'),
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        onHyperlinkClicked: (PdfHyperlinkClickedDetails details) {
          print(details.uri);
        },
      ),
    );
  }