From c97f6196b2100f35738f162c6ffd5bda5cc383db Mon Sep 17 00:00:00 2001
From: Lingeshwaran S <lingeshwaran.sankar@syncfusion.com>
Date: Thu, 21 May 2026 17:26:51 +0530
Subject: [PATCH] 1028333: Added UG changes for flutter getting started

---
 Document-Processing-toc.html                  |   2 +-
 .../PDF-Library/flutter/getting-started.md    | 329 ++++++++++++------
 .../flutter/loading-and-saving-document.md    |  12 +-
 .../flutter/working-with-annotations.md       | 101 ++++--
 .../flutter/working-with-attachments.md       |  31 +-
 .../flutter/working-with-bookmarks.md         |  30 +-
 .../flutter/working-with-digital-signature.md |  58 ++-
 .../flutter/working-with-document.md          |  24 +-
 .../flutter/working-with-flow-layout.md       |   4 +-
 .../PDF-Library/flutter/working-with-forms.md | 162 ++++++---
 .../working-with-headers-and-footers.md       |   4 +-
 .../flutter/working-with-hyperlinks.md        |  10 +-
 .../flutter/working-with-images.md            |  12 +-
 .../flutter/working-with-layers.md            |  26 +-
 .../PDF-Library/flutter/working-with-lists.md |  12 +-
 .../PDF-Library/flutter/working-with-pages.md |  28 +-
 .../flutter/working-with-pdf-conformance.md   |  12 +-
 .../flutter/working-with-pdf-templates.md     |  18 +-
 .../flutter/working-with-security.md          |  32 +-
 .../flutter/working-with-shapes.md            |  36 +-
 .../flutter/working-with-tables.md            |  32 +-
 .../flutter/working-with-text-extraction.md   |  36 +-
 .../PDF-Library/flutter/working-with-text.md  |  40 ++-
 .../flutter/working-with-watermarks.md        |   8 +-
 24 files changed, 763 insertions(+), 296 deletions(-)

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 23525c7a36..0939055214 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -2483,7 +2483,7 @@
 						</ul>
 					</li>
 					<li>
-						<a href="/document-processing/pdf/pdf-viewer/flutter/overview">Flutter</a>
+						<a>Flutter</a>
 						<ul>
 							<li><a href="/document-processing/pdf/pdf-viewer/flutter/overview">Overview</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/flutter/getting-started">Getting started</a></li>
