Flutter-docs/Flutter/pdf-viewer/text-search.md

layout	title	description	platform	control	documentation
post	Text search in Flutter PDF Viewer widget | Syncfusion	Learn here all about text search feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.	Flutter	SfPdfViewer	ug

Text search in Flutter PDF Viewer (SfPdfViewer)

The SfPdfViewer allows you to find texts in the PDF document and navigate to all its occurrences.

Initiate text search and retrieve results

The searchText controller method is used to initiate the text search and it takes the text to be searched and TextSearchOption as parameters. This method searches for the text and highlights all the instances of the texts in the document and returns the PdfTextSearchResult object holding the result values such as total instance count, current highlighted instance index, and more. The PdfTextSearchResult object will also help you to navigate to the different searched text instances available and cancel the search operation as well.

To differentiate the highlighted texts, the current text instance highlight color will be dark, while the rest of the instances will be light. The following code example explains how to perform the text search and retrieve the results for the same.

N> Import 'package:syncfusion_flutter_pdf/pdf.dart' in the Dart code if you use the TextSearchOption parameter.

{% tabs %} {% highlight Dart %}

late PdfViewerController _pdfViewerController; late PdfTextSearchResult _searchResult;

@override void initState() { _pdfViewerController = PdfViewerController(); _searchResult = PdfTextSearchResult(); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.white, ), onPressed: () async { _searchResult = await _pdfViewerController.searchText('the', searchOption: TextSearchOption.caseSensitive); print( 'Total instance count: ${_searchResult.totalInstanceCount}'); }, ), ], ), body: SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller: _pdfViewerController)); }

{% endhighlight %} {% endtabs %}

Navigate to the next and previous instance

The nextInstance and previousInstance methods in the PdfSearchTextResult class help you to navigate to the next and previous search text instance in the PDF document. The following code example explains the same.

{% tabs %} {% highlight Dart %}

late PdfViewerController _pdfViewerController; late PdfTextSearchResult _searchResult;

@override void initState() { _pdfViewerController = PdfViewerController(); _searchResult = PdfTextSearchResult(); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.white, ), onPressed: () async { _searchResult = await _pdfViewerController.searchText('the', searchOption: TextSearchOption.caseSensitive); setState(() {}); }, ),
Visibility( visible: _searchResult.hasResult, child: IconButton( icon: Icon( Icons.keyboard_arrow_up, color: Colors.white, ), onPressed: () { _searchResult.previousInstance(); }, ), ), Visibility( visible: _searchResult.hasResult, child: IconButton( icon: Icon( Icons.keyboard_arrow_down, color: Colors.white, ), onPressed: () { _searchResult.nextInstance(); }, ), ), ], ), body: SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller:_pdfViewerController)); }

{% endhighlight %} {% endtabs %}

Cancel text search

The clear method in the PdfSearchTextResult class is used to cancel the text search operation. When the text search is in progress, this method can be used to cancel the same and clear all the highlighted texts in the SfPdfViewer. The following code example explains the same

{% tabs %} {% highlight Dart %}

late PdfViewerController _pdfViewerController; late PdfTextSearchResult _searchResult;

@override void initState() { _pdfViewerController = PdfViewerController(); _searchResult = PdfTextSearchResult(); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.white, ), onPressed: () async { _searchResult = await _pdfViewerController.searchText('the', searchOption: TextSearchOption.caseSensitive); setState(() {}); }, ), Visibility( visible: _searchResult.hasResult, child: IconButton( icon: Icon( Icons.clear, color: Colors.white, ), onPressed: () { setState(() { _searchResult.clear(); }); }, ), ),
], ), body: SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller:_pdfViewerController)); }

{% endhighlight %} {% endtabs %}

Customize the search text highlight color

The colors in which the current instance and other instances are highlighted can be customized with the help of searchTextHighlightColor property. The default highlight color is Orange [Color(0xFFE56E00)] and the current instance highlight color opacity (w.r.t this property) will be higher than the other instances. By default, the current instance highlight color opacity will be 60% and the other instances color opacity will be 20%.

The following code example explains how to customize the search text highlight color.

{% tabs %} {% highlight Dart %}

late PdfViewerController _pdfViewerController; late PdfTextSearchResult _searchResult;

