Is there a way to make visual customizations for widgets in a SfPdfViewer?

Question

Hey, I'm wondering whether if it is possible, and if so how to go about

Changing the default gray background color of the SfPdfViewer?
Is there a way to invert the colors of a PDF being loaded into the view i.e. text turns black ?
Changing the page navigation slider color/etc..

Thank you in advance! If this is not possible, any workaround would also be appreciated.

Deepika Ravi · Accepted Answer

Hi Pyae Sone,Regarding customizing the
background color of the SfPdfViewer﻿﻿:Yes, it is possible to customize
the background color of the SfPdfViewer. Please use the following code snippet to
customize the background color,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer')
      ),
      body: SfPdfViewerTheme(
        data: SfPdfViewerThemeData(
          backgroundColor: Colors.pink,
        ),
        child: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          key: _pdfViewerKey,
        ),
      ),
    );
  }

Regarding Is there a way to
invert the colors of a PDF is loaded into the view i.e. text turns black:At present we do not have support for night mode in SfPdfViewer.
We do not have any immediate plans to implement this feature. At the planning
stage for every release cycle, we review all open features and identify
features for implementation based on specific parameters including product
vision, technological feasibility, and customer interest. We will let you know
when this feature is implemented. The status of the feature can be tracked by
the following link,https://www.syncfusion.com/feedback/32848/support-for-night-mode
Regarding changing the page
navigation slider colorYes, it is possible to customize
the scroll head in SfPdfViewer. Please use the following code snippet to
customize the background color of the scrollhead,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter PDF Viewer')),
      body: SfPdfViewerTheme(
        data: SfPdfViewerThemeData(
            scrollHeadStyle:
                PdfScrollHeadStyle(backgroundColor:
  Colors.purple)),
        child: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          key: _pdfViewerKey,
        ),
      ),
    );
  }

Kindly refer to the following UG
documentation link to know morcustomizingustomize the scroll head in
SfPdfViewer.https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/PdfScrollHeadStyle-class.html
Regards,Deepika R

Deepika Ravi · Answer

Hi Pyae Sone,Regarding customizing the
background color of the SfPdfViewer﻿﻿:Yes, it is possible to customize
the background color of the SfPdfViewer. Please use the following code snippet to
customize the background color,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer')
      ),
      body: SfPdfViewerTheme(
        data: SfPdfViewerThemeData(
          backgroundColor: Colors.pink,
        ),
        child: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          key: _pdfViewerKey,
        ),
      ),
    );
  }

Regarding Is there a way to
invert the colors of a PDF is loaded into the view i.e. text turns black:At present we do not have support for night mode in SfPdfViewer.
We do not have any immediate plans to implement this feature. At the planning
stage for every release cycle, we review all open features and identify
features for implementation based on specific parameters including product
vision, technological feasibility, and customer interest. We will let you know
when this feature is implemented. The status of the feature can be tracked by
the following link,https://www.syncfusion.com/feedback/32848/support-for-night-mode
Regarding changing the page
navigation slider colorYes, it is possible to customize
the scroll head in SfPdfViewer. Please use the following code snippet to
customize the background color of the scrollhead,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter PDF Viewer')),
      body: SfPdfViewerTheme(
        data: SfPdfViewerThemeData(
            scrollHeadStyle:
                PdfScrollHeadStyle(backgroundColor:
  Colors.purple)),
        child: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          key: _pdfViewerKey,
        ),
      ),
    );
  }

Kindly refer to the following UG
documentation link to know more about customizing the scroll head in
SfPdfViewer.https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/PdfScrollHeadStyle-class.html
Regards,Deepika R

Pyae Sone · Answer

Hey Deepika, Thank you very much!Do i need any more dependencies for this? I have this so far:  syncfusion_flutter_pdfviewer: ^20.1.56-beta

Deepika Ravi · Answer

Hi Pyae Sone,No, this does not require additional dependencies, but to use the SfPdfViewerTheme widget you need to import 'package: syncfusion_flutter_core / theme. dart' in the dart code.Regards,Deepika R

Thoxh - Tim · Answer

Thanks, that was exactly what I searched for <3

Swetha Srikumar · Answer

Most welcome.

Digitalizze Brasil · Answer

A cor transparente não funciona bem

ImmanKumarP Palanikumar · Answer

Hi Digitalizze Brasil,Could you please share a screenshot of the issue and the expected output when you apply the transparent color? This will help us determine whether it is an issue or expected behavior.Regards,Imman Kumar P

ABDUL RAFEY WALEED 160422733033 · Answer

Can we add additional effect when changing a page, like page flip or any other animation affect for SfPdfViewer

Krithiga Perumal · Answer

Hi ABDUL RAFEY WALEED,At present, Syncfusion Flutter PDF Viewer does not support additional effects such as "page flip" when switching pages and only supports linear transitions when flipping through pages.

ABDUL RAFEY WALEED 160422733033 · Answer

But atleast can we render all the pages together initially itself, the experience is very laggy

Krithiga Perumal · Answer

Hi ABDUL RAFEY WALEED,Currently, our Flutter PDF Viewer does not support rendering all pages at once. PDF pages are retrieved from the native platform’s renderer to display in the PDF Viewer. Rendering all pages at once would increase the initial loading time and memory usage, especially for larger documents. Therefore, we render PDF pages on demand based on the visible area in the PDF Viewer. As the user scrolls, additional pages load incrementally, while previous pages are disposed of to optimize memory.To enhance the scrolling experience, our current approach includes rendering buffer pages before and after the current page. Since you mentioned the user experiencing lag, could you please share the document with us? This will help us investigate further and provide you with a better solution.If you need to share the document privately, please create a ticket in our support portal.Regards,Krithiga Perumal.