How to properly change PDFs in PDF Viewer

[R]

Greetings!

I'm attempting to build a (Windows) desktop app with a "preview" feature. Here's what I have currently in mind:

• Have a row with two columns, the 1st column being the "edit" column and the 2nd column being the "preview" window. While there are no edits, the preview widget is hidden, wrapped with the Visibility widget, but with a blank PDF loaded thru SfPdfViewer.
• After any edit, the user clicks on a button, which saves the edited PDF to the temp folder with a temporary file name. This temporary file shall then be read by the SfPdfViewer and rendered in place of the blank PDF and then set the visible property of Visibility to true so as to display the "edited" PDF.

So far, the "edit" and the saving of the temporary file goes well, and if I open the said file using an external PDF viewer, the file is read OK. As another test, I created a test screen which only contains a PDF Viewer widget and the file is also read OK. For the actual program though, when I call the function to load the temp file and change the visibility to true, the PDF displayed is still the blank PDF. How should I load the new PDF file to effect the change in the "preview" widget?

Thanks in advance.

Code snippets:

Widget build(BuildContext context) {
  return Scaffold(
  body: Row(
    children: [
          Column(
              ElevatedButton(
                onPressed: () async {
                  final tmpPath = await getTemporaryDirectory();
                  String? fileName = "output.pdf";
                  fullFName = Platform.isWindows
                      ? '${tmpPath.path}\\$fileName'
                      : '${tmpPath.path}/$fileName';
                  _editPDF(); // skipping the code for this, as editing is OK
                  _pdfView(fullFName!);
                  setState(() {
                    pdfShow = true;
                  });
                },
                child: const Text("Testing"),
              ),
          ),
          Flexible(
            fit: FlexFit.tight,
            child: Visibility(
              visible: pdfShow,
              child: SfPdfViewer.file(
                File("assets/pdf/blank.pdf"),
                key: _pdfViewerKey,
                controller: pdfViewController,
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _pdfView(String filename) {
    return SizedBox(
      width: 520,
      child: SfPdfViewer.file(
        // Hard coded the filename for testing
        File("C:\\Users\\<user>\\appdata\\Local\\Temp\\output.pdf"),
        key: _pdfViewerKey,
        controller: pdfViewController,
      ),
    );
  }

Note: Some parentheses/braces might not line up as this code was just copy-pasted from the original source code. :D

Attachment: Recording_20240129_061214_97139967.7z

[ImmanKumarP Palanikumar]

Hi Thor Remoblas,

Could you please check with the below code snippet and confirm us whether the document is loaded properly after save?

Code snippet:

String? fullFName;
boolpdfShow = false;
finalPdfViewerControllerpdfViewController = PdfViewerController();
@override
Widgetbuild(BuildContextcontext) {
  returnScaffold(
    body: Row(
      children: [
        Column(children: [
          ElevatedButton(
            onPressed: () async {
              finaltmpPath = awaitgetTemporaryDirectory();
              String? fileName = "output.pdf";
              fullFName = Platform.isWindows
                  ? '${tmpPath.path}\\$fileName'
                  : '${tmpPath.path}/$fileName';
              await_editPDF(fullFName!);
              _pdfView(fullFName!);
              setState(() {
                pdfShow = true;
              });
            },
            child: constText("Testing"),
          ),
          Text('Preview'),
          pdfShow
              ? SizedBox(width: 200, height: 200, child: _pdfView(fullFName!))
              : SizedBox()
        ]),
        Flexible(
          fit: FlexFit.tight,
          child: SfPdfViewer.file(
            File("assets/sample.pdf"),
            key: _pdfViewerKey,
            controller: pdfViewController,
          ),
        )
      ],
    ),
  );
}

Widget_pdfView(Stringfilename) {
  returnSizedBox(
    width: 520,
    child: SfPdfViewer.file(
      File(filename),
    ),
  );
}

Future_editPDF(Stringpath) async {
  List<int> save = awaitpdfViewController.saveDocument();
  awaitFile(path).writeAsBytes(save);
}

Note: It is not recommended to use the same key and PdfViewerController instance for two SfPdfViewer widget.

[R]

Hello  ImmanKumarP Palanikumar,

Thanks for responding.

This is a screenshot before clicking the "Testing" button. 

And here is after clicking the button:

 

So, yes, the document loads properly after a save.

As to using the same key and PdfViewerController, I intend to use one  SfPdfViewer widget only, but the contents change and should display the new file after the _editPDF function has completed. 

[ImmanKumarP Palanikumar]

Hi Thor Remoblas,

To edit a pdf, we suggest you use the syncfusion_flutter_pdf | Flutter package (pub.dev) package.

UG link: Getting started with Flutter PDF library | Syncfusion

We have created a sample with your requirement of having one SfPdfViewer widget. Kindly check the attached sample and let us know if it meets your requirements.

Attachment: F186456_154d49c0.zip

[R]

Hi  ImmanKumarP Palanikumar,

Thank you very much. I'll try the code in a while.

As to PDF editing, I'm actually using the syncfusion_flutter_pdf package, I just didn't include it in the sample code because, well, it's actually working. :D

Again, thank you.

Update: I ran the code and it works perfectly, exactly what I needed.

--

Thor

[ImmanKumarP Palanikumar]

Hi Thor Remoblas,

Thank you for your confirmation. We are glad that your query is resolved. We are marking this ticket as solved. Feel free to contact us for any further assistance.