@override void initState() { _pdfViewerController = PdfViewerController(); _searchResult = PdfTextSearchResult(); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.white, ), onPressed: () async { _searchResult = await _pdfViewerController.searchText('the', searchOption: TextSearchOption.caseSensitive); }, ), ], ), body: SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller:_pdfViewerController, searchTextHighlightColor: Colors.blue)); }

{% endhighlight %} {% endtabs %}

How to identify if there is no instance found for the text being searched?

The totalInstanceCount property in the PdfSearchTextResult object can be used to identify if no instance of the searched text is found in the PDF document. That is, if the totalInstanceCount returns value 0, then there is no matching instance found for the searched text. The following code explains the same.

{% tabs %} {% highlight Dart %}

late PdfViewerController _pdfViewerController; late PdfTextSearchResult _searchResult;

@override void initState() { _pdfViewerController = PdfViewerController(); _searchResult = PdfTextSearchResult(); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.white, ), onPressed: () async { _searchResult = await _pdfViewerController.searchText('pdf', searchOption: TextSearchOption.caseSensitive); if (_searchResult.totalInstanceCount == 0) { print('No matches found.'); } }, ), ], ), body: SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller: _pdfViewerController)); }

{% endhighlight %} {% endtabs %}

How to identify if a complete cycle of text search is completed?

The totalInstanceCount and currentInstanceIndex properties in the PdfSearchTextResult object can be used to identify if a complete cycle of text search is completed in the PDF document. That is, when the nextInstance method is called, you can check if the currentInstanceIndex equals the totalInstanceCount, then it can be considered that a complete cycle of text search is completed. The following code example explains the same.

{% tabs %} {% highlight Dart %}

late PdfViewerController _pdfViewerController; late PdfTextSearchResult _searchResult;

@override void initState() { _pdfViewerController = PdfViewerController(); _searchResult = PdfTextSearchResult(); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Syncfusion Flutter PDF Viewer'), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.white, ), onPressed: () async { _searchResult = await _pdfViewerController.searchText('the', searchOption: TextSearchOption.caseSensitive); setState(() {}); }, ), Visibility( visible: _searchResult.hasResult, child: IconButton( icon: Icon( Icons.clear, color: Colors.white, ), onPressed: () { setState(() { _searchResult.clear(); }); }, ), ), Visibility( visible: _searchResult.hasResult, child: IconButton( icon: Icon( Icons.keyboard_arrow_up, color: Colors.white, ), onPressed: () { _searchResult.previousInstance(); }, ), ), Visibility( visible: _searchResult.hasResult, child: IconButton( icon: Icon( Icons.keyboard_arrow_down, color: Colors.white, ), onPressed: () { _searchResult.nextInstance(); if(_searchResult.currentInstanceIndex == _searchResult.totalInstanceCount){ print('No more occurrences found.'); } }, ), ), ], ), body: SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller:_pdfViewerController)); }

{% endhighlight %} {% endtabs %}

How to create and display a custom search toolbar with the search features?

With the options available in the SfPdfViewer text search, you can easily create and display a custom search toolbar with the search features. The following code example explains the same.

In this example, initially the main toolbar or AppBar will be displayed with a search button and on pressing that, a custom search toolbar will be displayed with the following options,

• Back button - To close the search toolbar.
• Text field entry - To enter the text to be searched in the document.
• Close button - To cancel the search progress.
• Instances information text - Displays the current instance index and total instances count of the searched text.
• Previous instance search navigation button - To navigate to the previous match instance.
• Next instance search navigation button - To navigate to the next match instance.

{% tabs %} {% highlight Dart %}

import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() { runApp(MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), )); }

/// Represents the Homepage for Navigation class HomePage extends StatefulWidget { @override _HomePage createState() => _HomePage(); }

