Magnification in Flutter PDF Viewer (SfPdfViewer)

12 Mar 20244 minutes to read

The content of a document can be zoomed in and out either by pinch to zoom or changing the zoom level factor programmatically.

Change the zoom level factor programmatically

You can change or control the zoom level factor programmatically using the zoomLevel property. The zoom level factor value can be set to 1.0 and above. The default value is 1.0. The following code example explains the same.

late PdfViewerController _pdfViewerController;

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

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

Set and adjust the maximum zoom level

The SfPdfViewer allows you to set and adjust the maximum zoom level for the PDF document being displayed using the maxZoomLevel property. The following code example explains the same.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', 
              maxZoomLevel: 5));
}

Active viewport rendering at higher zoom levels

With the support of active viewport rendering, at higher zoom levels, only the parts of the PDF file that are visible on-screen are rendered, ignoring the parts outside the viewport. The mode is automatically enabled when the page size or zoom increases beyond the zoom level of 2. This approach will be helpful to open large-size pages containing PDF documents at higher zoom levels.

Enable or disable the double-tap zoom.

By default, the SfPdfViewer will be zoomed in and out when double-tapped. You can enable or disable the double-tap zoom using the enableDoubleTapZooming property. The following code example explains the same.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.network(
              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', 
              enableDoubleTapZooming: false));
}

NOTE

On a desktop web browser, this enableDoubleTapZooming property will have no effect on mouse interaction.

Callbacks

The SfPdfViewer magnification supports the PdfZoomLevelChangedCallback to notify the zoom level changes.

Zoom level changed callback

The onZoomLevelChanged callback triggers when the zoom level is changed in the SfPdfViewer. That is,

• When the pinch zoom is performed.
• When the double-tap zoom is performed.
• When the zoomLevel property is changed.

The PdfZoomDetails will return the oldZoomLevel title and newZoomLevel values. The following code example explains the same.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfPdfViewer.network(
    'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
    onZoomLevelChanged: (PdfZoomDetails details) {
      print(details.newZoomLevel);
    },
  ));
}