Skip to content

Commit f5ebac8

Browse files
ramkumarsyncramkumarsync
authored
Merge pull request #326 from syncfusion-content/FLUT-6661-Hyperlink-and-RTL
FLUT-6661 - [Feature] Added the hyperlink and RTL support in UG for SfPdfViewer
2 parents 4578028 + f99e1c4 commit f5ebac8

File tree

5 files changed

+222
-0
lines changed

5 files changed

+222
-0
lines changed

‎Flutter/pdf-viewer/hyperlink-navigation.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
layout: post
3+
title: Hyperlink navigation in Flutter PDF Viewer widget | Syncfusion
4+
description: Learn here all about the hyperlink navigation feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
5+
platform: Flutter
6+
control: SfPdfViewer
7+
documentation: ug
8+
---
9+
10+
# Hyperlink navigation in Flutter PDF Viewer (SfPdfViewer)
11+
12+
The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to open URLs or website links in the default browser. You can hide the built-in hyperlink navigation dialog or add a customized one with supported functionalities.
13+
14+
![Hyperlink navigation dialog](images/hyperlink-navigation/hyperlink_navigation_dialog.jpg)
15+
16+
## Enable or disable the hyperlink navigation
17+
18+
You can enable or disable the hyperlink navigation using the `enableHyperlinkNavigation` property. The following code example explains the same.
19+
20+
{% tabs %}
21+
{% highlight dart hl_lines="9" %}
22+
23+
@override
24+
Widget build(BuildContext context) {
25+
return Scaffold(
26+
appBar: AppBar(
27+
title: const Text('Syncfusion Flutter PDF Viewer'),
28+
),
29+
body: SfPdfViewer.network(
30+
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
31+
enableHyperlinkNavigation: false,
32+
),
33+
);
34+
}
35+
36+
{% endhighlight %}
37+
{% endtabs %}
38+
39+
## Customize the visibility of the hyperlink navigation dialog
40+
41+
By default, the built-in hyperlink navigation dialog will be displayed when any hyperlink is clicked. You can customize the visibility of the hyperlink navigation dialog using the `canShowHyperlinkDialog property.` The following code example explains the same.
42+
43+
{% tabs %}
44+
{% highlight dart hl_lines="9" %}
45+
46+
@override
47+
Widget build(BuildContext context) {
48+
return Scaffold(
49+
appBar: AppBar(
50+
title: const Text('Syncfusion Flutter PDF Viewer'),
51+
),
52+
body: SfPdfViewer.network(
53+
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
54+
canShowHyperlinkDialog: false,
55+
),
56+
);
57+
}
58+
59+
{% endhighlight %}
60+
{% endtabs %}
61+
62+
## Callbacks
63+
64+
The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) hyperlink navigation supports the `PdfHyperlinkClickedCallback` to notify when any hyperlink is clicked.
65+
66+
### Hyperlink clicked callback
67+
68+
The `onHyperlinkClicked` callback triggers when any hyperlink in the PDF document is clicked. The `PdfHyperlinkClickedDetails` will return the `uri` clicked in the PDF document. The following code example explains the same.
69+
70+
{% tabs %}
71+
{% highlight dart hl_lines="9 10" %}
72+
73+
@override
74+
Widget build(BuildContext context) {
75+
return Scaffold(
76+
appBar: AppBar(
77+
title: const Text('Syncfusion Flutter PDF Viewer'),
78+
),
79+
body: SfPdfViewer.network(
80+
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
81+
onHyperlinkClicked: (PdfHyperlinkClickedDetails details) {
82+
print(details.uri);
83+
},
84+
),
85+
);
86+
}
87+
88+
{% endhighlight %}
89+
{% endtabs %}

‎Flutter/pdf-viewer/images/hyperlink-navigation/hyperlink_navigation_dialog.jpg

89.3 KB
Loading