class _HomePage extends State { final PdfViewerController _pdfViewerController = PdfViewerController(); final GlobalKey _textSearchKey = GlobalKey(); late bool _showToolbar; late bool _showScrollHead;

/// Ensure the entry history of Text search. LocalHistoryEntry? _historyEntry;

@override void initState() { _showToolbar = false; _showScrollHead = true; super.initState(); }

/// Ensure the entry history of text search. void _ensureHistoryEntry() { if (_historyEntry == null) { final ModalRoute? route = ModalRoute.of(context); if (route != null) { _historyEntry = LocalHistoryEntry(onRemove: _handleHistoryEntryRemoved); route.addLocalHistoryEntry(_historyEntry!); } } }

/// Remove history entry for text search. void _handleHistoryEntryRemoved() { _textSearchKey.currentState?.clearSearch(); setState(() { _showToolbar = false; }); _historyEntry = null; }

@override Widget build(BuildContext context) { return Scaffold( appBar: _showToolbar ? AppBar( flexibleSpace: SafeArea( child: SearchToolbar( key: _textSearchKey, showTooltip: true, controller: _pdfViewerController, onTap: (Object toolbarItem) async { if (toolbarItem.toString() == 'Cancel Search') { setState(() { _showToolbar = false; _showScrollHead = true; if (Navigator.canPop(context)) { Navigator.maybePop(context); } }); } if (toolbarItem.toString() == 'noResultFound') { setState(() { _textSearchKey.currentState?._showToast = true; }); await Future.delayed(Duration(seconds: 1)); setState(() { _textSearchKey.currentState?._showToast = false; }); } }, ), ), automaticallyImplyLeading: false, backgroundColor: Color(0xFFFAFAFA), ) : AppBar( title: Text( 'Syncfusion Flutter PDF Viewer', style: TextStyle(color: Colors.black87), ), actions: [ IconButton( icon: Icon( Icons.search, color: Colors.black87, ), onPressed: () { setState(() { _showScrollHead = false; _showToolbar = true; _ensureHistoryEntry(); }); }, ), ], automaticallyImplyLeading: false, backgroundColor: Color(0xFFFAFAFA), ), body: Stack( children: [ SfPdfViewer.network( 'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf', controller: _pdfViewerController, canShowScrollHead: _showScrollHead, ), Visibility( visible: _textSearchKey.currentState?._showToast ?? false, child: Align( alignment: Alignment.center, child: Flex( direction: Axis.horizontal, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( padding: EdgeInsets.only(left: 15, top: 7, right: 15, bottom: 7), decoration: BoxDecoration( color: Colors.grey[600], borderRadius: BorderRadius.all( Radius.circular(16.0), ), ), child: Text( 'No result', textAlign: TextAlign.center, style: TextStyle( fontFamily: 'Roboto', fontSize: 16, color: Colors.white), ), ), ], ), ), ), ], ), ); } }

/// Signature for the [SearchToolbar.onTap] callback. typedef SearchTapCallback = void Function(Object item);

/// SearchToolbar widget class SearchToolbar extends StatefulWidget { ///it describe the search toolbar constructor SearchToolbar({ this.controller, this.onTap, this.showTooltip = true, Key? key, }) : super(key: key);

/// Indicates whether the tooltip for the search toolbar items need to be shown or not. final bool showTooltip;

/// An object that is used to control the [SfPdfViewer]. final PdfViewerController? controller;

/// Called when the search toolbar item is selected. final SearchTapCallback? onTap;

@override SearchToolbarState createState() => SearchToolbarState(); }

/// State for the SearchToolbar widget class SearchToolbarState extends State { int _searchTextLength = 0;

/// Indicates whether search toolbar items need to be shown or not. bool _showItem = false;

/// Indicates whether search toast need to be shown or not. bool _showToast = false;

///An object that is used to retrieve the current value of the TextField. final TextEditingController _editingController = TextEditingController();

/// An object that is used to retrieve the text search result. PdfTextSearchResult _pdfTextSearchResult = PdfTextSearchResult();

///An object that is used to obtain keyboard focus and to handle keyboard events. FocusNode? focusNode;

@override void initState() { super.initState();

focusNode = FocusNode();
focusNode?.requestFocus();

}

