Magnification in Flutter PDF Viewer (SfPdfViewer)

18 Aug 20213 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 between 1.0 and 3.0. 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,
    ),
  );
}

NOTE

The maximum allowed zoom level is 3.0 and if any value is set beyond that, then it will be restricted to 3.0.

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: Container(
          child: 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: Container(
          child: SfPdfViewer.network(
    'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
    onZoomLevelChanged: (PdfZoomDetails details) {
      print(details.newZoomLevel);
    },
  )));
}