Search code examples
flutterdartsyncfusion

Flutter - Making a PDF viewer that would go to a particular paragraph on a particular page and highlight it


So in the app, I am currently working on a PDF + AI CHAT app, there is an AI Model that reads a PDF the user uploads. When a user asks any question related to the PDF, it gives a set of references, each of which contains the page number and the text of the paragraph it is a reference of. On clicking a reference I want to open the pdf on a new screen, and that particular page must be open and that particular text/paragraph must be highlighted. I researched a lot but couldn't find any package that works. I tried syncfusion but it is working with single-word texts only and not a whole sentence or paragraph. How do I implement this? is there any package that could help?


Solution

  • Greetings from Syncfusion team.

    Your use case can be achieved by using the syncfusion_flutter_pdf library and we have created a sample to meet your requirements. Please find the sample from the link below.

    In this sample, we obtain the page number and the paragraph text from the user.

    With this information, we use the library syncfusion_flutter_pdf library to extract all the text information on the specified page using PdfTextExtractor.

    And we are checking if any text on that page matches the given paragraph text.

    If the text is found, we are storing the bounds information (location of the text on that page) and adding a text markup annotation (HighlightAnnotation in this case) at that position.

    With the bounds information of the paragraph text, we calculate the position of the text in the PDF document (by adding all the page heights until the specified page), and we scroll to that position using the PdfViewerController.jumpTo method.

    Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/search_paragraph384452816

    Note: We have created this sample only for this use case. We have achieved the use case for continuous page layout. Similarly, you can achieve the same with Single page layout.

    For highlighting a single text, you can use the PdfViewerController.searchText method.

    Documentation: Text search in Flutter PDF Viewer widget

    If you have any questions, please contact our support team.