diff --git a/Document-Processing/PDF/PDF-Library/flutter/getting-started.md b/Document-Processing/PDF/PDF-Library/flutter/getting-started.md
index ccaf9f8a7a..dfe0965ead 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/getting-started.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/getting-started.md
@@ -20,15 +20,16 @@ Create a simple project using the instructions given in the [`Getting Started wi
 
 **Add dependency**
 
-Add the Syncfusion<sup>&reg;</sup>
-  Flutter PDF dependency to your pub spec file.
+Add the Syncfusion<sup>&reg;</sup> Flutter PDF dependency to your pub spec file.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 dependencies:
   syncfusion_flutter_pdf: ^xx.x.xx
 
 {% endhighlight %}
+{% endtabs %}
 
 N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter PDF`](https://pub.dev/packages/syncfusion_flutter_pdf/versions) package.
 
@@ -36,43 +37,50 @@ N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter PDF`](ht
 
 Run the following command to get the required packages.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 $ flutter pub get
 
 {% endhighlight %}
+{% endtabs %}
 
 **Import package**
 
 Import the following package in your Dart code.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 import 'package:syncfusion_flutter_pdf/pdf.dart';
 
 {% endhighlight %}
+{% endtabs %}
 
 Add a new button widget as a child of your container widget.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
-	body: Center(
-	  child: TextButton(
-		onPressed: _createPDF,
-		  child: Text('Create PDF')
-		)
-	 )
+    body: Center(
+      child: TextButton(
+        onPressed: _createPDF, 
+        child: Text('Create PDF')
+      ),
+    ),
   );
 }
 
 {% endhighlight %}
+{% endtabs %}
 
 Include the following code snippet in the button click event to create a PDF file.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 Future<void> _createPDF() async {
   //Create a new PDF document
@@ -80,9 +88,11 @@ Future<void> _createPDF() async {
 
   //Add a new page and draw text
   document.pages.add().graphics.drawString(
-      'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 20),
-      brush: PdfSolidBrush(PdfColor(0, 0, 0)),
-      bounds: Rect.fromLTWH(0, 0, 500, 50));
+    'Hello World!',
+    PdfStandardFont(PdfFontFamily.helvetica, 20),
+    brush: PdfSolidBrush(PdfColor(0, 0, 0)),
+    bounds: Rect.fromLTWH(0, 0, 500, 50),
+  );
 
   //Save the document
   List<int> bytes = await document.save();
@@ -92,6 +102,7 @@ Future<void> _createPDF() async {
 }
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Save and open a PDF document in desktop
 
@@ -101,11 +112,13 @@ You can save and open a PDF document in desktop by using the following steps:
 
 Configure and enable the desktop support to run the app.
 
-{% highlight dart %} 
+{% tabs %}
+{% highlight dart tabtitle="dart" %} 
 
 flutter config --enable-<platform>-desktop
 
 {% endhighlight %}
+{% endtabs %}
 
 N> You only need to execute `flutter config --enable-<platform>-desktop` once. You can always check the status of your configuration using the no-argument flutter config command.
 
@@ -115,26 +128,31 @@ Here you can get more details about [`How to add desktop support in the app`](ht
 
 Add the following packages to your pub spec file.
 
-{% highlight dart %} 
+{% tabs %}
+{% highlight dart tabtitle="dart" %} 
 
 path_provider: ^1.6.5
 open_file: ^3.0.1
 
 {% endhighlight %}
+{% endtabs %}
 
 **Import package**
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 import 'dart:io';
 import 'package:open_file/open_file.dart';
 import 'package:path_provider/path_provider.dart';
 
 {% endhighlight %}
+{% endtabs %}
 
 Include the following code snippet in _createPDF method to open the PDF document in mobile after saving it.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Get external storage directory
 final directory = await getExternalStorageDirectory();
@@ -152,6 +170,7 @@ await file.writeAsBytes(bytes, flush: true);
 OpenFile.open('$path/Output.pdf');
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Save and open a PDF document in mobile
 
@@ -161,26 +180,31 @@ You can save and open a PDF document in mobile by using the following steps:
 
 Add the following packages to your pub spec file.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 path_provider: ^2.0.7
 open_file: ^3.2.1
 
 {% endhighlight %}
+{% endtabs %}
 
 **Import package**
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 import 'dart:io';
 import 'package:open_file/open_file.dart';
 import 'package:path_provider/path_provider.dart';
 
 {% endhighlight %}
+{% endtabs %}
 
 Include the following code snippet in _createPDF method to open the PDF document in mobile after saving it.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Get external storage directory
 final directory = await getApplicationSupportDirectory();
@@ -198,6 +222,7 @@ await file.writeAsBytes(bytes, flush: true);
 OpenFile.open('$path/Output.pdf');
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Save and download a PDF document in web
 
@@ -205,17 +230,20 @@ You can save and download a PDF document in web by using the following steps.
 
 **Import package**
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 import 'dart:async';
 import 'dart:convert';
 import 'dart:js' as js;
 
 {% endhighlight %}
+{% endtabs %}
 
 Include the following code snippet in _createPDF method to open the document in web after saving it.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 js.context['pdfData'] = base64.encode(bytes);
 js.context['filename'] = 'Output.pdf';
@@ -224,10 +252,12 @@ Timer.run(() {
 });
 
 {% endhighlight %}
+{% endtabs %}
 
 Add the following code in the header section of index.html file under the web folder.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 <script>
     async function download() {
@@ -241,6 +271,7 @@ Add the following code in the header section of index.html file under the web fo
 </script>
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Save and download a PDF document in WASM
 
@@ -252,16 +283,19 @@ step 3:	Add the following code:
 
 **Import package**
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 import 'dart:convert';
 import 'package:web/web.dart' as web;
 
 {% endhighlight %}
+{% endtabs %}
 
 To enable file saving and launching for download in a web environment, include the following code snippet within the **saveAndLaunchFile** method.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 // Function to save and launch a file for download in a web environment
 Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
@@ -271,16 +305,17 @@ Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
         ..style.display = 'none'
         ..download = fileName;
 
-// Insert the new element into the DOM
-web.document.body!.appendChild(anchor);
+  // Insert the new element into the DOM
+  web.document.body!.appendChild(anchor);
 
-// Initiate the download
-anchor.click();
-// Clean up the DOM by removing the anchor element
-web.document.body!.removeChild(anchor);
+  // Initiate the download
+  anchor.click();
+  // Clean up the DOM by removing the anchor element
+  web.document.body!.removeChild(anchor);
 }
 
 {% endhighlight %}
+{% endtabs %}
 
 By executing the above code sample, you will get the PDF document as follows.
 
@@ -290,27 +325,35 @@ By executing the above code sample, you will get the PDF document as follows.
 
 The following code example shows how to create a PDF document with an image.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
-//Creates a new PDF document
+// Create a new PDF document
 PdfDocument document = PdfDocument();
 
-//Draw the image
+// Draw the image
 document.pages.add().graphics.drawImage(
-    PdfBitmap(File('image.jpg').readAsBytesSync()),
-   Rect.fromLTWH(0, 0, 100, 100));
-
-//Saves the document
-File('Output.pdf').writeAsBytes(await document.save());
-
-//Dispose the document
+  PdfBitmap(
+    File('image.jpg').readAsBytesSync(),
+  ),
+  Rect.fromLTWH(0, 0, 100, 100),
+);
+
+// Save the document
+File('Output.pdf').writeAsBytes(
+  await document.save(),
+);
+
+// Dispose the document
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Creating a PDF document with table
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -335,10 +378,12 @@ PdfGridRow row = grid.rows.add();
 row.cells[0].value = '1';
 row.cells[1].value = 'Arya';
 row.cells[2].value = '6';
+
 row = grid.rows.add();
 row.cells[0].value = '12';
 row.cells[1].value = 'John';
 row.cells[2].value = '9';
+
 row = grid.rows.add();
 row.cells[0].value = '42';
 row.cells[1].value = 'Tony';
@@ -346,7 +391,9 @@ row.cells[2].value = '8';
 
 //Draw grid to the page of the PDF document
 grid.draw(
-    page: document.pages.add(), bounds: Rect.fromLTWH(0, 0, 0, 0));
+  page: document.pages.add(),
+  bounds: Rect.fromLTWH(0, 0, 0, 0),
+);
 
 //Saves the document
 File('Output.pdf').writeAsBytes(await document.save());
@@ -355,12 +402,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Creating a simple PDF document with basic elements
 
 The [`PdfDocument`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) object represents an entire PDF document that is being created. The following code example shows how to create a PDF document and add a [`PdfPage`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPage-class.html) to it along with the [`PdfPageSettings`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageSettings-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -374,15 +423,16 @@ PdfPage page = document.pages.add();
 PdfGraphics graphics = page.graphics;
 
 {% endhighlight %}
+{% endtabs %}
 
 * All the units are measured in point instead of pixel.
 * In PDF, all the elements are placed in absolute positions and has the possibility for content overlapping if misplaced.
-* Syncfusion<sup>&reg;</sup>
-  PDF provides the rendered bounds for each and every element added through [`PdfLayoutResult`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutResult-class.html) objects. This can be used to add successive elements and prevent content overlap.
+* Syncfusion<sup>&reg;</sup> PDF provides the rendered bounds for each and every element added through [`PdfLayoutResult`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutResult-class.html) objects. This can be used to add successive elements and prevent content overlap.
 
 The following code example explains how to add an image from base64 string to a PDF document, by providing the rectangle coordinates.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads the image from base64 string
 PdfImage image = PdfBitmap.fromBase64String(
@@ -392,6 +442,7 @@ PdfImage image = PdfBitmap.fromBase64String(
 page.graphics.drawImage(image, Rect.fromLTWH(176, 0, 390, 130));
 
 {% endhighlight %}
+{% endtabs %}
 
 The following methods can be used to add text to a PDF document.
 
@@ -402,16 +453,21 @@ The [`PdfTextElement`](https://pub.dev/documentation/syncfusion_flutter_pdf/late
 
 The following code example adds the necessary text such as address, invoice number and date to create a basic invoice application.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 PdfBrush solidBrush = PdfSolidBrush(PdfColor(126, 151, 173));
 Rect bounds = Rect.fromLTWH(0, 160, graphics.clientSize.width, 30);
 
 //Draws a rectangle to place the heading in that region
-graphics.drawRectangle(brush: solidBrush, bounds: bounds);
+graphics.drawRectangle(
+  brush: solidBrush,
+  bounds: bounds,
+);
 
 //Creates a font for adding the heading in the page
-PdfFont subHeadingFont = PdfStandardFont(PdfFontFamily.timesRoman, 14);
+PdfFont subHeadingFont =
+    PdfStandardFont(PdfFontFamily.timesRoman, 14);
 
 //Creates a text element to add the invoice number
 PdfTextElement element =
@@ -420,56 +476,94 @@ element.brush = PdfBrushes.white;
 
 //Draws the heading on the page
 PdfLayoutResult result = element.draw(
-    page: page, bounds: Rect.fromLTWH(10, bounds.top + 8, 0, 0))!;
+  page: page,
+  bounds: Rect.fromLTWH(10, bounds.top + 8, 0, 0),
+)!;
 
 //Use 'intl' package for date format.
-String currentDate = 'DATE ' + DateFormat.yMMMd().format(DateTime.now());
+String currentDate =
+    'DATE ' + DateFormat.yMMMd().format(DateTime.now());
 
 //Measures the width of the text to place it in the correct location
 Size textSize = subHeadingFont.measureString(currentDate);
 Offset textPosition = Offset(
-    graphics.clientSize.width - textSize.width - 10, result.bounds.top);
+  graphics.clientSize.width - textSize.width - 10,
+  result.bounds.top,
+);
 
 //Draws the date by using drawString method
-graphics.drawString(currentDate, subHeadingFont,
-    brush: element.brush,
-    bounds: Offset(graphics.clientSize.width - textSize.width - 10,
-            result.bounds.top) &
-        Size(textSize.width + 2, 20));
+graphics.drawString(
+  currentDate,
+  subHeadingFont,
+  brush: element.brush,
+  bounds: Offset(
+        graphics.clientSize.width - textSize.width - 10,
+        result.bounds.top,
+      ) &
+      Size(textSize.width + 2, 20),
+);
 
 //Creates text elements to add the address and draw it to the page
 element = PdfTextElement(
-    text: 'BILL TO ',
-    font: PdfStandardFont(PdfFontFamily.timesRoman, 10,
-        style: PdfFontStyle.bold));
+  text: 'BILL TO ',
+  font: PdfStandardFont(
+    PdfFontFamily.timesRoman,
+    10,
+    style: PdfFontStyle.bold,
+  ),
+);
 element.brush = PdfSolidBrush(PdfColor(126, 155, 203));
+
 result = element.draw(
-    page: page, bounds: Rect.fromLTWH(10, result.bounds.bottom + 25, 0, 0))!;
+  page: page,
+  bounds:
+      Rect.fromLTWH(10, result.bounds.bottom + 25, 0, 0),
+)!;
 
-PdfFont timesRoman = PdfStandardFont(PdfFontFamily.timesRoman, 10);
+PdfFont timesRoman =
+    PdfStandardFont(PdfFontFamily.timesRoman, 10);
 
-element = PdfTextElement(text: 'Victuailles en stock ', font: timesRoman);
+element = PdfTextElement(
+  text: 'Victuailles en stock ',
+  font: timesRoman,
+);
 element.brush = PdfBrushes.black;
+
 result = element.draw(
-    page: page, bounds: Rect.fromLTWH(10, result.bounds.bottom + 10, 0, 0))!;
+  page: page,
+  bounds:
+      Rect.fromLTWH(10, result.bounds.bottom + 10, 0, 0),
+)!;
 
 element = PdfTextElement(
-    text: '2, rue du Commerce, Lyon, France ', font: timesRoman);
+  text: '2, rue du Commerce, Lyon, France ',
+  font: timesRoman,
+);
 element.brush = PdfBrushes.black;
+
 result = element.draw(
-    page: page, bounds: Rect.fromLTWH(10, result.bounds.bottom + 10, 0, 0))!;
+  page: page,
+  bounds:
+      Rect.fromLTWH(10, result.bounds.bottom + 10, 0, 0),
+)!;
 
 //Draws a line at the bottom of the address
 graphics.drawLine(
-    PdfPen(PdfColor(126, 151, 173), width: 0.7),
-    Offset(0, result.bounds.bottom + 3),
-    Offset(graphics.clientSize.width, result.bounds.bottom + 3));
+  PdfPen(PdfColor(126, 151, 173), width: 0.7),
+  Offset(0, result.bounds.bottom + 3),
+  Offset(
+    graphics.clientSize.width,
+    result.bounds.bottom + 3,
+  ),
+);
 
 {% endhighlight %}
+{% endtabs %}
 
 Since the invoice document requires only simple cell customizations, the given code example explains how to create a simple invoice table by using [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a PDF grid
 PdfGrid grid = PdfGrid();
@@ -490,26 +584,34 @@ header.cells[4].value = 'Total';
 
 //Creates the header style
 PdfGridCellStyle headerStyle = PdfGridCellStyle();
-headerStyle.borders.all = PdfPen(PdfColor(126, 151, 173));
-headerStyle.backgroundBrush = PdfSolidBrush(PdfColor(126, 151, 173));
+headerStyle.borders.all =
+    PdfPen(PdfColor(126, 151, 173));
+headerStyle.backgroundBrush =
+    PdfSolidBrush(PdfColor(126, 151, 173));
 headerStyle.textBrush = PdfBrushes.white;
-headerStyle.font = PdfStandardFont(PdfFontFamily.timesRoman, 14,
-    style: PdfFontStyle.regular);
+headerStyle.font = PdfStandardFont(
+  PdfFontFamily.timesRoman,
+  14,
+  style: PdfFontStyle.regular,
+);
 
 //Adds cell customizations
 for (int i = 0; i < header.cells.count; i++) {
   if (i == 0 || i == 1) {
     header.cells[i].stringFormat = PdfStringFormat(
-        alignment: PdfTextAlignment.left,
-        lineAlignment: PdfVerticalAlignment.middle);
+      alignment: PdfTextAlignment.left,
+      lineAlignment: PdfVerticalAlignment.middle,
+    );
   } else {
     header.cells[i].stringFormat = PdfStringFormat(
-        alignment: PdfTextAlignment.right,
-        lineAlignment: PdfVerticalAlignment.middle);
+      alignment: PdfTextAlignment.right,
+      lineAlignment: PdfVerticalAlignment.middle,
+    );
   }
   header.cells[i].style = headerStyle;
 }
 
+
 //Add rows to grid
 PdfGridRow row = grid.rows.add();
 row.cells[0].value = 'CA-1098';
@@ -517,18 +619,21 @@ row.cells[1].value = 'AWC Logo Cap';
 row.cells[2].value = '\$8.99';
 row.cells[3].value = '2';
 row.cells[4].value = '\$17.98';
+
 row = grid.rows.add();
 row.cells[0].value = 'LJ-0192';
 row.cells[1].value = 'Long-Sleeve Logo Jersey,M';
 row.cells[2].value = '\$49.99';
 row.cells[3].value = '3';
 row.cells[4].value = '\$149.97';
+
 row = grid.rows.add();
 row.cells[0].value = 'So-B909-M';
 row.cells[1].value = 'Mountain Bike Socks,M';
 row.cells[2].value = '\$9.5';
 row.cells[3].value = '2';
 row.cells[4].value = '\$19';
+
 row = grid.rows.add();
 row.cells[0].value = 'LJ-0192';
 row.cells[1].value = 'Long-Sleeve Logo Jersey,M';
@@ -537,27 +642,35 @@ row.cells[3].value = '4';
 row.cells[4].value = '\$199.96';
 
 //Set padding for grid cells
-grid.style.cellPadding = PdfPaddings(left: 2, right: 2, top: 2, bottom: 2);
+grid.style.cellPadding =
+    PdfPaddings(left: 2, right: 2, top: 2, bottom: 2);
 
 //Creates the grid cell styles
 PdfGridCellStyle cellStyle = PdfGridCellStyle();
 cellStyle.borders.all = PdfPens.white;
-cellStyle.borders.bottom = PdfPen(PdfColor(217, 217, 217), width: 0.70);
-cellStyle.font = PdfStandardFont(PdfFontFamily.timesRoman, 12);
-cellStyle.textBrush = PdfSolidBrush(PdfColor(131, 130, 136));
+cellStyle.borders.bottom =
+    PdfPen(PdfColor(217, 217, 217), width: 0.70);
+cellStyle.font =
+    PdfStandardFont(PdfFontFamily.timesRoman, 12);
+cellStyle.textBrush =
+    PdfSolidBrush(PdfColor(131, 130, 136));
+
 //Adds cell customizations
 for (int i = 0; i < grid.rows.count; i++) {
   PdfGridRow row = grid.rows[i];
   for (int j = 0; j < row.cells.count; j++) {
     row.cells[j].style = cellStyle;
+
     if (j == 0 || j == 1) {
       row.cells[j].stringFormat = PdfStringFormat(
-          alignment: PdfTextAlignment.left,
-          lineAlignment: PdfVerticalAlignment.middle);
+        alignment: PdfTextAlignment.left,
+        lineAlignment: PdfVerticalAlignment.middle,
+      );
     } else {
       row.cells[j].stringFormat = PdfStringFormat(
-          alignment: PdfTextAlignment.right,
-          lineAlignment: PdfVerticalAlignment.middle);
+        alignment: PdfTextAlignment.right,
+        lineAlignment: PdfVerticalAlignment.middle,
+      );
     }
   }
 }
@@ -568,26 +681,39 @@ PdfLayoutFormat layoutFormat =
 
 //Draws the grid to the PDF page
 PdfLayoutResult gridResult = grid.draw(
-    page: page,
-    bounds: Rect.fromLTWH(0, result.bounds.bottom + 20,
-        graphics.clientSize.width, graphics.clientSize.height - 100),
-    format: layoutFormat)!;
+  page: page,
+  bounds: Rect.fromLTWH(
+    0,
+    result.bounds.bottom + 20,
+    graphics.clientSize.width,
+    graphics.clientSize.height - 100,
+  ),
+  format: layoutFormat,
+)!;
 
 gridResult.page.graphics.drawString(
-    'Grand Total :                             \$386.91', subHeadingFont,
-    brush: PdfSolidBrush(PdfColor(126, 155, 203)),
-    bounds: Rect.fromLTWH(520, gridResult.bounds.bottom + 30, 0, 0));
+  'Grand Total :                             \$386.91',
+  subHeadingFont,
+  brush: PdfSolidBrush(PdfColor(126, 155, 203)),
+  bounds:
+      Rect.fromLTWH(520, gridResult.bounds.bottom + 30, 0, 0),
+);
 
 gridResult.page.graphics.drawString(
-    'Thank you for your business !', subHeadingFont,
-    brush: PdfBrushes.black,
-    bounds: Rect.fromLTWH(520, gridResult.bounds.bottom + 60, 0, 0));
+  'Thank you for your business !',
+  subHeadingFont,
+  brush: PdfBrushes.black,
+  bounds:
+      Rect.fromLTWH(520, gridResult.bounds.bottom + 60, 0, 0),
+);
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code example shows how to save the invoice document and dispose the [`PdfDocument`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) object.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Saves the document
 File('Output.pdf').writeAsBytes(await document.save());
@@ -596,6 +722,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The following screenshot shows the invoice PDF document created by the Syncfusion<sup>&reg;</sup>
   Flutter PDF.
diff --git a/Document-Processing/PDF/PDF-Library/flutter/loading-and-saving-document.md b/Document-Processing/PDF/PDF-Library/flutter/loading-and-saving-document.md
index 1d30f39292..9e3680c4e1 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/loading-and-saving-document.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/loading-and-saving-document.md
@@ -13,31 +13,36 @@ documentation: ug
 
 You can open an existing PDF document by using the [`PdfDocument`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) class. The following example shows how to load an existing document from the list of bytes.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Opens an existing document from the list of bytes
 PdfDocument document =
     PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Opening an existing PDF document from the base 64 string
 
 You can open an existing document from the base 64 string by using the [`PdfDocument`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) class as shown below.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Opens an existing document from the base 64 string
 PdfDocument document = PdfDocument.fromBase64String(
     'JVBERi0xLjcNCiWDkvr+DQoxIDAgb2JqDQo8PA0KL1R5cGUgL0NhdGFsb2cNCi9QYWdlcyAyIDAgUg0KPj4NCmVuZG9iag0KMiAwIG9iag0KPDwNCi9UeXBlIC9QYWdlcw0KL0tpZHMgWzMgMCBSXQ0KL0NvdW50IDENCi9SZXNvdXJjZXMgPDw+Pg0KDQovTWVkaWFCb3ggWzAgMCA1OTUgODQyXQ0KPj4NCmVuZG9iag0KMyAwIG9iag0KPDwNCi9Db3VudCAxDQovVHlwZSAvUGFnZXMNCi9LaWRzIFs0IDAgUl0NCi9QYXJlbnQgMiAwIFINCj4+DQplbmRvYmoNCjQgMCBvYmoNCjw8DQovVHlwZSAvUGFnZQ0KL1BhcmVudCAzIDAgUg0KPj4NCmVuZG9iag0KeHJlZg0KMCA1DQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDAwMTcgMDAwMDAgbg0KMDAwMDAwMDA3MiAwMDAwMCBuDQowMDAwMDAwMTgwIDAwMDAwIG4NCjAwMDAwMDAyNTkgMDAwMDAgbg0KdHJhaWxlcg0KPDwNCi9Sb290IDEgMCBSDQovU2l6ZSA1DQo+Pg0KDQpzdGFydHhyZWYNCjMxMg0KJSVFT0Y=');
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Saving a PDF document to list of bytes
 
 You can save the manipulated PDF document as a list of bytes using the [`save`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/save.html) method of [`PdfDocument`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument-class.html) class. Also, you can save the list of bytes to the file system as follows.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Opens an existing PDF document
 PdfDocument document =
@@ -50,3 +55,4 @@ List<int> bytes =await document.save();
 File('output.pdf').writeAsBytes(bytes);
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-annotations.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-annotations.md
index 752043776e..357d7c47ca 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-annotations.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-annotations.md
@@ -18,7 +18,8 @@ You can [`add`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/
 
 You can add a rectangle annotation to the page using the PdfRectangleAnnotation class. The following code example explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -44,10 +45,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 To add annotations to an existing PDF document, use the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -74,6 +77,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Supported annotation types
 
@@ -83,7 +87,8 @@ This annotation displays a rectangle/square on the page based on the input bound
 
 The PdfRectangleAnnotation is used to create and set the properties of the Rectangle annotation.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -111,6 +116,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Ellipse Annotation
 
@@ -118,7 +124,8 @@ This annotation displays an ellipse/circle on the page based on the input bounds
 
 The PdfEllipseAnnotation is used to create and set the properties of the Ellipse annotation.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -146,6 +153,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Line Annotation
 
@@ -153,7 +161,8 @@ This annotation displays a single straight line on the page. When you open it, i
 
 The PdfLineAnnotation is used to create and set the properties of the Line annotation.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -189,6 +198,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Polygon Annotation
 
@@ -196,7 +206,8 @@ This annotation displays a polygon on the page based on the input coordinate poi
 
 The PdfPolygonAnnotation is used to create and set the properties of the Polygon annotation.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -223,6 +234,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Document Link Annotation
 
@@ -230,7 +242,8 @@ This annotation is used to navigate to a specific destination within the documen
 
 The [`PdfDocumentLinkAnnotation`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocumentLinkAnnotation-class.html) is used to add a document link annotation in the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -254,6 +267,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### URI Annotation
 
@@ -261,7 +275,8 @@ The URI annotation is used to navigate to a particular web URI.
 
 The following code example explains how to add URI annotation in a PDF document using the [`PdfUriAnnotation`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfUriAnnotation-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -284,14 +299,15 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Text Web Link Annotation
 
 This annotation is used to navigate to a particular web URI while clicking on the link text.
 
 The following code example explains how to add the Text Web Link annotation in a PDF document using the PdfTextWebLinkAnnotation.
-
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -319,12 +335,14 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Text Markup Annotation
 
 The PdfTextMarkupAnnotation class is used to annotate the text in a PDF document with various formats, including highlight, squiggly, strikeout, and underline. The following code demonstrates how to highlight text in a PDF document. 
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 PdfDocument document = PdfDocument();
@@ -356,10 +374,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 To add text markup annotation to an existing PDF document, use the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the PDF document.
 PdfDocument document =
@@ -387,6 +407,7 @@ File('output.pdf').writeAsBytesSync(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Pop-up Annotation
 
@@ -396,7 +417,8 @@ It typically does not appear alone but is associated with markup annotation, its
 
 PdfPopupAnnotation is used to add pop-up annotation in a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 PdfDocument document = PdfDocument();
@@ -418,10 +440,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 To add popup annotation to an existing PDF document, use the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the PDF document.
 PdfDocument document =
@@ -443,6 +467,7 @@ File('output.pdf').writeAsBytesSync(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Flatten annotation
 
@@ -450,7 +475,8 @@ Annotations can be flattened by removing the existing annotation and replacing i
 
 This can be achieved by enabling the flattenAllAnnotations method . Please refer to the sample for flattening all the annotations in the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -476,10 +502,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 To flatten the specific annotation in the PDF document, use the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -516,13 +544,15 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Modifying the annotations
 
 The Syncfusion<sup>&reg;</sup>
   Flutter PDF allows you to modify the annotation of an existing document. The following code explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -550,12 +580,14 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing annotations from an existing PDF
 
 You can remove the annotation from the annotation collection, represented by the [`PdfAnnotationCollection`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfAnnotationCollection-class.html) of the page. The following code explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -577,6 +609,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Annotation Flags
 
@@ -633,7 +666,8 @@ If set, invert the interpretation of the noView flat for certain events.<br/><br
 
 The following code example illustrates how to set annotation flags in the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 PdfDocument document = PdfDocument();
@@ -661,10 +695,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 To add annotation flags to an existing annotation, use the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the PDF document.
 PdfDocument document =
@@ -682,12 +718,14 @@ File('output.pdf').writeAsBytesSync(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
  
 ## Importing annotations from FDF file
 
 FDF stands for Forms Data Format. FDF is a file format for representing annotations present in a PDF document. You can import annotation data from the FDF file to PDF using the importAnnotation method in the PdfDocument class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load an existing PDF document.
     PdfDocument document =
@@ -701,12 +739,14 @@ FDF stands for Forms Data Format. FDF is a file format for representing annotati
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Importing annotations from XFDF file
 
 XFDF stands for XML Forms Data Format. XFDF is the XML version of FDF for representing annotations that are contained in a PDF document. You can import annotation data from the XFDF file to PDF using the importAnnotation method in PdfDocument class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load an existing PDF document.
     PdfDocument document =
@@ -720,12 +760,14 @@ XFDF stands for XML Forms Data Format. XFDF is the XML version of FDF for repres
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Importing annotations from JSON file
 
 JSON stands for JavaScript Object Notation. It is a collection of key or value pairs, and it is used for serializing and transmitting the structured data over a network connection. You can import the annotation data from the JSON file to PDF using the importAnnotation method in PdfDocument class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load an existing PDF document.
     PdfDocument document =
@@ -739,12 +781,14 @@ JSON stands for JavaScript Object Notation. It is a collection of key or value p
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Exporting annotations to FDF file
 
 To export annotation data to the FDF file from the PDF document, you can use the exportAnnotation method in PdfDocument class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load an existing PDF document.
     PdfDocument document =
@@ -757,12 +801,14 @@ To export annotation data to the FDF file from the PDF document, you can use the
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Exporting annotations to XFDF file
 
 To export annotation data to the XFDF file from the PDF document, you can use the exportAnnotation method in PdfDocument class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load an existing PDF document.
     PdfDocument document =
@@ -775,12 +821,14 @@ To export annotation data to the XFDF file from the PDF document, you can use th
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Exporting annotations to JSON file
 
 To export annotation data to the JSON file from the PDF document, you can use the exportAnnotation method in PdfDocument class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load an existing PDF document.
     PdfDocument document =
@@ -793,3 +841,4 @@ To export annotation data to the JSON file from the PDF document, you can use th
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-attachments.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-attachments.md
index 8d7b6bafa3..6ca44eeb2f 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-attachments.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-attachments.md
@@ -9,8 +9,7 @@ documentation: ug
 
 # Attachments in Flutter PDF
 
-The Syncfusion<sup>&reg;</sup>
-  Flutter PDF provides support for file attachments in PDF documents.
+The Syncfusion<sup>&reg;</sup> Flutter PDF provides support for file attachments in PDF documents.
 
 Attachments can contain any kind of file with detailed information.
 
@@ -18,7 +17,8 @@ Attachments can contain any kind of file with detailed information.
 
 You can add a file attachment to a PDF document using the PdfAttachment class. The following code example shows this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -35,10 +35,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 You can also add file attachment as a base 64 string using the PdfAttachment class. The following code example shows this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -55,11 +57,12 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
-The Syncfusion<sup>&reg;</sup>
-  Flutter PDF also provides support for adding the attachments to an existing PDF document. The following code example shows the same.
+The Syncfusion<sup>&reg;</sup> Flutter PDF also provides support for adding the attachments to an existing PDF document. The following code example shows the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -77,12 +80,14 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing attachments from an existing PDF
 
 You can remove the attachments from the existing document by using the remove method, as shown in the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -104,13 +109,14 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Extracting and saving an attachment to the disc
 
-The <sup>&reg;</sup>
-  Flutter PDF provides support for extracting the attachments and saving them to the disk. The following code example explains how to extract and save an attachment.
+The Syncfusion<sup>&reg;</sup> Flutter PDF provides support for extracting the attachments and saving them to the disk. The following code example explains how to extract and save an attachment.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -132,4 +138,5 @@ File('output.pdf').writeAsBytes(await document.save());
 //Disposes the document
 document.dispose();
 
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-bookmarks.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-bookmarks.md
index 4bad5d471c..e513b9d967 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-bookmarks.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-bookmarks.md
@@ -9,14 +9,14 @@ documentation: ug
 
 # Bookmarks in Flutter PDF
 
-The Syncfusion<sup>&reg;</sup>
-  Flutter PDF provides support to add [`bookmarks`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/bookmarks.html) to a PDF document to navigate interactively from one part of the document to another. It provides customization such as title font, color, size and more. It also provides support to [`insert`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/insert.html), [`remove`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/remove.html), and modify the bookmarks in an existing PDF Document.
+The Syncfusion<sup>&reg;</sup> Flutter PDF provides support to add [`bookmarks`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/bookmarks.html) to a PDF document to navigate interactively from one part of the document to another. It provides customization such as title font, color, size and more. It also provides support to [`insert`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/insert.html), [`remove`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/remove.html), and modify the bookmarks in an existing PDF Document.
 
 ## Adding bookmarks to a PDF
 
 The [`PdfBookmarkBase`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase-class.html) collection represents the bookmarks in a PDF document. You can add a bookmark to a new PDF document using [`PdfBookmark`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmark-class.html) class. Refer to the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -40,12 +40,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
   
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding a child to the bookmarks
 
 You can add a child bookmark by using the [`insert`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/insert.html) or [`add`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/add.html) method. Refer to the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -81,12 +83,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding bookmarks in an existing PDF document
 
 To add [`bookmarks`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/bookmarks.html) in an existing PDF document, use the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -111,15 +115,16 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Inserting bookmarks in an existing PDF
 
-When loading an existing document, the Syncfusion<sup>&reg;</sup>
-  Flutter PDF loads all bookmarks of the document.
+When loading an existing document, the Syncfusion<sup>&reg;</sup> Flutter PDF loads all bookmarks of the document.
 
 Each loaded bookmark is represented by the [`PdfBookmark`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmark-class.html) object. The following code example explains how to [`insert`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/insert.html) new bookmarks in the existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -138,12 +143,14 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
   
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing bookmarks from an existing PDF
 
 You can also remove [`bookmarks`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/bookmarks.html) from the existing PDF document by using the [`remove`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmarkBase/remove.html) method. Please refer to the following code example.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -165,6 +172,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Modifying bookmarks in an existing PDF
 
@@ -178,7 +186,8 @@ The Syncfusion<sup>&reg;</sup>
 
 The following code example shows how to modify the [`destination`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmark/destination.html), [`color`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmark/color.html), [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmark/textStyle.html) and [`title`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBookmark/title.html) of the existing bookmark collection.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -208,3 +217,4 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-digital-signature.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-digital-signature.md
index e6c2db60fc..bb36c9beb9 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-digital-signature.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-digital-signature.md
@@ -15,7 +15,8 @@ Flutter PDF allows you to add a digital signature to the PDF document. You can s
 
 To add a digital signature, you need a certificate with private keys. The following code example explains how to add a digital signature to the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -44,12 +45,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Signing an existing document
 
 You can load the signature field from the existing PDF document and add a certificate to the document as follows,
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 PdfDocument document =
@@ -74,12 +77,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding a signature appearance
 
 You can customize the appearance of the signature field by using the [`appearance`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSignatureField/appearance.html) property in [`PdfSignatureField`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSignatureField-class.html) as follows,
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 PdfDocument document =
@@ -106,6 +111,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Externally sign a PDF document
 
@@ -113,7 +119,8 @@ You can sign the PDF document from an external digital signature created from va
 
 The following code example shows how to sign the PDF document from an external signature.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 PdfDocument document =
@@ -135,6 +142,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 You can create an external digital signature with the [`x509`](https://pub.dev/packages/x509) package by using the following steps:
 
@@ -142,16 +150,19 @@ You can create an external digital signature with the [`x509`](https://pub.dev/p
 
 Add this to your package's pubspec.yaml file.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 dependencies:
   x509: ^0.1.4
 
 {% endhighlight %}
+{% endtabs %}
 
 **Import package**
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 import 'package:x509/x509.dart' as x509;
 
@@ -181,12 +192,14 @@ class PdfExternalSigner extends IPdfExternalSigner {
 }
 
 {% endhighlight %}
+{% endtabs %}
 
 You can use the sign method in IPdfExternalSigner for asynchronous signing.
 
 N> Asynchronous signing will only work when saving the PDF document asynchronously. signSync works with synchronous and asynchronous save methods.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Class for singing a PDF document externally.
     class PdfExternalSigner extends IPdfExternalSigner {
@@ -208,12 +221,14 @@ N> Asynchronous signing will only work when saving the PDF document asynchronous
     }
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding multiple digital signature
 
 You can apply one or more digital signatures to a PDF document. The following code example shows how to add multiple signatures to the PDF document.
- 
-{% highlight dart %}
+
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 PdfDocument document =
@@ -255,17 +270,18 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Long Term Validation (LTV) PDF signature
 
-The Syncfusion<sup>&reg;</sup>
-  Flutter PDF supports creating long term signature validation for the signed PDF document. The LTV signature allows you to check the validity of a signature long after the document has been signed. To achieve long term validation, all the required elements for signature validation must be embedded in the signed PDF.
+The Syncfusion<sup>&reg;</sup> Flutter PDF supports creating long term signature validation for the signed PDF document. The LTV signature allows you to check the validity of a signature long after the document has been signed. To achieve long term validation, all the required elements for signature validation must be embedded in the signed PDF.
 
 N> The resulting PDF document size will be substantial because all the necessary signature information, Certificate Revocation List (CRL), and Online Certificate Status Protocol (OCSP) are embedded.
 
 The following code example shows how to enable LTV for a signed PDF document using createLongTermValidity method in [PdfSignature](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSignature-class.html) class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     // Load the existing PDF document.
     PdfDocument document =
@@ -280,12 +296,14 @@ The following code example shows how to enable LTV for a signed PDF document usi
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Create Long Term Validation (LTV) with public certificates data
 
 The following code example shows how to create an LTV for a signed PDF document using public certificates with the createLongTermValidity method in [PdfSignature](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSignature-class.html) class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     // Load the existing PDF document.
     PdfDocument document =
@@ -307,6 +325,7 @@ The following code example shows how to create an LTV for a signed PDF document
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding a timestamp in digital signature
 
@@ -315,7 +334,8 @@ The Syncfusion<sup>&reg;</sup>
 
 N> Signing using TimestampServer only works when the document is saved using asynchronous [save](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/save.html). It is not supported in synchronous [saveSync](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/saveSync.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     // Create a new PDF document.
     PdfDocument document = PdfDocument();
@@ -356,6 +376,7 @@ N> Signing using TimestampServer only works when the document is saved using asy
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding a timestamp in the PDF document
 
@@ -363,8 +384,8 @@ You can add timestamp to the PDF document using timestampServer property in [Pdf
 
 N> Signing using TimestampServer only works when the document is saved using asynchronous [save](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/save.html). It is not supported in synchronous [saveSync](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/saveSync.html).
 
-
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     // Create a new PDF document.
     PdfDocument document = PdfDocument();
@@ -393,6 +414,7 @@ N> Signing using TimestampServer only works when the document is saved using asy
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding a timestamp in an existing PDF document
 
@@ -400,7 +422,8 @@ You can add timestamp to the existing PDF document using timestampServer propert
 
 N> Signing using TimestampServer only works when the document is saved using asynchronous [save](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/save.html). It is not supported in synchronous [saveSync](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/saveSync.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     // Create a new PDF document.
     PdfDocument document =
@@ -427,3 +450,4 @@ N> Signing using TimestampServer only works when the document is saved using asy
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-document.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-document.md
index 9685b05c87..459e64835e 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-document.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-document.md
@@ -15,7 +15,8 @@ Flutter PDF supports various page setting options to control the page display, u
 
 You can choose the standard or custom page size when you add a page to the PDF document. The following sample explains how to create a PDF document with standard page size.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -34,10 +35,12 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 You can create a PDF document with custom page size by using the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -55,10 +58,12 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 You can change the page [`orientation`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageSettings/orientation.html) from [`portrait`] to landscape using the [`PdfPageOrientation`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageOrientation.html) enum by the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -80,10 +85,12 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 You can also change the [`orientation`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageSettings/orientation.html) by setting the [`rotation angle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageSettings/rotate.html) using the [`PdfPageRotateAngle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageRotateAngle.html) enum. The following code snippet explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -105,12 +112,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Creating sections in a PDF
 
 PDF [`sections`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/sections.html) are parts of a PDF document, which may contain one or more pages with their unique page settings. The following code snippet explains how to create a [`PdfSection`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSection-class.html) in a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -129,12 +138,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Performing incremental update for the PDF document
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF supports incremental update for the PDF document. The content of a PDF file can be updated incrementally without rewriting the entire file. The changes are appended to the end of the file, leaving its original contents intact. The main benefit is small changes to a large PDF document can be saved quickly but the resultant document size gets increased compared with the original PDF document. Disabling the incrementalUpdate of [`PdfFileStructure`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfFileStructure-class.html) will rewrite the entire file, which results in a smaller PDF. This is explained in the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -153,3 +164,4 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-flow-layout.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-flow-layout.md
index 1a423cb8fb..b3f0ef4625 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-flow-layout.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-flow-layout.md
@@ -15,7 +15,8 @@ The Syncfusion<sup>&reg;</sup> Flutter PDF supports creating a PDF document with
 
 The following code snippet explains how to create a PDF document with image, paragraph text, header text, and a table using flow model with the help of [`PdfLayoutResult`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutResult-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -85,3 +86,4 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-forms.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-forms.md
index 7969602059..8b85ad5e7e 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-forms.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-forms.md
@@ -21,7 +21,8 @@ The [`PdfTextBoxField `](#) class is used to create a text box field in PDF form
 
 The following code sample explains how to add a textbox field to a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -41,10 +42,12 @@ document.form.fields.add(PdfTextBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code sample explains how to add the textbox to an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -65,6 +68,7 @@ document.form.fields.add(PdfTextBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Adding the combo box field
 
@@ -72,7 +76,8 @@ The PdfComboBoxField class is used to create a combo box field in PDF forms. You
 
 Please refer to the following code sample for adding the combo box in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -94,10 +99,12 @@ document.form.fields.add(PdfComboBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 Please refer to the following code sample for adding the combo box in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -120,6 +127,7 @@ document.form.fields.add(PdfComboBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Adding the radio button field
 
@@ -127,7 +135,8 @@ To create the radio button in the PDF forms, you can use the PdfRadioButtonListF
 
 Please refer to the following code sample for adding the radio button in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -161,10 +170,12 @@ selectedIndex: 0,
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code sample shows how to add the radio button in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.  
 final PdfDocument document =
@@ -199,6 +210,7 @@ selectedIndex: 0,
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Retrieving option values from the acroform radio button
 
@@ -206,7 +218,8 @@ The Flutter PDF supports retrieving values from the acroform radio button. The v
 
 The following code example shows how to get values from the acroform radio button.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -223,6 +236,7 @@ if (radioButtonListField is PdfRadioButtonListField &&
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Adding the list box field
 
@@ -230,7 +244,8 @@ You can create the list box field in PDF forms using the PdfListBoxField class.
 
 Please refer to the following code sample for adding the list box field in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -253,10 +268,12 @@ document.form.setDefaultAppearance(true);
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 Please refer to the following code sample for adding the list box field in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -280,6 +297,7 @@ document.form.setDefaultAppearance(true);
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Adding the check Box field
 
@@ -287,7 +305,8 @@ You can create the check box field in PDF forms using the PdfCheckBoxField class
 
 Please refer to the following code sample for adding the check box field in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -308,10 +327,12 @@ document.form.fields.add(PdfCheckBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 Please refer to the following code sample for adding the check box field in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -333,6 +354,7 @@ document.form.fields.add(PdfCheckBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Adding the signature field
 
@@ -340,7 +362,8 @@ You can add the signature field in PDF forms using the PdfSignatureField class.
 
 Please refer to the following code sample for adding the signature field in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -353,10 +376,12 @@ document.form.fields.add(PdfSignatureField(document.pages.add(), 'Sign',
 File('output.pdf').writeAsBytesSync(document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 Please refer to the following code sample for adding the signature field in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -370,6 +395,7 @@ document.form.fields.add(PdfSignatureField(document.pages[0], 'Sign',
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Adding the button field
 
@@ -377,7 +403,8 @@ To create button fields in PDF forms, you can use the PdfButtonField class.
 
 The following code explains how to add the button field in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -399,10 +426,12 @@ document.form.fields.add(PdfButtonField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 Please refer to the following code sample for adding the button field in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -425,6 +454,7 @@ document.form.fields.add(PdfButtonField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Set appearance to the PDF form fields
 
@@ -432,7 +462,8 @@ After filling the form fields in the PDF document, it may appear empty due to th
 
 The following code sample explains how to set appearance to the PDF form fields.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -448,6 +479,7 @@ document.form.setDefaultAppearance(true);
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Modifying the existing form field in a PDF document
 
@@ -455,7 +487,8 @@ You can modify an existing form field by getting the field from the PdfFormField
 
 The following code sample explains how to modify an existing form field in a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -476,12 +509,14 @@ if (field is PdfTextBoxField) {
 //Save the PDF document.
 File('output.pdf').writeAsBytesSync(await document.save());
 {% endhighlight %}
+{% endtabs %}
 
 Retrieving or Modifying the fore, border, and back color of an existing form field
 
 You can retrieve or modify the fore, border, and background color of existing form fields in a PDF document by using the foreColor, borderColor, and backColor properties of the respective form fields. The following code sample explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -505,6 +540,7 @@ if (field is PdfTextBoxField) {
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Filling form fields in an existing PDF Document
 
@@ -514,7 +550,8 @@ Flutter PDF allows you to fill the form fields using the PdfField class.
 
 You can fill a text box field using the text property of PdfTextBoxField class. The following code sample explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -527,12 +564,14 @@ final PdfDocument document =
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Filling the combo box field
 
 You can fill a combo box field using the selectedValue or selectedIndex properties of PdfLoadedComboBoxField class. Please refer to the following code sample to fill the combo box field in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -548,12 +587,14 @@ if (comboBox is PdfComboBoxField && comboBox.selectedIndex != 1) {
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Filling the radio button field
 
 You can fill a radio button field using the selectedValue or selectedIndex properties of PdfRadioButtonListField class. Please refer to the following code sample to fill the radio button field in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -570,12 +611,14 @@ if (radioButtonListField is PdfRadioButtonListField &&
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Filling the list box field
 
 The following code sample explains how to fill the list box field in an existing PDF document using the selectedIndex property of PdfListBoxField class.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -588,12 +631,14 @@ final PdfDocument document =
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Filling the check box field
 
 You can fill a check box field by enabling the checked property of PdfCheckBoxField class. Please refer to the following code sample to fill the check box field.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -606,6 +651,7 @@ final PdfDocument document =
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Enumerate the form fields
 
@@ -613,7 +659,8 @@ All the form fields are maintained in the PdfFormFieldCollection class. You can
 
 The following code example explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -631,6 +678,7 @@ for (int i = 0; i < document.form.fields.count; i++) {
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing editing capability of form fields
 
@@ -640,7 +688,8 @@ Flutter PDF provides the support to flatten a form field by removing the existin
 
 Please refer to the sample for flattening the form fields in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -657,10 +706,12 @@ document.form.fields.add(PdfTextBoxField(
 File('output.pdf').writeAsBytesSync(document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 Please refer to the sample for flattening the form fields in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -676,12 +727,14 @@ document.form.flattenAllFields();
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 To prevent the user from changing the form field content, you can also use the readOnly property.
 
 The following code sample explains how to set the readOnly property to a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -698,10 +751,12 @@ document.form.fields.add(PdfTextBoxField(
 File('output.pdf').writeAsBytesSync(document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code sample explains how to set the ReadOnly property to an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document and set the form as read-only.
 PdfDocument document =
@@ -712,6 +767,7 @@ PdfDocument document =
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing the form fields from the existing PDF document
 
@@ -719,7 +775,8 @@ You can remove the form fields from an existing PDF document using the remove or
 
 The following code explains how to remove the form fields from the existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -738,6 +795,7 @@ collection.remove(collection[0]);
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Auto naming of form fields
 
@@ -749,7 +807,8 @@ While disabling this property, the field names are not auto naming, and the crea
 
 By default, the value is set to true. This is explained in the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -771,6 +830,7 @@ document.form.fields.add(PdfTextBoxField(
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding an action to the form field
 
@@ -778,7 +838,8 @@ Flutter PDF provides support to add various actions to the form fields. The PdfF
 
 The following code example explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 final PdfDocument document = PdfDocument();
@@ -798,6 +859,7 @@ document.form.fields.add(PdfButtonField(document.pages.add(),
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Importing FDF file to PDF
 
@@ -805,7 +867,8 @@ FDF (Forms Data Format) is a file format for representing form data and annotati
 
 The following code sample explains how to import the FDF file to PDF.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -819,6 +882,7 @@ document.form
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Importing XFDF file to PDF
 
@@ -826,7 +890,8 @@ XFDF (XML Forms Data Format) is used to save the form data that can be imported
 
 The following code sample explains how to import the XFDF file to PDF.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -840,6 +905,7 @@ document.form
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Importing JSON file to PDF
 
@@ -847,7 +913,8 @@ JSON (JavaScript Object Notation) file is used to save the form data that can be
 
 The following code sample explains how to import JSON files to PDF.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -864,6 +931,7 @@ document.form.setDefaultAppearance(true);
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Importing XML file to PDF
 
@@ -871,7 +939,8 @@ XML stands for an extensible markup language. The XML file is used to save the f
 
 The following code sample explains how to import XML files to PDF.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -885,6 +954,7 @@ document.form
 File('output.pdf').writeAsBytesSync(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Export PDF file to FDF
 
@@ -892,7 +962,8 @@ To export the FDF file from a PDF document, you can use the exportData method av
 
 The following code sample explains how to export the FDF file from a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the existing PDF document.
 PdfDocument document = PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
@@ -904,6 +975,7 @@ File('Export.fdf').writeAsBytesSync(document.form.exportData(DataFormat.fdf));
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Export PDF file to XFDF
 
@@ -911,7 +983,8 @@ To export the XFDF file from a PDF document, you can use the exportData method a
 
 The following code sample explains how to export the XFDF file from a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the existing PDF document.
 PdfDocument document = PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
@@ -923,6 +996,7 @@ File('Export.xfdf').writeAsBytesSync(document.form.exportData(DataFormat.xfdf));
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Export PDF file to JSON
 
@@ -930,7 +1004,8 @@ To export the JSON file from a PDF document, you can use the exportData method a
 
 The following code sample explains how to export JSON files from a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 //Load the existing PDF document.
 PdfDocument document = PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
 
@@ -941,6 +1016,7 @@ File('Export.json').writeAsBytesSync(document.form.exportData(DataFormat.json));
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Export PDF file to XML
 
@@ -948,7 +1024,8 @@ To export the XML file from a PDF document, you can use the exportData method av
 
 The following code sample explains how to export an XML file from a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the existing PDF document.
 PdfDocument document = PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
@@ -960,6 +1037,7 @@ File('Export.xml').writeAsBytesSync(document.form.exportData(DataFormat.xml));
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 
 ## Troubleshooting
@@ -968,7 +1046,8 @@ Sometimes, Form fields may appear empty in an adobe reader due to the absence of
 
 The following code explains how to enable the default appearance in a new PDF document. 
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document.
 final PdfDocument document =
@@ -991,4 +1070,5 @@ document.form.setDefaultAppearance(true);
 //Save the PDF document.
 File('output.pdf').writeAsBytesSync(await document.save());
 
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-headers-and-footers.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-headers-and-footers.md
index 844a2c7acb..90714757fb 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-headers-and-footers.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-headers-and-footers.md
@@ -17,7 +17,8 @@ This package supports to add page count, page numbers, date and time using autom
 
 The following code snippet explains how to use the graphics and automatic fields in header and footer.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new pdf document
 PdfDocument document = PdfDocument();
@@ -107,6 +108,7 @@ File('HeaderAndFooter.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 By executing the above code sample, you will get the PDF document as follows.
 
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-hyperlinks.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-hyperlinks.md
index cab9b89a35..5b64a116e5 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-hyperlinks.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-hyperlinks.md
@@ -17,7 +17,8 @@ You can navigate to a specified URL from a PDF document by using the [`PdfTextWe
 
 Refer to the following code snippet for navigating to the webpage.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new Pdf document
 PdfDocument document = PdfDocument();
@@ -41,6 +42,7 @@ File('Hyperlink.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Working with internal document navigation
 
@@ -48,7 +50,8 @@ To allow the users navigate to any other part of the same document, the [`PdfDoc
 
 The following code explains how to add the hyperlink for internal document navigation.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new Pdf document
 PdfDocument document = PdfDocument();
@@ -73,4 +76,5 @@ File('Hyperlink.pdf').writeAsBytes(await document.save());
 //Dispose document
 document.dispose();
 
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-images.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-images.md
index 2d2d7b9ac4..97f8b6ef45 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-images.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-images.md
@@ -22,7 +22,8 @@ You can load image data in [`PdfBitmap`](https://pub.dev/documentation/syncfusio
 
 The following code snippet shows how to draw an image to the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -43,12 +44,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
   
 {% endhighlight %}
+{% endtabs %}
 
 ## Applying transparency and rotation to the image
 
 You can add transparency and rotation to the image using the [`setTransparency`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/setTransparency.html) and [`rotateTransform`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/rotateTransform.html) methods of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html) respectively. This is explained in the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -84,6 +87,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Inserting image to PDF using a web URL
 
@@ -103,7 +107,8 @@ import 'package:http/http.dart' show get;
 
 This is explained in the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Create a PDF document.
     PdfDocument document = PdfDocument();
@@ -135,3 +140,4 @@ This is explained in the following code snippet.
 
 	
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-layers.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-layers.md
index f00ed700c9..387bd5aff8 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-layers.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-layers.md
@@ -17,7 +17,8 @@ Syncfusion<sup>&reg;</sup> Flutter PDF provides support to create, add, update,
 
 You can create a layer in a PDF page using the [`PdfPageLayer`](#) class. The following code sample shows how to add the multiple layers in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -62,10 +63,12 @@ graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
 File('output.pdf').writeAsBytes(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code shows how to add the multiple layers in an existing PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the existing PDF document.
 PdfDocument document =
@@ -94,6 +97,7 @@ graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
 File('output.pdf').writeAsBytes(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Toggling the visibility of layers
 
@@ -101,7 +105,8 @@ The visibility of a layer can be mentioned while creating a new page layer.
 
 The following code shows how to toggle the visibility of layers in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -127,12 +132,14 @@ graphics.drawEllipse(Rect.fromLTWH(0, 0, 50, 50),
 File('output.pdf').writeAsBytes(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing layers from an existing PDF document
 
 You can remove the layers from the layer collection represented by the [`PdfPageLayerCollection`](#) of the loaded page. This is showed in the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the existing PDF document and remove the layer on the first page.
 PdfDocument document =
@@ -143,12 +150,14 @@ PdfDocument document =
 File('output.pdf').writeAsBytes(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Nested Layers
 
 Syncfusion<sup>&reg;</sup> Flutter PDF allows users to add nested layers in the PDF document. Refer to the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new PDF document
 PdfDocument document = PdfDocument();
@@ -170,12 +179,14 @@ layer.layers.add(name: 'Nested Layer1', visible: true)
 File('output.pdf').writeAsBytes(await document.save());
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Flattening the layers in an existing PDF document
 
 You can flatten a layer in a PDF document by removing it from the [`PdfLayerCollection`](#). The following code sample explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Load the existing PDF document and flatten the layer.
 PdfDocument document =
@@ -185,4 +196,5 @@ PdfDocument document =
 File('output.pdf').writeAsBytes(await document.save());
 
 
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-lists.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-lists.md
index 2eca4c2fbc..62c9110dd0 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-lists.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-lists.md
@@ -15,7 +15,8 @@ The Syncfusion<sup>&reg;</sup> Flutter PDF allows you list the content in ordere
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF allows you to create an ordered list in the document. An ordered list is represented by the [`PdfOrderedList`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfOrderedList-class.html) class. The following code snippet explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -42,12 +43,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding an unordered list
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF also provides support to create an unordered list that is represented by the [`PdfUnorderedList`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfUnorderedList-class.html) class. The following code snippet explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -69,12 +72,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding a sub list
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF also provides support to create a sub list to a [`PdfList`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfList-class.html). A sub list can be created under both [`PdfOrderedList`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfOrderedList-class.html) and [`PdfUnorderedList`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfUnorderedList-class.html). The following code snippet explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -155,3 +160,4 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
   
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-pages.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-pages.md
index f178a99db3..deaba3983a 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-pages.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-pages.md
@@ -13,7 +13,8 @@ documentation: ug
 
 The following code sample explains how to add a [`PdfPage`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPage-class.html) to a PDF document. When multiple pages are added, the new page will always be added to the end of the document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -28,12 +29,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Inserting pages in an existing document
 
 You can insert an empty page at any location in the existing PDF document using the insert method. The following code sample explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -49,13 +52,15 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 
 ## Adding margin to the PDF pages
 
 You can add [`margin`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageSettings/margins.html) to all the PDF pages of a PDF document using the [`pageSettings`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfDocument/pageSettings.html) property. The following code snippet explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -73,6 +78,7 @@ List<int> bytes =await document.save();
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding sections with different page settings
 
@@ -80,7 +86,8 @@ Flutter PDF supports adding sections with different page settings such as [`marg
 
 The following code snippet explains how to add more sections to a PDF document with different page settings.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a PDF document
 PdfDocument document = PdfDocument();
@@ -141,12 +148,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Get the number of pages from a PDF document
 
 You can get the page count from the existing PDF document as shown in the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -159,12 +168,14 @@ int pageCount = document.pages.count;
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Rotating a PDF page
 
 You can [`rotate`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageSettings/rotate.html) a PDF page in the PDF document using the [`PdfPageRotateAngle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPageRotateAngle.html) enum as shown in the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a PDF document
 PdfDocument document = PdfDocument();
@@ -198,12 +209,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Removing pages from a document
 
 You can remove the pages from the existing PDF document using the remove or removeAt method as shown in the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -225,3 +238,4 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-conformance.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-conformance.md
index c6559144dd..71e9d5d5ff 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-conformance.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-conformance.md
@@ -21,7 +21,8 @@ N> To know more details about PDF/A standard refer [`https://en.wikipedia.org/wi
 
 You can create a PDF/A-1b document by specifying the conformance level as a1b through PdfConformanceLevel enum when creating the new PDF document as follows.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new document with the PDF/A-1b standard
 PdfDocument document = PdfDocument(conformanceLevel: PdfConformanceLevel.a1b)
@@ -36,12 +37,14 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## PDF/A-2b conformance
 
 You can create a PDF/A-2b document by specifying the conformance level as a2b through PdfConformanceLevel enum when creating the new PDF document as follows.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new document with the PDF/A-2b standard
 PdfDocument document = PdfDocument(conformanceLevel: PdfConformanceLevel.a2b)
@@ -56,6 +59,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## PDF/A-3b conformance
 
@@ -63,7 +67,8 @@ The PDF/A-3b conformance supports the external files as attachment to the PDF do
 
 You can create a PDF/A-3b document by specifying the conformance level as a3b through PdfConformanceLevel enum when creating the new PDF document as follows.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Creates a new document with the PDF/A-3b standard
 PdfDocument document = PdfDocument(conformanceLevel: PdfConformanceLevel.a3b)
@@ -88,3 +93,4 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-templates.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-templates.md
index 0695c08fb9..e331d2ad73 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-templates.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-pdf-templates.md
@@ -17,7 +17,8 @@ The [`PdfTemplate`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/
 
 The following code example explains how to add contents to the [`PdfTemplate`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfTemplate-class.html) and render into the new PDF page.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document.
 PdfDocument document = PdfDocument();
@@ -42,6 +43,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Creating templates from existing PDF document
 
@@ -49,7 +51,8 @@ Essential<sup>&reg;</sup> PDF supports template creation using the [`CreateTempl
 
 The below code illustrates how to create the template from an existing page and draw it in a new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
     //Load the PDF document.
     PdfDocument loadedDocument =
@@ -71,6 +74,7 @@ The below code illustrates how to create the template from an existing page and
     document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Working with PdfPageTemplateElement
 
@@ -78,7 +82,8 @@ The [`PdfPageTemplateElement`](https://pub.dev/documentation/syncfusion_flutter_
 
 The following code example explains how to add the page template elements to a PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -130,6 +135,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding stamp to the PDF document
 
@@ -137,7 +143,8 @@ The Syncfusion<sup>&reg;</sup> Flutter PDF allows you add stamp to the PDF docum
 
 The following code example explains how to draw text as a stamp to the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -173,4 +180,5 @@ final List<int> bytes = await document.save();
 //Dispose the document
 document.dispose();
 
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-security.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-security.md
index 4dc914555f..1511700976 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-security.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-security.md
@@ -20,7 +20,8 @@ You can encrypt PDF document using RC4 algorithm with 40bit or 128bit key size.
 
 User password: Prevents people from opening or viewing a PDF document. Once the User Password is set, to open the PDF document, Adobe Acrobat/Reader will prompt a user to enter this password. If it is not correct, the document will not open. By setting a PDF User password, you can secure the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -45,6 +46,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 N> While using both user and owner passwords, please specify different user and owner password while encrypting the PDF document for better security.
 
@@ -52,7 +54,8 @@ You can protect the PDF document from printing, editing, copying with the [`owne
 
 Owner password: Sets PDF document restrictions, which can include printing, content copying, editing, page extracting, commenting, and more. Once the owner password is set, Acrobat will require this password to make any changes to the PDF document. It further secures the PDF document to set a PDF Owner Password.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -84,12 +87,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Working with AES Encryption
 
 You can encrypt PDF document using AES algorithm with 128bit or 256bit or 256bit Revision 6 key size. The following code snippet illustrates how to encrypt the PDF document with the [`userPassword`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSecurity/userPassword.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -114,10 +119,12 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 You can protect the PDF document from printing, editing, copying with the [`ownerPassword`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSecurity/ownerPassword.html) by using the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -148,12 +155,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Protect an existing document
 
 You can protect an existing PDF document with both [`userPassword`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSecurity/userPassword.html) and [`ownerPassword`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSecurity/ownerPassword.html) by using the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -174,12 +183,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Changing the password of the PDF document
 
 You can change the [`userPassword`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSecurity/userPassword.html) of the existing PDF document by using following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document = PdfDocument(
@@ -193,12 +204,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Remove password from the user password PDF document
 
 You can remove the [`userPassword`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfSecurity/userPassword.html) from the encrypted PDF document by using the following code snippet.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document = PdfDocument(
@@ -212,12 +225,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Change the permission of the PDF document
 
 You can change the permission of the PDF document using the [`permissions`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPermissions-class.html). The following code snippet illustrates the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document = PdfDocument(
@@ -240,6 +255,7 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## How to determine whether the PDF document is protected by user or owner password?
 
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-shapes.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-shapes.md
index bdc0f87e9f..900fd82860 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-shapes.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-shapes.md
@@ -29,7 +29,8 @@ This package supports adding shapes with various color and transparency levels.
 
 You can draw a polygon in PDF document by using the [`drawPolygon`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawPolygon.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw a polygon in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -46,12 +47,14 @@ File('Polygon.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Line
 
 You can draw a line in PDF document by using the [`drawLine`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawLine.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw a line in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -69,12 +72,14 @@ File('Line.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Curve
 
 You can draw a curve in PDF document by using the [`draw`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutElement/draw.html) method of [`PdfBezierCurve`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBezierCurve-class.html). The following code snippet explains how to draw a curve in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -94,12 +99,14 @@ File('Curve.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Path
 
 You can draw a path in PDF document by using the draw method of [`PdfPath`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPath-class.html). The following code snippet explains how to draw a path in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -122,12 +129,14 @@ File('Path.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Rectangle
 
 You can draw a rectangle in PDF document by using the [`drawRectangle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawRectangle.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw a rectangle in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -143,12 +152,14 @@ File('Rectangle.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Pie
 
 You can draw a pie in PDF document by using the [`drawPie`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawPie.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw a pie in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -165,12 +176,14 @@ File('Pie.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Arc
 
 You can draw an arc in PDF document by using the [`drawArc`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw an arc in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -187,12 +200,14 @@ File('Arc.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Bezier
 
 You can draw a bezier in PDF document by using the [`drawBezier`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawBezier.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw a bezier in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -209,12 +224,14 @@ File('Bezier.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Ellipse
 
 You can draw an ellipse in PDF document by using the [`drawEllipse`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawEllipse.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html). The following code snippet explains how to draw an ellipse in the new PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -231,3 +248,4 @@ File('Ellipse.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-tables.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-tables.md
index 137ef26ea6..0db94dc49a 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-tables.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-tables.md
@@ -17,7 +17,8 @@ The Syncfusion<sup>&reg;</sup> Flutter PDF provides support for creating customi
 
 The following code example explains how to create a table directly using [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html) with [`PdfGridStyle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridStyle-class.html), [`PdfGridColumn`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridColumn-class.html) and [`PdfGridRow`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridRow-class.html) classes.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -64,6 +65,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Cell customization in PdfGrid
 
@@ -71,7 +73,8 @@ document.dispose();
 
 The following code snippet explains how to customize the cell in [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -133,6 +136,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Row customization in PdfGrid
 
@@ -140,7 +144,8 @@ You can customize row height and styles using the [`rows`](https://pub.dev/docum
 
 The following code snippet explains how to customize the row in [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -198,6 +203,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Columns customization in PdfGrid
 
@@ -205,7 +211,8 @@ You can customize the column width and text formats using the [`columns`](https:
 
 The following code snippet explains how to customize the column in [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -252,6 +259,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Table customization in PdfGrid
 
@@ -259,7 +267,8 @@ Flutter PDF supports users to create a customizable PDF table like [`cellSpacing
 
 The following code snippet explains how to customize the [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html) using [`PdfGridStyle`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridStyle-class.html).
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new Pdf document
 PdfDocument document = PdfDocument();
@@ -343,6 +352,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Pagination in PdfGrid
 
@@ -350,7 +360,8 @@ Flutter PDF supports to paginate the [`PdfGrid`](https://pub.dev/documentation/s
 
 The following sample explains how to allow [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html) to flow across pages.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF documentation
 PdfDocument document = PdfDocument();
@@ -396,12 +407,14 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding multiple tables
 
 The Flutter PDF supports maintaining the position of a PDF grid drawn on PDF page using [`PdfLayoutResult`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutResult-class.html). It provides the rendered bounds of previously added grid, which can be used to place successive elements without overlapping. You can add multiple PDF grids using the bottom position of previously rendered PDF grid. The following code snippet explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -463,6 +476,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Apply built-in grid style
 
@@ -495,7 +509,8 @@ And we have some styles that have background color only in the header rows. Plea
 N>  We can also customize the background color of the ['PdfGrid'](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html) by using the PdfGrid.style.backgroundBrush, PdfGridRow.style.backgroundBrush and PdfGridCell.style.backgroundBrush properties. Please note that the changes in the above properties are not considered, when we apply the ['PdfGridBuiltInStyle'](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridBuiltInStyle.html) . 
 The below code example illustrates how to apply a built-in table style using the ['applyBuiltInStyle'](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid/applyBuiltInStyle.html ) method of the PdfGrid with styles from the ['PdfGridBuiltInStyle'](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridBuiltInStyle.html) Enum.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 //Create a new PDF document.
 PdfDocument document = PdfDocument();
 //Create a PdfGrid class.
@@ -533,3 +548,4 @@ List<int> bytes =await document.save();
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-text-extraction.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-text-extraction.md
index b8fb9be327..8f7c0c0878 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-text-extraction.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-text-extraction.md
@@ -17,7 +17,8 @@ You can extract the text from pages using the extractText method in the PdfTextE
 
 The following code explains how to extract the text from the entire PDF document:
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -30,10 +31,12 @@ String text = PdfTextExtractor(document).extractText();
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code sample explains how to extract the texts from a  specific page:
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -46,10 +49,12 @@ String text = PdfTextExtractor(document).extractText(startPageIndex: 0);
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code sample explains how to extract the texts from a particular page range:
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -63,6 +68,7 @@ String text = PdfTextExtractor(document)
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Text Extraction with Bounds
 
@@ -70,7 +76,8 @@ document.dispose();
 
 You can get the line and its properties that contains texts by using the TextLine. Refer to the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -105,12 +112,14 @@ List<TextWord> textWordCollection = line.wordCollection;
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Working with words
 
 You can get a single word and its properties by using the TextWord. Refer to the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -151,12 +160,14 @@ List<TextGlyph> textGlyphCollection = textWord.glyphs;
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Working with characters
 
 You can get a single character and its properties by using the TextGlyph. Refer to the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -200,6 +211,7 @@ String glyphText = textGlyph.text;
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Working with find text
 
@@ -207,7 +219,8 @@ You can find a collection of text from pages using the findText method in the Pd
 
 The following code sample explains how to find the text from an entire PDF document:
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -233,10 +246,12 @@ String text = matchedText.text;
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The following code sample explains how to find the text from a specific page.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -250,10 +265,12 @@ List<MatchedItem> textCollection = PdfTextExtractor(document)
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The TextSearchOption is used to specify the option for text search. The following code snippet explains how to find text using the search option from a particular page range.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -270,3 +287,4 @@ List<MatchedItem> textCollection = PdfTextExtractor(document).findText(
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-text.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-text.md
index d6d1d36b61..768dd4de82 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-text.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-text.md
@@ -13,7 +13,8 @@ documentation: ug
 
 You can add text to the PDF document by using the [`drawString`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawString.html) method of [`PdfGraphics`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics-class.html) class as shown in the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -30,12 +31,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Drawing text in an existing document
 
 The following code sample explains how to add text in the existing PDF document by using the [`drawString`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawString.html) method.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Loads an existing PDF document
 PdfDocument document =
@@ -56,6 +59,7 @@ File('output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Drawing text using different fonts
 
@@ -73,7 +77,8 @@ PDF has fourteen base fonts also known as standard fonts, which has special sign
 
 You can add text using the standard PDF fonts, by initializing the [`PdfFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfFont-class.html) class as [`PdfStandardFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfStandardFont-class.html) class. The following code snippet explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -90,12 +95,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Draw text using TrueType fonts
 
 You can add text using the font data, by initializing [`PdfFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfFont-class.html) class as [`PdfTrueTypeFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfTrueTypeFont-class.html) class. The font data can be loaded from the disk. The font data can be initialized to [`PdfTrueTypeFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfTrueTypeFont-class.html) as a list of bytes or base64 string format. The following code snippet explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -112,12 +119,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ### Draw text using CJK fonts
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF provides support to draw a CJK (Chinese, Japanese, Korean) text using some of the standard CJK fonts. The font data can be initialized by initializing [`PdfFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfFont-class.html) class as PDF CJK StandardFont. The following code sample explains this.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -134,12 +143,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Measuring a string
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF allows you to measure the size of a string which uses the [`PdfFont`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfFont-class.html) using the [`measureString`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfFont/measureString.html) method of it and returns the size. Refer to the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -164,12 +175,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Drawing Right-To-Left text
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF allows you to draw the right-to-left language text in a PDF document. To draw RTL scripts such as Arabic, Hebrew, Persian, and Urdu, set the value of [`textDirection`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfStringFormat/textDirection.html) property in the [`PdfStringFormat`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfStringFormat-class.html) class to rightToLeft using [`PdfTextDirection`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfTextDirection.html) enum. The languages (e.g., Sindhi and Kurdish) that have more than one script and can be written in either right-to-left or left-to-right format. The leftToRight value of the [`textDirection`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfStringFormat/textDirection.html) property is used to draw RTL text in the left-to-right format. Refer to the following code sample.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -198,12 +211,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
   
 {% endhighlight %}
+{% endtabs %}
 
 ## Creating a multicolumn PDF document
 
 Syncfusion<sup>&reg;</sup> Flutter PDF allows you to create a multi-column text in PDF document by using [`PdfTextElement`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfTextElement-class.html) class. The following code example explains the same.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -239,12 +254,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The [`PdfLayoutFormat`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutFormat-class.html) class helps to allow the text to flow across pages. The [`PdfLayoutResult`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfLayoutResult-class.html) class provides the rendered bounds of the previously added text, which can be used to place successive elements without overlapping.
 
 The following code snippet explains how to add elements relatively and also allow the text to flow across multiple pages.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -285,12 +302,14 @@ File('Output.pdf').writeAsBytes(await document.save());
 document.dispose();
 	
 {% endhighlight %}
+{% endtabs %}
 
 ## Draw text with Pens and Brushes
 
 Pens and brushes are used to draw the content on PDF document with specific color and style.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 final PdfDocument document = PdfDocument();
@@ -309,5 +328,6 @@ final List<int> bytes =await document.save();
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 The Syncfusion<sup>&reg;</sup> Flutter PDF has [`Pens`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfPens-class.html) and [`Brushes`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfBrushes-class.html) with various built-in colors to draw the content on PDF document.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/flutter/working-with-watermarks.md b/Document-Processing/PDF/PDF-Library/flutter/working-with-watermarks.md
index 3bb1cfb17c..aea556cd11 100644
--- a/Document-Processing/PDF/PDF-Library/flutter/working-with-watermarks.md
+++ b/Document-Processing/PDF/PDF-Library/flutter/working-with-watermarks.md
@@ -17,7 +17,8 @@ The Syncfusion<sup>&reg;</sup> Flutter PDF allows you draw the text watermark to
 
 The following code example explains how to draw the text watermark to the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -48,6 +49,7 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}
 
 ## Adding image watermark to a PDF document
 
@@ -55,7 +57,8 @@ To add the image watermark to a PDF document, you can draw the image with transp
 
 The following code example explains how to draw an image watermark to the PDF document.
 
-{% highlight dart %}
+{% tabs %}
+{% highlight dart tabtitle="dart" %}
 
 //Create a new PDF document
 PdfDocument document = PdfDocument();
@@ -82,3 +85,4 @@ File('SampleOutput.pdf').writeAsBytes(await document.save());
 document.dispose();
 
 {% endhighlight %}
+{% endtabs %}