‎Flutter/pdf-viewer/right-to-left.md

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
layout: post
3+
title: RTL support in Flutter PDF Viewer widget | Syncfusion
4+
description: Learn here all about the Right to Left (RTL) support in Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
5+
platform: flutter
6+
control: SfPdfViewer
7+
documentation: ug
8+
---
9+
10+
# Right to Left (RTL) in Flutter PDF Viewer (SfPdfViewer)
11+
12+
The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) supports right-to-left rendering. All the user interface elements will be rendered based on LTR and RTL direction, and the functionalities like text search and copying text also support RTL languages.
13+
14+
## RTL rendering ways
15+
16+
Right to left rendering can be switched in the following ways:
17+
18+
### Wrapping the SfPdfViewer with Directionality widget
19+
20+
To change the rendering direction from right to left, wrap the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) widget inside the [Directionality](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the `textDirection` property as [TextDirection.rtl](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html).
21+
22+
{% tabs %}
23+
{% highlight dart hl_lines="24 25" %}
24+
25+
final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
26+
27+
@override
28+
void initState() {
29+
super.initState();
30+
}
31+
32+
@override
33+
Widget build(BuildContext context) {
34+
return Scaffold(
35+
appBar: AppBar(
36+
title: const Text('Syncfusion Flutter PDF Viewer'),
37+
actions: <Widget>[
38+
IconButton(
39+
icon: const Icon(
40+
Icons.bookmark,
41+
color: Colors.white,
42+
semanticLabel: 'Bookmark',
43+
),
44+
onPressed: () {
45+
_pdfViewerKey.currentState?.openBookmarkView();
46+
},
47+
),
48+
],
49+
),
50+
body: Directionality(
51+
textDirection: TextDirection.rtl,
52+
child: SfPdfViewer.network(
53+
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
54+
key: _pdfViewerKey,
55+
),
56+
),
57+
);
58+
}
59+
60+
{% endhighlight %}
61+
{% endtabs %}
62+
63+
### Changing the locale to RTL languages
64+
65+
To change the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) rendering direction from right to left, change the [locale](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
66+
67+
To use `flutter_localizations`, add the package as dependency to `pubspec.yaml` file.
68+
69+
{% highlight dart %}
70+
71+
dependencies:
72+
flutter_localizations:
73+
sdk: flutter
74+
75+
{% endhighlight %}
76+
77+
Then, import the `flutter_localizations` library, specify [localizationsDelegates](https://api.flutter.dev/flutter/widgets/LocalizationsDelegate-class.html) and `supportedLocales` for `MaterialApp`.
78+
79+
{% tabs %}
80+
{% highlight dart %}
81+
82+
final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
83+
84+
@override
85+
Widget build(BuildContext context) {
86+
return MaterialApp(
87+
localizationsDelegates: const [
88+
GlobalMaterialLocalizations.delegate,
89+
GlobalWidgetsLocalizations.delegate,
90+
GlobalCupertinoLocalizations.delegate,
91+
],
92+
supportedLocales: const <Locale>[
93+
Locale('en'),
94+
Locale('ar'),
95+
// ... other locales the app supports
96+
],
97+
locale: const Locale('ar'),
98+
home: Scaffold(
99+
appBar: AppBar(
100+
title: const Text('Syncfusion Flutter PDF Viewer'),
101+
actions: <Widget>[
102+
IconButton(
103+
icon: const Icon(
104+
Icons.bookmark,
105+
color: Colors.white,
106+
semanticLabel: 'Bookmark',
107+
),
108+
onPressed: () {
109+
_pdfViewerKey.currentState?.openBookmarkView();
110+
},
111+
),
112+
],
113+
),
114+
body: SfPdfViewer.network(
115+
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
116+
key: _pdfViewerKey,
117+
),
118+
),
119+
);
120+
}
121+
122+
{% endhighlight %}
123+
{% endtabs %}

‎Flutter/right-to-left.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,12 @@ This page helps to navigate to the documentation of Right to left (RTL) support
108108
<a href="https://help.syncfusion.com/flutter/treemap/right-to-left">Link</a>
109109
</td>
110110
</tr>
111+
<tr>
112+
<td>
113+
PDF Viewer
114+
</td>
115+
<td>
116+
<a href="https://help.syncfusion.com/flutter/pdf-viewer/right-to-left">Link</a>
117+
</td>
118+
</tr>
111119
</table>

‎flutter-toc.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,10 +452,12 @@
452452
<li><a href="/Flutter/pdf-viewer/page-navigation">Page navigation</a></li>
453453
<li><a href="/Flutter/pdf-viewer/bookmark-navigation">Bookmark navigation</a></li>
454454
<li><a href="/Flutter/pdf-viewer/document-link-annotation">Document link annotation</a></li>
455+
<li><a href="/Flutter/pdf-viewer/hyperlink-navigation">Hyperlink navigation</a></li>
455456
<li><a href="/Flutter/pdf-viewer/interaction-modes">Interaction modes</a></li>
456457
<li><a href="/Flutter/pdf-viewer/page-layout-and-scroll-direction">Page layout and Scrolling options</a></li>
457458
<li><a href="/Flutter/pdf-viewer/viewing-password-protected-pdf-files">Viewing Password protected PDF Files</a></li>
458459
<li><a href="/Flutter/pdf-viewer/Localization">Localization</a></li>
460+
<li><a href="/Flutter/pdf-viewer/right-to-left">Right to Left (RTL)</a></li>
459461
<li><a href="/Flutter/pdf-viewer/accessibility">Accessibility</a></li>
460462
<li>
461463
How to

0 commit comments

Comments
 (0)