How can I zoom out even further with pdfviewer flutter web/mobile?

121 Views Asked by At

I am using the SfPDFViewer, unless someone has a better library, to show a pdf. However, the maximum you can zoom out is just so the pdf fills the page. I would like to allow the users to zoom out even further adding padding around the pdf similar to how Google Drive zooms out. I've tried using some padding widgets and setting the padding based on the onZoomLevelChanged attribute from the network SfPdfViewer but nothing works very smoothly.

This is how I am initializing the pdfView.

pdfView = SfPdfViewer.network(
            music!.url!,
            controller: _pdfViewerController,
            onZoomLevelChanged: (details) {
            },
            onTap: (detail) {
              if (_opacity != 1) {
                _updateOpacity(1);
              } else {
                _updateOpacity(0);
              }
            },
          );

This is the scaffold for the screen.

return Scaffold(
      body: Stack(
        children: [
          Padding(
            padding: EdgeInsets.only(
                top: _pdfViewerController.scrollOffset.dy < preferredSize
                    ? preferredSize - _pdfViewerController.scrollOffset.dy
                    : 0),
            child: pdfView!,
          ),
          Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Opacity(
                opacity: _opacity,
                child: SizedBox.fromSize(
                  size: Size.fromHeight(preferredSize),
                  child: _opacity != 0
                      ? AppBar(
                          title: Text(music!.name),
                          actions: [
                          ],
                        )
                      : null,
                ),
              )),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Opacity(
              opacity: _opacity,
              child: Container(
                color: theme.scaffoldBackgroundColor,
                child: _opacity != 0 ? _buildProgressBar() : null,
              ),
            ),
          ),
        ],
      ),
    );

And a listener that I could add events to if needed.

void _listener() {
    final offset = _pdfViewerController.scrollOffset.dy;
    if (_offset != offset) {
      if (offset < 1) {
        _updateOpacity(1);
      } else if ((_offset - offset).abs() < .5) {
      } else if (offset > _offset) {
        _updateOpacity(_opacity - .3);
      } else {
        _updateOpacity(_opacity + .3);
      }
      setState(() {
        _offset = offset;
      });
    }
  }

Let me know if more information is needed.

My initial attempt was using the onZoomChanged method to allow them to zoom out but this process was very messy. For example if I had zoomed out a lot, the padding around the sides of the document were created. But you couldn't scroll the document on the padding. You couldn't use the padding to zoom back in. When you did zoom in for mobile, it would zoom in on the pdf as well. Nothing about this process was smooth so I am hoping to find a more intuitive way to handle this.

0

There are 0 best solutions below