@override void dispose() { // Clean up the focus node when the Form is disposed. focusNode?.dispose(); super.dispose(); }

///Clear the text search result void clearSearch() { _pdfTextSearchResult.clear(); }

///Display the Alert dialog to search from the beginning void _showSearchAlertDialog(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( insetPadding: EdgeInsets.all(0), title: Text('Search Result'), content: Container( width: 328.0, child: Text( 'No more occurrences found. Would you like to continue to search from the beginning?')), actions: [ TextButton( onPressed: () { setState(() { _pdfTextSearchResult.nextInstance(); }); Navigator.of(context).pop(); }, child: Text( 'YES', style: TextStyle( color: Color(0x00000000).withOpacity(0.87), fontFamily: 'Roboto', fontStyle: FontStyle.normal, fontWeight: FontWeight.w500, decoration: TextDecoration.none), ), ), TextButton( onPressed: () { setState(() { _pdfTextSearchResult.clear(); _editingController.clear(); _showItem = false; focusNode?.requestFocus(); }); Navigator.of(context).pop(); }, child: Text( 'NO', style: TextStyle( color: Color(0x00000000).withOpacity(0.87), fontFamily: 'Roboto', fontStyle: FontStyle.normal, fontWeight: FontWeight.w500, decoration: TextDecoration.none), ), ), ], ); }, ); }

@override Widget build(BuildContext context) { return Row( children: [ Material( color: Colors.transparent, child: IconButton( icon: Icon( Icons.arrow_back, color: Color(0x00000000).withOpacity(0.54), size: 24, ), onPressed: () { widget.onTap?.call('Cancel Search'); _editingController.clear(); _pdfTextSearchResult.clear(); }, ), ), Flexible( child: TextFormField( style: TextStyle( color: Color(0x00000000).withOpacity(0.87), fontSize: 16), enableInteractiveSelection: false, focusNode: focusNode, keyboardType: TextInputType.text, textInputAction: TextInputAction.search, controller: _editingController, decoration: InputDecoration( border: InputBorder.none, hintText: 'Find...', hintStyle: TextStyle(color: Color(0x00000000).withOpacity(0.34)), ), onChanged: (text) { if (_searchTextLength < _editingController.value.text.length) { setState(() {}); _searchTextLength = _editingController.value.text.length; } if (_editingController.value.text.length < _searchTextLength) { setState(() { _showItem = false; }); } }, onFieldSubmitted: (String value) async { _pdfTextSearchResult = await widget.controller!.searchText(_editingController.text); if (_pdfTextSearchResult.totalInstanceCount == 0) { widget.onTap?.call('noResultFound'); } else { setState(() { _showItem = true; }); } }, ), ), Visibility( visible: _editingController.text.isNotEmpty, child: Material( color: Colors.transparent, child: IconButton( icon: Icon( Icons.clear, color: Color.fromRGBO(0, 0, 0, 0.54), size: 24, ), onPressed: () { setState(() { _editingController.clear(); _pdfTextSearchResult.clear(); widget.controller!.clearSelection(); _showItem = false; focusNode!.requestFocus(); }); widget.onTap!.call('Clear Text'); }, tooltip: widget.showTooltip ? 'Clear Text' : null, ), ), ), Visibility( visible: _showItem, child: Row( children: [ Text( '${_pdfTextSearchResult.currentInstanceIndex}', style: TextStyle( color: Color.fromRGBO(0, 0, 0, 0.54).withOpacity(0.87), fontSize: 16), ), Text( ' of ', style: TextStyle( color: Color.fromRGBO(0, 0, 0, 0.54).withOpacity(0.87), fontSize: 16), ), Text( '${_pdfTextSearchResult.totalInstanceCount}', style: TextStyle( color: Color.fromRGBO(0, 0, 0, 0.54).withOpacity(0.87), fontSize: 16), ), Material( color: Colors.transparent, child: IconButton( icon: Icon( Icons.navigate_before, color: Color.fromRGBO(0, 0, 0, 0.54), size: 24, ), onPressed: () { setState(() { _pdfTextSearchResult.previousInstance(); }); widget.onTap!.call('Previous Instance'); }, tooltip: widget.showTooltip ? 'Previous' : null, ), ), Material( color: Colors.transparent, child: IconButton( icon: Icon( Icons.navigate_next, color: Color.fromRGBO(0, 0, 0, 0.54), size: 24, ), onPressed: () { setState(() { if (_pdfTextSearchResult.currentInstanceIndex == _pdfTextSearchResult.totalInstanceCount && _pdfTextSearchResult.currentInstanceIndex != 0 && _pdfTextSearchResult.totalInstanceCount != 0) { _showSearchAlertDialog(context); } else { widget.controller!.clearSelection(); _pdfTextSearchResult.nextInstance(); } }); widget.onTap!.call('Next Instance'); }, tooltip: widget.showTooltip ? 'Next' : null, ), ), ], ), ), ], ); } }

{% endhighlight %} {% endtabs %}