Latest source merged from Syncfusion

Flutter/DateRangePicker/date-navigations.md

@@ -376,4 +376,16 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
-![Navigation arrow in Date Range Picker](images/date-navigations/navigationarrow.png)
+![Navigation arrow in Date Range Picker](images/date-navigations/navigationarrow.png)
+
+## See also
+
+[How to change the navigation direction in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12176/how-to-change-the-navigation-direction-in-the-flutter-date-range-picker-sfdaterangepicker)
+
+[How to do programmatic navigation using Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12140/how-to-do-programmatic-navigation-using-flutter-date-range-picker-sfdaterangepicker)
+
+[How to programmatically navigate to the adjacent dates in the Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/12137/how-to-programmatically-navigate-to-the-adjacent-dates-in-the-flutter-date-range-picker)
+
+[How to programmatically navigate to the date in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12135/how-to-programmatically-navigate-to-the-date-in-the-flutter-date-range-picker)
+
+[How to programmatically select the date in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12114/how-to-programmatically-select-the-date-in-the-flutter-date-range-picker-sfdaterangepicker)

Flutter/DateRangePicker/date-restrictions.md

@@ -91,4 +91,8 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
+## See also
 
+[How to enable or disable the past dates in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12168/how-to-enable-or-disable-the-past-dates-in-the-flutter-date-range-picker-sfdaterangepicker)
+
+[How to add active dates in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12075/how-to-add-active-dates-in-the-flutter-date-range-picker-sfdaterangepicker)

Flutter/DateRangePicker/hijri-date-picker.md

@@ -418,3 +418,7 @@ Widget build(BuildContext context) {
 {% endtabs %}
 
 ![Hijri year cell customization](images/hijri-picker/hijri_year_customization.png)
+
+## See also
+
+[How to use Hijri date range picker (SfHijriDateRangePicker) in Flutter](https://www.syncfusion.com/kb/12200/how-to-use-hijri-date-range-picker-sfhijridaterangepicker-in-flutter)

Flutter/DateRangePicker/views.md

@@ -161,3 +161,7 @@ Widget build(BuildContext context) {
 [How to switch between the date range picker views in the Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11305/how-to-switch-between-the-date-range-picker-views-in-flutter-date-range-picker)
 
 [How to get the current view dates in Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11331/how-to-get-the-current-view-dates-in-flutter-date-range-picker-sfdaterangepicker)
+
+[How to show two pickers vertically in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12193/how-to-show-two-pickers-vertically-in-the-flutter-date-range-picker-sfdaterangepicker)
+
+[How to change the number of weeks in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12167/how-to-change-the-number-of-weeks-in-the-flutter-date-range-picker-sfdaterangepicker)

Flutter/Release-notes/v18.3.0.48.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter Weekly Nuget Release Release Notes  
+description: Essential Studio for Flutter Weekly Nuget Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="November 11, 2020"  version="v18.3.0.48" %} 
+
+
+{% directory path: _includes/release-notes/v18.3.0.48 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.4.0.30.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2020 volume 4 Main Release Release Notes  
+description: Essential Studio for Flutter 2020 volume 4 Main Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="December 17, 2020"  version="v18.4.0.30" %} 
+
+
+{% directory path: _includes/release-notes/v18.4.0.30 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/calendar/callbacks.md

@@ -110,3 +110,4 @@ Widget build(BuildContext context) {
 
 [How to get Datetime details while tapping the Flutter event calendar elements](https://www.syncfusion.com/kb/10998/how-to-get-datetime-details-while-tapping-the-flutter-event-calendar-elements)
 
+[How to handle the long press action on date selection in the Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/12121/how-to-handle-the-long-press-action-on-date-selection-in-the-flutter-event-calendar)

Flutter/calendar/date-navigations.md

@@ -259,4 +259,20 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
-![Allowed views](images/date-navigation/allowed_views.png)
+![Allowed views](images/date-navigation/allowed_views.png)
+
+## See also
+
+[How to programmatically select the dates in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12115/how-to-programmatically-select-the-dates-in-the-flutter-event-calendar-sfcalendar)
+
+[How to programmatically navigate to the adjacent dates in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12136/how-to-programmatically-navigate-to-the-adjacent-dates-in-the-flutter-event-calendar)
+
+[How to programmatically navigate to the date in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12139/how-to-programmatically-navigate-to-the-date-in-the-flutter-event-calendar-sfcalendar)
+
+[How to do programmatic navigation using Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12141/how-to-do-programmatic-navigation-using-flutter-event-calendar-sfcalendar)	
+
+[How to restrict the visible date ranges in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12145/how-to-restrict-the-visible-date-ranges-in-the-flutter-event-calendar-sfcalendar)
+
+[How to do date navigations easily with Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12019/how-to-do-date-navigations-easily-with-flutter-event-calendar-sfcalendar)
+
+[How to integrate event calendar (SfCalendar) with date picker (SfDateRangePicker) in Flutter](https://www.syncfusion.com/kb/12047/how-to-integrate-event-calendar-sfcalendar-with-date-picker-sfdaterangepicker-in-flutter)

Flutter/calendar/month-view.md

@@ -386,4 +386,16 @@ Widget build(BuildContext context) {
 
 [How to customize the agenda item height in the flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/11015/how-to-customize-the-agenda-item-height-in-the-flutter-event-calendar-sfcalendar)
 
-[How to customize agenda view height based on the Flutter event calendar widget height](https://www.syncfusion.com/kb/11013/how-to-customize-agenda-view-height-based-on-the-flutter-event-calendar-widget-height)
+[How to customize agenda view height based on the Flutter event calendar widget height](https://www.syncfusion.com/kb/11013/how-to-customize-agenda-view-height-based-on-the-flutter-event-calendar-widget-height)
+
+[How to change the number of weeks in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12157/how-to-change-the-number-of-weeks-in-the-flutter-event-calendar-sfcalendar)
+
+[How to display two month view Calendar in a screen using Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12091/how-to-display-two-month-view-calendar-in-a-screen-using-flutter-event-calendar-sfcalendar)
+
+[How to style the month cell in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12090/how-to-style-the-month-cell-in-the-flutter-event-calendar-sfcalendar)
+
+[How to clear the appointments in month agenda view using onViewChange callback in Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12089/how-to-clear-the-appointments-in-month-agenda-view-using-onviewchange-callback-in-flutter)
+
+[How to customize the leading and trailing dates of the month cells in the Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/11988/how-to-customize-the-leading-and-trailing-dates-of-the-month-cells-in-the-flutter-event)
+
+[How to customize the month cells of the Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/12016/how-to-customize-the-month-cells-of-the-flutter-event-calendar-sfcalendar)

Flutter/calendar/resource-view.md

@@ -197,4 +197,10 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
-![Resource panel size](images/resourceview/resource_panel_size.png)
+![Resource panel size](images/resourceview/resource_panel_size.png)
+
+## See also
+
+[How to add appointment for the selected resources using appointment editor in Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/12109/how-to-add-appointment-for-the-selected-resources-using-appointment-editor-in-flutter-event)
+
+[How to add resources in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12070/how-to-add-resources-in-the-flutter-event-calendar-sfcalendar)

Flutter/datagrid/column-types.md

@@ -62,8 +62,8 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
       source: _employeeDataSource,
       columns: [
-        GridNumericColumn(mappingName: 'id', headerText: 'ID')
-          ..padding = EdgeInsets.all(20.0),
+        GridNumericColumn(mappingName: 'id', headerText: 'ID',padding: 
+        EdgeInsets.all(20.0)),
         GridTextColumn(mappingName: 'name', headerText: 'Name'),
         GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
         GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
@@ -94,8 +94,7 @@ Widget build(BuildContext context) {
         GridNumericColumn(mappingName: 'id', headerText: 'ID'),
         GridTextColumn(mappingName: 'name', headerText: 'Name'),
         GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
-        GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
-          ..visible = false,
+        GridNumericColumn(mappingName: 'salary', headerText: 'Salary',visible: false)
       ],
     ),
   );
@@ -121,8 +120,7 @@ Widget build(BuildContext context) {
       source: _employeeDataSource,
       columns: [
         GridNumericColumn(mappingName: 'id', headerText: 'ID'),
-        GridTextColumn(mappingName: 'name', headerText: 'Name')
-          ..width = 100.0,
+        GridTextColumn(mappingName: 'name', headerText: 'Name',width: 100.0),
         GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
         GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
       ],
@@ -146,9 +144,7 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
       source: _employeeDataSource,
       columns: [
-        GridNumericColumn(mappingName: 'id', headerText: 'ID')
-          ..textAlignment = Alignment.center
-          ..headerTextAlignment = Alignment.center,
+        GridNumericColumn(mappingName: 'id', headerText: 'ID', textAlignment: Alignment.center, headerTextAlignment: Alignment.center),
         GridTextColumn(mappingName: 'name', headerText: 'Name'),
         GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
         GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
@@ -175,9 +171,7 @@ Widget build(BuildContext context) {
       columns: [
         GridNumericColumn(mappingName: 'id', headerText: 'ID'),
         GridTextColumn(mappingName: 'name', headerText: 'Name'),
-        GridTextColumn(mappingName: 'designation', headerText: 'Designation')
-          ..softWrap = true
-          ..headerTextSoftWrap = true,
+        GridTextColumn(mappingName: 'designation', headerText: 'Designation', softWrap: true, headerTextSoftWrap: true),
         GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
         
       ],
@@ -201,11 +195,8 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
       source: _employeeDataSource,
       columns: [
-        GridNumericColumn(mappingName: 'id', headerText: 'ID')
-          ..overflow = TextOverflow.fade,
-        GridTextColumn(mappingName: 'name', headerText: 'Name')
-          ..overflow = TextOverflow.clip
-          ..headerTextOverflow = TextOverflow.clip,
+        GridNumericColumn(mappingName: 'id', headerText: 'ID', overflow: TextOverflow.fade),
+        GridTextColumn(mappingName: 'name', headerText: 'Name', overflow: TextOverflow.clip, headerTextOverflow: TextOverflow.clip),
         GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
         GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
       ],
@@ -246,10 +237,10 @@ Widget build(BuildContext context) {
           return null;
       },
       columns: [
-      GridNumericColumn(mappingName: 'id')..headerText = 'ID',
-      GridTextColumn(mappingName: 'name')..headerText = 'Name',
-      GridTextColumn(mappingName: 'city')..headerText = 'City',
-      GridTextColumn(mappingName: 'price')..headerText = 'Price'
+      GridNumericColumn(mappingName: 'id',headerText:'ID'),
+      GridTextColumn(mappingName: 'name',headerText: 'Name'),
+      GridTextColumn(mappingName: 'city',headerText: 'City'),
+      GridTextColumn(mappingName: 'price',headerText: 'Price')
       ],
     ),
   );
@@ -290,15 +281,17 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
       source: _employeeDataSource,
       columns: [
-        GridNumericColumn(mappingName: 'id', headerText: 'ID')
-          ..headerStyle = DataGridHeaderCellStyle(
-              textStyle:
-                  TextStyle(color: Colors.red, fontWeight: FontWeight.bold))
-          ..cellStyle =
-              DataGridCellStyle(textStyle: TextStyle(color: Colors.red)),
-        GridTextColumn(mappingName: 'name', headerText: 'Name'),
-        GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
-        GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
+        GridNumericColumn(
+              mappingName: 'id',
+              headerText: 'ID',
+              headerStyle: DataGridHeaderCellStyle(
+                  textStyle: TextStyle(
+                      color: Colors.red, fontWeight: FontWeight.bold)),
+              cellStyle:
+                  DataGridCellStyle(textStyle: TextStyle(color: Colors.red))),
+          GridTextColumn(mappingName: 'name', headerText: 'Name'),
+          GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
+          GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
       ],
     ),
   );
@@ -325,16 +318,18 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
       source: _employeeDataSource,
       columns: [
-        GridNumericColumn(mappingName: 'id', headerText: 'ID'),
-        GridTextColumn(mappingName: 'name', headerText: 'Name'),
-        GridTextColumn(mappingName: 'designation', headerText: 'Designation')
-          ..headerStyle = DataGridHeaderCellStyle(
-              textStyle:
-                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
-              backgroundColor: Colors.deepPurple)
-          ..cellStyle =
-              DataGridCellStyle(backgroundColor: Colors.deepPurple[200]),
-        GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
+         GridNumericColumn(mappingName: 'id', headerText: 'ID'),
+         GridTextColumn(mappingName: 'name', headerText: 'Name'),
+         GridTextColumn(
+              mappingName: 'designation',
+              headerText: 'Designation',
+              headerStyle: DataGridHeaderCellStyle(
+                  textStyle: TextStyle(
+                      color: Colors.white, fontWeight: FontWeight.bold),
+                  backgroundColor: Colors.deepPurple),
+              cellStyle:
+                  DataGridCellStyle(backgroundColor: Colors.deepPurple[200])),
+         GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
       ],
     ),
   );
@@ -466,8 +461,7 @@ Widget build(BuildContext context) {
         GridNumericColumn(mappingName: 'id', headerText: 'ID'),
         GridTextColumn(mappingName: 'name', headerText: 'Name'),
         GridDateTimeColumn(
-            mappingName: 'dateOfJoining', headerText: 'Date of Joining')
-          ..dateFormat = DateFormat('dd/MM/yyyy'),
+            mappingName: 'dateOfJoining', headerText: 'Date of Joining', dateFormat: DateFormat('dd/MM/yyyy')),
         GridNumericColumn(mappingName: 'salary', headerText: 'Salary'),
       ],
     ),

Flutter/datagrid/conditional-styling.md

@@ -43,11 +43,10 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
         source: _employeeDataSource,
         columns: <GridColumn>[
-          GridNumericColumn(mappingName: 'id')..headerText = 'Order ID',
-          GridTextColumn(mappingName: 'name')..headerText = 'Name',
-          GridTextColumn(mappingName: 'designation')
-            ..headerText = 'Designation',
-          GridNumericColumn(mappingName: 'salary')..headerText = 'Salary'
+          GridNumericColumn(mappingName: 'id', headerText: 'Order ID'),
+          GridTextColumn(mappingName: 'name', headerText: 'Name'),
+          GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
+          GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
         ],
         onQueryCellStyle: (QueryCellStyleArgs args) {
           if (args.column.mappingName == 'designation') {
@@ -87,15 +86,14 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
         source: _employeeDataSource,
         columns: <GridColumn>[
-          GridNumericColumn(mappingName: 'id')..headerText = 'Order ID',
-          GridTextColumn(mappingName: 'name')..headerText = 'Name',
-          GridTextColumn(mappingName: 'designation')
-            ..headerText = 'Designation',
-          GridNumericColumn(mappingName: 'salary')..headerText = 'Salary',
+          GridNumericColumn(mappingName: 'id', headerText: 'Order ID'),
+          GridTextColumn(mappingName: 'name', headerText: 'Name'),
+          GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
+          GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
         ],
         onQueryCellStyle: (QueryCellStyleArgs args) {
           if (args.column.mappingName == 'id') {
-            if (args.rowIndex % 2 == 0) {
+            if (args.rowIndex % 2 != 0) {
               return DataGridCellStyle(
                   textStyle: TextStyle(fontStyle: FontStyle.italic),
                   backgroundColor: Colors.blueAccent);
@@ -130,11 +128,10 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
         source: _employeeDataSource,
         columns: <GridColumn>[
-          GridNumericColumn(mappingName: 'id')..headerText = 'Order ID',
-          GridTextColumn(mappingName: 'name')..headerText = 'Name',
-          GridTextColumn(mappingName: 'designation')
-            ..headerText = 'Designation',
-          GridNumericColumn(mappingName: 'salary')..headerText = 'Salary',
+          GridNumericColumn(mappingName: 'id', headerText: 'Order ID'),
+          GridTextColumn(mappingName: 'name', headerText: 'Name'),
+          GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
+          GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
         ],
         onQueryRowStyle: (QueryRowStyleArgs args) {
           Employee employee = _employeeCollection[args.rowIndex];
@@ -173,14 +170,13 @@ Widget build(BuildContext context) {
     body: SfDataGrid(
         source: _employeeDataSource,
         columns: <GridColumn>[
-          GridNumericColumn(mappingName: 'id')..headerText = 'Order ID',
-          GridTextColumn(mappingName: 'name')..headerText = 'Name',
-          GridNumericColumn(mappingName: 'salary')..headerText = 'Salary',
-          GridTextColumn(mappingName: 'designation')
-            ..headerText = 'Designation',
+          GridNumericColumn(mappingName: 'id', headerText: 'Order ID'),
+          GridTextColumn(mappingName: 'name', headerText: 'Name'),
+          GridNumericColumn(mappingName: 'salary', headerText: 'Salary'),
+          GridTextColumn(mappingName: 'designation', headerText: 'Designation')
         ],
         onQueryRowStyle: (QueryRowStyleArgs args) {
-          if (args.rowIndex % 2 == 0) {
+          if (args.rowIndex % 2 != 0) {
             return DataGridCellStyle(backgroundColor: Colors.lightGreen[300]);
           }
           return null;

Flutter/datagrid/paging.md

@@ -118,19 +118,17 @@ class OrderInfoDataSource extends DataGridSource<OrderInfo> {
 
 ![flutter datapager with datagrid](images/paging/flutter-datapager.png)
 
-## Asynchronous data loading
+## Callbacks
 
-You can load the data asynchronously to the `SfDataPager` by overriding the `handlePageChange` method and await the method while loading the data.
+The SfDataPager provides [onPageNavigationStart](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationStart.html) and [onPageNavigationEnd](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationEnd.html) callbacks to listen the page navigation in widget level. 
 
-In the below example, we have set await for 2000ms and displayed the loading indicator until 2000ms.
+Typically, these callbacks are used to show and hide loading indicator.
 
 {% tabs %}
 {% highlight Dart %}
 
 final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
 
-bool showLoadingIndicator = true;
-
 @override
 Widget build(BuildContext context) {
   return Scaffold(
@@ -142,14 +140,20 @@ Widget build(BuildContext context) {
               SizedBox(
                   height: constraints.maxHeight - 60,
                   width: constraints.maxWidth,
-                  child: loadDataGrid(constraints)),
+                  child: buildDataGrid(constraints)),
               Container(
                 height: 60,
                 width: constraints.maxWidth,
                 child: SfDataPager(
-                  delegate: _orderInfoDataSource,
                   rowsPerPage: 20,
                   direction: Axis.horizontal,
+                  onPageNavigationStart: (int pageIndex) {
+                    //You can do your customization
+                  },
+                  delegate: _orderInfoDataSource,
+                  onPageNavigationEnd: (int pageIndex) {
+                    //You can do your customization
+                  },
                 ),
               )
             ],
@@ -160,7 +164,7 @@ Widget build(BuildContext context) {
   );
 }
 
-Widget getDataGrid(BoxConstraints constraint) {
+Widget buildDataGrid(BoxConstraints constraint) {
   return SfDataGrid(
       source: _orderInfoDataSource,
       columnWidthMode: ColumnWidthMode.fill,
@@ -174,35 +178,6 @@ Widget getDataGrid(BoxConstraints constraint) {
       ]);
 }
 
-Widget loadDataGrid(BoxConstraints constraints) {
-  List<Widget> _getChildren() {
-    final List<Widget> stackChildren = [];
-    if (paginatedDataSource.isNotEmpty) {
-      stackChildren.add(getDataGrid(constraints));
-    }
-
-    if (showLoadingIndicator) {
-      stackChildren.add(Container(
-        color: Colors.black12,
-        width: constraints.maxWidth,
-        height: constraints.maxHeight,
-        child: Align(
-          alignment: Alignment.center,
-          child: CircularProgressIndicator(
-            strokeWidth: 3,
-          ),
-        ),
-      ));
-    }
-
-    return stackChildren;
-  }
-
-  return Stack(
-    children: _getChildren(),
-  );
-}
-
 class OrderInfoDataSource extends DataGridSource<OrderInfo> {
   @override
   Future<bool> handlePageChange(int oldPageIndex, int newPageIndex,
@@ -212,14 +187,8 @@ class OrderInfoDataSource extends DataGridSource<OrderInfo> {
       endIndex = orderInfos.length - 1;
     }
 
-    // Show the circle progress indicator
-    showLoadingIndicator = true;
-    notifyListeners();
     await Future.delayed(Duration(milliseconds: 2000));
 
-    // hide the circle progress indicator
-    showLoadingIndicator = false;
-
     paginatedDataSource = List.from(
         orderInfos.getRange(startRowIndex, endIndex).toList(growable: false));
     notifyListeners();
@@ -230,15 +199,13 @@ class OrderInfoDataSource extends DataGridSource<OrderInfo> {
 {% endhighlight %}
 {% endtabs %}
 
-![flutter datapager with asynchronous loading](images/paging/flutter-datapager-asynchronous-loading.gif)
+## Asynchronous data loading
 
-## Callbacks
+You can load the data asynchronously to the `SfDataPager` by overriding the `handlePageChange` method and await the method while loading the data.
 
-The SfDataPager provides [onPageNavigationStart](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationStart.html) and [onPageNavigationEnd](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationEnd.html) callbacks to listen the page navigation in widget level. 
+You can use `onPageNavigationStart` and `onPageNavigationEnd` callbacks to show and hide the loading indicator when navigating between pages.
 
-Typically, these callbacks are used to show and hide loading indicator.
-
-The below example show how to show loading indicator using callbacks.
+In the below example, we have set await for 2000ms and displayed the loading indicator until 2000ms.
 
 {% tabs %}
 {% highlight Dart %}
@@ -348,6 +315,8 @@ class OrderInfoDataSource extends DataGridSource<OrderInfo> {
 {% endhighlight %}
 {% endtabs %}
 
+![flutter datapager with asynchronous loading](images/paging/flutter-datapager-asynchronous-loading.gif)
+
 >**NOTE**  
   Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-show-loading-indicator-on-loading-page-in-flutter-datatable).
 

Flutter/datagrid/row-height-customization.md

@@ -25,10 +25,10 @@ Widget build(BuildContext context) {
     source: _employeeDatasource,
     headerRowHeight: 70,
     columns: <GridColumn>[
-      GridNumericColumn(mappingName: 'id')..headerText = 'ID',
-      GridTextColumn(mappingName: 'name')..headerText = 'Name',
-      GridTextColumn(mappingName: 'designation')..headerText = 'Designation',
-      GridNumericColumn(mappingName: 'salary')..headerText = 'Salary',
+      GridNumericColumn(mappingName: 'id', headerText: 'ID'),
+      GridTextColumn(mappingName: 'name', headerText: 'Name'),
+      GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
+      GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
     ],
   ));
 }
@@ -52,10 +52,10 @@ Widget build(BuildContext context) {
     source: _employeeDatasource,
     rowHeight: 60,
     columns: <GridColumn>[
-      GridNumericColumn(mappingName: 'id')..headerText = 'ID',
-      GridTextColumn(mappingName: 'name')..headerText = 'Name',
-      GridTextColumn(mappingName: 'designation')..headerText = 'Designation',
-      GridNumericColumn(mappingName: 'salary')..headerText = 'Salary',
+      GridNumericColumn(mappingName: 'id', headerText: 'ID'),
+      GridTextColumn(mappingName: 'name', headerText: 'Name'),
+      GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
+      GridNumericColumn(mappingName: 'salary', headerText: 'Salary')
     ],
   ));
 }
@@ -93,34 +93,34 @@ Widget build(BuildContext context) {
             return height;
           },
           columns: <GridColumn>[
-        GridTextColumn(mappingName: 'id')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'ID',
-        GridTextColumn(mappingName: 'contactName')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Contact Name',
-        GridTextColumn(mappingName: 'companyName')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Company Name',
-        GridTextColumn(mappingName: 'city')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'City',
-        GridTextColumn(mappingName: 'address')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Address',
-        GridTextColumn(mappingName: 'designation')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Designation',
-        GridTextColumn(mappingName: 'country')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Country',
+        GridTextColumn(mappingName: 'id',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'ID'),
+        GridTextColumn(mappingName: 'contactName',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Contact Name'),
+        GridTextColumn(mappingName: 'companyName',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Company Name'),
+        GridTextColumn(mappingName: 'city',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'City'),
+        GridTextColumn(mappingName: 'address',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Address'),
+        GridTextColumn(mappingName: 'designation',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Designation'),
+        GridTextColumn(mappingName: 'country',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Country'),
       ]));
 }
 
@@ -158,34 +158,34 @@ Widget build(BuildContext context) {
             return height;
           },
           columns: <GridColumn>[
-        GridTextColumn(mappingName: 'id')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'ID',
-        GridTextColumn(mappingName: 'contactName')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Contact Name',
-        GridTextColumn(mappingName: 'companyName')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Company Name',
-        GridTextColumn(mappingName: 'address')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Address',
-        GridTextColumn(mappingName: 'city')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'City',
-        GridTextColumn(mappingName: 'designation')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Designation',
-        GridTextColumn(mappingName: 'country')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Country',
+        GridTextColumn(mappingName: 'id',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'ID'),
+        GridTextColumn(mappingName: 'contactName',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Contact Name'),
+        GridTextColumn(mappingName: 'companyName',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Company Name'),
+        GridTextColumn(mappingName: 'address',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Address'),
+        GridTextColumn(mappingName: 'city',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'City'),
+        GridTextColumn(mappingName: 'designation',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Designation'),
+        GridTextColumn(mappingName: 'country',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Country'),
       ]));
 }
 
@@ -216,37 +216,37 @@ Widget build(BuildContext context) {
             return height;
           },
           columns: <GridColumn>[
-        GridTextColumn(mappingName: 'id')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'ID',
-        GridTextColumn(mappingName: 'contactName')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Contact Name',
-        GridTextColumn(mappingName: 'companyName')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Company Name',
-        GridTextColumn(mappingName: 'country')
-          ..softWrap = true
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Country',
-        GridTextColumn(mappingName: 'address')
-          ..softWrap = true
-          ..visible = false
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Address',
-        GridTextColumn(mappingName: 'city')
-          ..softWrap = true
-          ..visible = false
-          ..overflow = TextOverflow.clip
-          ..headerText = 'City',
-        GridTextColumn(mappingName: 'designation')
-          ..softWrap = true
-          ..visible = false
-          ..overflow = TextOverflow.clip
-          ..headerText = 'Designation',
+        GridTextColumn(mappingName: 'id',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'ID'),
+        GridTextColumn(mappingName: 'contactName',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Contact Name'),
+        GridTextColumn(mappingName: 'companyName',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Company Name'),
+        GridTextColumn(mappingName: 'country',
+          softWrap: true,
+          overflow: TextOverflow.clip,
+          headerText: 'Country'),
+        GridTextColumn(mappingName: 'address',
+          softWrap: true,
+          visible: false,
+          overflow: TextOverflow.clip,
+          headerText: 'Address'),
+        GridTextColumn(mappingName: 'city',
+          softWrap: true,
+          visible: false,
+          overflow: TextOverflow.clip,
+          headerText: 'City'),
+        GridTextColumn(mappingName: 'designation',
+          softWrap: true,
+          visible: false,
+          overflow: TextOverflow.clip,
+          headerText: 'Designation'),
       ]));
 }
 
@@ -280,13 +280,13 @@ Widget build(BuildContext context) {
       return 49.0;
     },
     columns: <GridColumn>[
-      GridNumericColumn(mappingName: 'id')..headerText = 'ID',
-      GridTextColumn(mappingName: 'name')..headerText = 'Name',
-      GridTextColumn(mappingName: 'designation')
-        ..headerTextSoftWrap = true,
-        ..headerTextOverflow = TextOverflow.clip
-        ..headerText = 'Employee Designation',
-      GridNumericColumn(mappingName: 'salary')..headerText = 'Salary',
+      GridNumericColumn(mappingName: 'id', headerText: 'ID'),
+      GridTextColumn(mappingName: 'name', headerText: 'Name'),
+      GridTextColumn(mappingName: 'designation',
+        headerTextSoftWrap: true,
+        headerTextOverflow: TextOverflow.clip,
+        headerText: 'Employee Designation'),
+      GridNumericColumn(mappingName: 'salary', headerText: 'Salary'),
     ],
   ));
 }

Flutter/maps/getting-started.md

@@ -68,21 +68,43 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
-## Add a GeoJSON file for shape layer from various source
+## Set GeoJSON data for shape layer from various source
 
-The [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) contains collection of [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). The actual geographical rendering is done in the each [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) property of the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) can be set as the .json file from an asset bundle, from network or from Uint8List as bytes. Use the respective constructor depends on the type of the source.
+The [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) contains collection of either [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) or [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). The actual geographical rendering is done in the each [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) property of the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) can be set as the .json source from an asset bundle, from network or from Uint8List as bytes. Use the respective constructor depends on the type of the source.
 
-The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property of the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html) is used to refer the unique field name in the .json file to identify each shapes. In 'Mapping the data source' section of this document, this [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
+The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property of the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html) is used to refer the unique field name in the .json source to identify each shapes. In [`Mapping the data source`](https://help.syncfusion.com/flutter/maps/getting-started#mapping-the-data-source-for-shape-layer) section of this document, this [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
 
-N> You can get the [`australia.json`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/australia-json-910278184.zip) file here. Add this json file to the assets folder of your root directory and refer the json file path in the `pubspec.yaml` file.
-
-<b>From asset bundle</b>
+### From asset bundle
 
 Load .json data from an asset bundle.
 
+N> If you are using the [`MapShapeSource.asset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/MapShapeSource.asset.html) constructor, you must add the .json file to the assets folder of your root directory and refer the json file path in the `pubspec.yaml` file as shown in the below code snippet. You can get the [`australia.json`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/australia-json-910278184.zip) file here.
+
 {% tabs %}
 {% highlight Dart %}
 
+flutter:
+  uses-material-design: true
+  assets:
+    - australia.json
+
+{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource _dataSource;
+
+@override
+void initState() {
+  _dataSource = MapShapeSource.asset(
+    'assets/australia.json',
+    shapeDataField: 'STATE_NAME',
+  );
+  super.initState();
+}
+
 @override
 Widget build(BuildContext context) {
   return Scaffold(
@@ -90,12 +112,7 @@ Widget build(BuildContext context) {
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: [
-          MapShapeLayer(
-            source: MapShapeSource.asset(
-              'assets/australia.json',
-              shapeDataField: 'STATE_NAME',
-            ),
-          ),
+          MapShapeLayer(source: _dataSource),
         ],
       ),
     ),
@@ -105,13 +122,24 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
-<b>From network</b>
+### From network
 
 Load .json data from the network.
 
 {% tabs %}
 {% highlight Dart %}
 
+MapShapeSource _dataSource;
+
+@override
+void initState() {
+  _dataSource = MapShapeSource.network(
+    'http://www.json-generator.com/api/json/get/bVqXoJvfjC?indent=2',
+     shapeDataField: 'name',
+  );
+  super.initState();
+}
+
 @override
 Widget build(BuildContext context) {
   return Scaffold(
@@ -119,12 +147,7 @@ Widget build(BuildContext context) {
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: [
-          MapShapeLayer(
-            source: MapShapeSource.network(
-              'http://www.json-generator.com/api/json/get/bVqXoJvfjC?indent=2',
-              shapeDataField: 'name',
-            ),
-          ),
+          MapShapeLayer(source: _dataSource),
         ],
       ),
     ),
@@ -134,51 +157,43 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
-<b>From memory</b>
+### From memory
 
-Load .json data as bytes from [`Uint8List`].
+Load .json data as bytes from `Uint8List`.
 
 {% tabs %}
 {% highlight Dart %}
 
-MapShapeSource source;
-Uint8List bytesData;
-
-@override
-void initState() {
-  fetchJsonData();
-  super.initState();
-}
-
-void fetchJsonData() async {
-  Uint8List data = (await rootBundle.load('assets/australia.json')).buffer.asUint8List();
-  setState(() => bytesData = data);
-}
-
 @override
 Widget build(BuildContext context) {
-  return Scaffold(body: _getMaps());
-}
-
-Widget _getMaps() {
-  if (bytesData == null) {
-    return CircularProgressIndicator();
-  }
-
-  return Container(
-    child: SfMaps(
-      layers: [
-        MapShapeLayer(
-          source: MapShapeSource.memory(
-            bytesData,
-            shapeDataField: 'STATE_NAME',
-          ),
-        ),
-      ],
+  return Scaffold(
+    body: FutureBuilder(
+      future: _fetchJsonData(),
+      builder: (BuildContext context, snapshot) {
+        if (snapshot.hasData) {
+          Uint8List bytesData = snapshot.data;
+          return SfMaps(
+            layers: [
+              MapShapeLayer(
+                source: MapShapeSource.memory(
+                  bytesData,
+                  shapeDataField: 'STATE_NAME',
+                ),
+              ),
+            ],
+          );
+        } else {
+          return CircularProgressIndicator();
+        }
+      },
     ),
   );
 }
 
+Future<Uint8List> _fetchJsonData() async {
+  return (await rootBundle.load('assets/australia.json')).buffer.asUint8List();
+}
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -186,7 +201,7 @@ Widget _getMaps() {
 
 ## Mapping the data source for shape layer
 
-By default, the value specified for the [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) in the GeoJSON file will be used in the elements like data labels, tooltip, and legend for their respective shapes. However, it is possible to keep a data source and customize these elements based on the requirement. As mentioned above, [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
+By default, the value specified for the [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) in the GeoJSON source will be used in the elements like data labels, tooltip, and legend for their respective shapes. However, it is possible to keep a data source and customize these elements based on the requirement. As mentioned above, [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
 
 {% tabs %}
 {% highlight Dart %}
@@ -239,11 +254,11 @@ class Model {
 {% endtabs %}
 
 N>
-* Refer the [`MapShapeSource.primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html), for mapping the data of the data source collection with the respective [`MapShapeSource.shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) in .json file.
+* Refer the [`MapShapeSource.primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html), for mapping the data of the data source collection with the respective [`MapShapeSource.shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) in .json source.
 * Refer the [`MapShapeSource.bubbleSizeMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleSizeMapper.html), for customizing the bubble size.
 * Refer the [`MapShapeSource.bubbleColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleColorValueMapper.html), for customizing the bubble colors.
 * Refer the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html), for customizing the data label text.
-* Refer the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), for customizing the bubble colors.
+* Refer the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), for customizing the shape colors.
 
 ## Add shape layer maps elements
 
@@ -293,40 +308,39 @@ void initState() {
 
 @override
 Widget build(BuildContext context) {
+  final ThemeData themeData = Theme.of(context);
   return Scaffold(
-    body: Center(
-      child: Container(
-        height: 520,
-        child: Padding(
-          padding: EdgeInsets.all(15),
-          child: SfMaps(
-            title: const MapTitle('Australia map'),
-            layers: <MapShapeLayer>[
-              MapShapeLayer(
-                source: dataSource,
-                showDataLabels: true,
-                legend: MapLegend(MapElement.shape),
-                shapeTooltipBuilder: (BuildContext context, int index) {
-                  return Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Text(data[index].stateCode),
-                  );
-                },
-                tooltipSettings: MapTooltipSettings(
-                    color: Colors.grey[700],
-                    strokeColor: Colors.white,
-                    strokeWidth: 2),
-                strokeColor: Colors.white,
-                strokeWidth: 0.5,
-                dataLabelSettings: MapDataLabelSettings(
-                    textStyle: TextStyle(
-                        color: Colors.black,
-                        fontWeight: FontWeight.bold,
-                        fontSize:
-                            Theme.of(context).textTheme.caption.fontSize)),
-              ),
-            ],
-          ),
+    body: Container(
+      height: 520,
+      child: Center(
+        child: SfMaps(
+          title: const MapTitle('Australia map'),
+          layers: <MapShapeLayer>[
+            MapShapeLayer(
+              source: dataSource,
+              showDataLabels: true,
+              legend: MapLegend(MapElement.shape),
+              shapeTooltipBuilder: (BuildContext context, int index) {
+                return Padding(
+                  padding: const EdgeInsets.all(7),
+                  child: Text(data[index].stateCode,
+                      style: themeData.textTheme.caption
+                          .copyWith(color: themeData.colorScheme.surface)),
+                );
+              },
+              tooltipSettings: MapTooltipSettings(
+                  color: Colors.grey[700],
+                  strokeColor: Colors.white,
+                  strokeWidth: 2),
+              strokeColor: Colors.white,
+              strokeWidth: 0.5,
+              dataLabelSettings: MapDataLabelSettings(
+                  textStyle: TextStyle(
+                      color: Colors.black,
+                      fontWeight: FontWeight.bold,
+                      fontSize: themeData.textTheme.caption.fontSize)),
+            ),
+          ],
         ),
       ),
     ),

Flutter/maps/title.md

@@ -335,7 +335,7 @@ Widget build(BuildContext context) {
 
 ## Margin
 
-You can add margin to the maps title using the `MapsTitle.margin` property.
+You can add margin to the maps title using the [`MapsTitle.margin`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTitle/margin.html) property.
 
 {% tabs %}
 {% highlight Dart %}

Flutter/maps/tooltip.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Tooltip in Syncfusion Flutter maps | Syncfusion
-description: This section explains how to show tooltips in shape and bubble and customize its appearance in the Flutter maps.
+description: This section explains how to show tooltips in shape, bubble, and marker and customize its appearance in the Flutter maps.
 platform: Flutter
 control: SfMaps
 documentation: ug
@@ -9,123 +9,25 @@ documentation: ug
 
 # Tooltip features in maps
 
-Tooltip is used to indicate the shape, bubble information during the tap, or click interaction. This section helps to learn about how to enable tooltip for the shapes and bubbles in the maps and customize them.
+Tooltip is used to indicate the shape, bubble, marker information during the tap, or click interaction. This section helps to learn about how to show tooltip for the shapes, bubbles, and markers in the maps and customize them.
 
 ## Tooltip for the shapes
 
-It is used to clearly indicate the shape information on the tap or click. By default, the shape tooltip text is based on [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerDelegate/shapeDataField.html) value of the respective shape.
+It is used to clearly indicate the shape information on the tap or click. To show tooltip for the shape, return a widget in [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html). This widget will then be wrapped in the builtin shape which comes with the nose at the bottom.
 
-You can use the [`shapeTooltipTextMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerDelegate/shapeTooltipTextMapper.html) for changing the text of the shape tooltip.
+The [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html) will be called with the corresponding index every time when you interacts with the shapes i.e., while tapping in touch devices and hover enter in the mouse enabled devices.
 
 {% tabs %}
 {% highlight Dart %}
 
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-    body: Padding(
-      padding: EdgeInsets.only(left: 15, right: 15),
-      child: SfMaps(
-        layers: [
-          MapShapeLayer(
-            delegate: MapShapeLayerDelegate(
-              shapeFile: "assets/world_map.json",
-              shapeDataField: "continent",
-            ),
-            enableShapeTooltip: true,
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Maps shape tooltip support](images/tooltip/default_shape_tooltip.png)
-
-N>
-* Refer the [`MapTooltipSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings-class.html), for customizing the tooltip.
-
-## Customizing the shape tooltip text
-
-You can customize the shape tooltip text with the [`shapeTooltipTextMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerDelegate/shapeTooltipTextMapper.html). The [`shapeTooltipTextMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerDelegate/shapeTooltipTextMapper.html) will be called with the corresponding index every time when you tap or click on a shape. You can change the format or the entire text and return it from this callback.
-
-{% tabs %}
-{% highlight Dart %}
-
-List<Model> data;
-
-@override
-void initState() {
-    super.initState();
-
-    data = <Model>[
-      Model('Asia', '44,579,000 sq. km.'),
-      Model('Africa', '30,370,000 sq. km.'),
-      Model('Europe', '10,180,000 sq. km.'),
-      Model('North America', '24,709,000 sq. km.'),
-      Model('South America', '17,840,000 sq. km.'),
-      Model('Australia', '8,600,000 sq. km.'),
-    ];
-}
-
-@override
-Widget build(BuildContext context) {
-    return Scaffold(
-      body: Padding(
-        padding: EdgeInsets.only(left: 15, right: 15),
-        child: SfMaps(
-          layers: [
-            MapShapeLayer(
-              delegate: MapShapeLayerDelegate(
-                shapeFile: "assets/world_map.json",
-                shapeDataField: "continent",
-                dataCount: data.length,
-                primaryValueMapper: (int index) => data[index].continent,
-                shapeTooltipTextMapper: (int index) =>
-                'Continent : ' +
-                    data[index].continent +
-                    '\nArea : ' +
-                    data[index].area,
-              ),
-              enableShapeTooltip: true,
-            ),
-          ],
-        ),
-      ),
-   );
-}
-
-class Model {
-  const Model(this.continent, this.area);
-
-  final String continent;
-  final String area;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Maps tooltip text customization](images/tooltip/tooltip_text_custom.png)
-
-## Tooltip for the bubbles
-
-It is used to clearly indicate the bubble information on the tap or click. By default, the bubble tooltip text is based on [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerDelegate/shapeDataField.html) value of the respective shape.
-
-You can use the [`bubbleTooltipTextMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerDelegate/bubbleTooltipTextMapper.html) for changing the text of the bubble tooltip.
-
-{% tabs %}
-{% highlight Dart %}
-
-List<Model> data;
+List<Model> _data;
+MapShapeSource _shapeSource;
 
 @override
 void initState() {
   super.initState();
 
-  data = <Model>[
+  _data = <Model>[
     Model('Asia', 50, '44,579,000 sq. km.'),
     Model('Africa', 54, '30,370,000 sq. km.'),
     Model('Europe', 51, '10,180,000 sq. km.'),
@@ -133,30 +35,71 @@ void initState() {
     Model('South America', 12, '17,840,000 sq. km.'),
     Model('Australia', 14, '8,600,000 sq. km.'),
   ];
+
+  _shapeSource = MapShapeSource.asset(
+    "assets/world_map.json",
+    shapeDataField: "continent",
+    dataCount: _data.length,
+    primaryValueMapper: (int index) => _data[index].continent,
+  );
 }
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Padding(
-      padding: EdgeInsets.only(left: 15, right: 15),
+      padding: const EdgeInsets.only(left: 15, right: 15),
       child: SfMaps(
         layers: [
           MapShapeLayer(
-            delegate: MapShapeLayerDelegate(
-              shapeFile: "assets/world_map.json",
-              shapeDataField: "continent",
-              dataCount: data.length,
-              primaryValueMapper: (int index) => data[index].continent,
-              bubbleSizeMapper: (int index) => data[index].countriesCount,
-              bubbleTooltipTextMapper: (int index) =>
-                  'Continent : ' +
-                  data[index].continent +
-                  '\nTotal Countries : ' +
-                  data[index].countriesCount.toStringAsFixed(0),
-            ),
-            showBubbles: true,
-            enableBubbleTooltip: true,
+            source: _shapeSource,
+            shapeTooltipBuilder: (BuildContext context, int index) {
+              return Container(
+                width: 180,
+                padding: const EdgeInsets.all(10),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Stack(
+                      children: [
+                        Center(
+                          child: Text(
+                            _data[index].continent,
+                            style: TextStyle(
+                              color: Colors.white,
+                              fontSize: Theme.of(context)
+                                      .textTheme
+                                      .bodyText2
+                                      .fontSize),
+                          ),
+                        ),
+                        const Icon(
+                          Icons.map,
+                          color: Colors.white,
+                          size: 16,
+                        ),
+                      ],
+                    ),
+                    const Divider(
+                        color: Colors.white,
+                        height: 10,
+                        thickness: 1.2,
+                    ),
+                    Text(
+                      'Area : ' + _data[index].area,
+                      style: TextStyle(
+                      color: Colors.white,
+                      fontSize:
+                        Theme.of(context).textTheme.bodyText2.fontSize),
+                    ),
+                  ],
+                ),
+              );
+            },
+            tooltipSettings: const MapTooltipSettings(
+              color: Colors.blue,
+              strokeColor: Color.fromRGBO(252, 187, 15, 1),
+              strokeWidth: 1.5),
           ),
         ],
       ),
@@ -175,30 +118,28 @@ class Model {
 {% endhighlight %}
 {% endtabs %}
 
-![Maps bubble tooltip support](images/tooltip/default_bubble_tooltip.png)
+![Maps shape tooltip builder](images/tooltip/shape_tooltip_builder.png)
 
 N>
 * Refer the [`MapTooltipSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings-class.html), for customizing the tooltip.
 
-## Appearance customization
+## Tooltip for the bubbles
 
-You can customize the below appearance of the tooltip.
+It is used to clearly indicate the bubble information on the tap or click. To show tooltip for the bubble, return a widget in [MapShapeLayer.bubbleTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/bubbleTooltipBuilder.html). This widget will then be wrapped in the builtin shape which comes with the nose at the bottom.
 
-* **Background color** - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
-* **Stroke color** - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
-* **Stroke width** - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
-* **Text style** - Change the appearance of the tooltip text in the maps using the [`MapTooltipSettings.textStyle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/textStyle.html) property.
+The [MapShapeLayer.bubbleTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/bubbleTooltipBuilder.html) will be called with the corresponding index every time when you interacts with the bubbles i.e., while tapping in touch devices and hover enter in the mouse enabled devices.
 
 {% tabs %}
 {% highlight Dart %}
 
-List<Model> data;
+List<Model> _data;
+MapShapeSource _shapeSource;
 
 @override
 void initState() {
   super.initState();
 
-  data = <Model>[
+  _data = <Model>[
     Model('Asia', 50, '44,579,000 sq. km.'),
     Model('Africa', 54, '30,370,000 sq. km.'),
     Model('Europe', 51, '10,180,000 sq. km.'),
@@ -206,6 +147,158 @@ void initState() {
     Model('South America', 12, '17,840,000 sq. km.'),
     Model('Australia', 14, '8,600,000 sq. km.'),
   ];
+
+  _shapeSource = MapShapeSource.asset(
+    "assets/world_map.json",
+    shapeDataField: "continent",
+    dataCount: _data.length,
+    primaryValueMapper: (int index) => _data[index].continent,
+    bubbleSizeMapper: (int index) => _data[index].countriesCount,
+  );
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: const EdgeInsets.only(left: 15, right: 15),
+      child: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: _shapeSource,
+            bubbleTooltipBuilder: (BuildContext context, int index) {
+              return Container(
+                width: 150,
+                padding: const EdgeInsets.all(10),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Stack(
+                      children: [
+                        Center(
+                          child: Text(
+                            _data[index].continent,
+                            style: TextStyle(
+                              color: Colors.white,
+                              fontSize: Theme.of(context)
+                                      .textTheme
+                                      .bodyText2
+                                      .fontSize),
+                          ),
+                        ),
+                        const Icon(
+                          Icons.flag,
+                          color: Colors.white,
+                          size: 16,
+                        ),
+                      ],
+                    ),
+                    const Divider(
+                      color: Colors.white,
+                      height: 10,
+                      thickness: 1.2,
+                    ),
+                    Text(
+                      'Total Countries : ' +
+                        _data[index].countriesCount.toInt().toString(),
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize:
+                          Theme.of(context).textTheme.bodyText2.fontSize),
+                    ),
+                  ],
+                ),
+              );
+            },
+            bubbleSettings: const MapBubbleSettings(
+                minRadius: 15,
+                maxRadius: 35,
+            ),
+            tooltipSettings: const MapTooltipSettings(
+              color: Color.fromRGBO(98, 0, 238, 1),
+              strokeColor: Color.fromRGBO(252, 187, 15, 1),
+              strokeWidth: 1.5),
+          ),
+        ],
+      ),
+    ),
+  );
+}
+
+class Model {
+  const Model(this.continent, this.countriesCount, this.area);
+
+  final String continent;
+  final double countriesCount;
+  final String area;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Maps bubble tooltip builder](images/tooltip/bubble_tooltip_builder.png)
+
+N>
+* Refer the [`MapTooltipSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings-class.html), for customizing the tooltip.
+
+## Tooltip for the markers
+
+It is used to clearly indicate the marker information on the tap or click. To show tooltip for the marker, return a widget in [MapLayer.markerTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerTooltipBuilder.html). This widget will then be wrapped in the builtin shape which comes with the nose at the bottom. 
+
+The [MapLayer.markerTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerTooltipBuilder.html) will be called with the corresponding index every time when you interacts with the markers i.e., while tapping in touch devices and hover enter in the mouse enabled devices.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<WorldWonderModel> _data;
+MapShapeSource _shapeSource;
+
+@override
+void initState() {
+  super.initState();
+
+  _data = <WorldWonderModel>[
+    WorldWonderModel(
+          place: 'Chichen Itza',
+          country: 'Mexico',
+          latitude: 20.6843,
+          longitude: -88.5678),
+    WorldWonderModel(
+          place: 'Machu Picchu',
+          country: 'Peru',
+          latitude: -13.1631,
+          longitude: -72.5450),
+    WorldWonderModel(
+          place: 'Christ the Redeemer',
+          country: 'Brazil',
+          latitude: -22.9519,
+          longitude: -43.2105),
+    WorldWonderModel(
+          place: 'Colosseum',
+          country: 'Rome',
+          latitude: 41.8902,
+          longitude: 12.4922),
+    WorldWonderModel(
+          place: 'Petra',
+          country: 'Jordan',
+          latitude: 30.3285,
+          longitude: 35.4444),
+    WorldWonderModel(
+          place: 'Taj Mahal',
+          country: 'India',
+          latitude: 27.1751,
+          longitude: 78.0421),
+    WorldWonderModel(
+          place: 'Great Wall of China',
+          country: 'China',
+          latitude: 40.4319,
+          longitude: 116.5704)
+  ];
+
+  _shapeSource = MapShapeSource.asset(
+    "assets/world_map.json",
+    shapeDataField: "country",
+  );
 }
 
 @override
@@ -213,39 +306,177 @@ Widget build(BuildContext context) {
   return Scaffold(
     body: Padding(
       padding: EdgeInsets.only(left: 15, right: 15),
+      child: SfMaps(
+          layers: [
+            MapShapeLayer(
+              source: _shapeSource,
+              initialMarkersCount: _data.length,
+              markerBuilder: (BuildContext context, int index) {
+                return MapMarker(
+                  latitude: _data[index].latitude,
+                  longitude: _data[index].longitude,
+                  child: const Icon(
+                    Icons.location_on,
+                    color: Colors.red,
+                  ),
+                );
+              },
+              markerTooltipBuilder: (BuildContext context, int index) {
+                return Container(
+                  width: 150,
+                  padding: const EdgeInsets.all(10),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Stack(
+                        children: [
+                          Center(
+                            child: Text(
+                              _data[index].country,
+                              style: TextStyle(
+                                  color: Colors.white,
+                                  fontSize: Theme.of(context)
+                                      .textTheme
+                                      .bodyText2
+                                      .fontSize),
+                            ),
+                          ),
+                          const Icon(
+                            Icons.tour,
+                            color: Colors.white,
+                            size: 16,
+                          ),
+                        ],
+                      ),
+                      const Divider(
+                        color: Colors.white,
+                        height: 10,
+                        thickness: 1.2,
+                      ),
+                      Text(
+                        _data[index].place,
+                        style: TextStyle(
+                            color: Colors.white,
+                            fontSize:
+                                Theme.of(context).textTheme.bodyText2.fontSize),
+                      ),
+                    ],
+                  ),
+                );
+              },
+              tooltipSettings: const MapTooltipSettings(
+                  color: Colors.red,
+                  strokeColor: Colors.black,
+                  strokeWidth: 1.5),
+          ),
+        ],
+      ),
+    ),
+  );
+}
+
+
+class WorldWonderModel {
+  const WorldWonderModel(
+      {this.place, this.country, this.latitude, this.longitude});
+
+  final String place;
+  final String country;
+  final double latitude;
+  final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Maps marker tooltip builder](images/tooltip/marker_tooltip_builder.png)
+
+N>
+* Refer the [`MapTooltipSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings-class.html), for customizing the tooltip.
+
+## Appearance customization
+
+You can customize the below appearances of the tooltip.
+
+* **Background color** - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
+* **Stroke color** - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
+* **Stroke width** - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<Model> _data;
+MapShapeSource _shapeSource;
+
+@override
+void initState() {
+  super.initState();
+
+  _data = <Model>[
+    Model('Asia', 50, '44,579,000 sq. km.'),
+    Model('Africa', 54, '30,370,000 sq. km.'),
+    Model('Europe', 51, '10,180,000 sq. km.'),
+    Model('North America', 23, '24,709,000 sq. km.'),
+    Model('South America', 12, '17,840,000 sq. km.'),
+    Model('Australia', 14, '8,600,000 sq. km.'),
+  ];
+
+  _shapeSource = MapShapeSource.asset(
+    "assets/world_map.json",
+    shapeDataField: "continent",
+    dataCount: _data.length,
+    primaryValueMapper: (int index) => _data[index].continent,
+    bubbleSizeMapper: (int index) => _data[index].countriesCount,
+  );
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: const EdgeInsets.only(left: 15, right: 15),
       child: SfMaps(
         layers: [
           MapShapeLayer(
-            delegate: MapShapeLayerDelegate(
-              shapeFile: "assets/world_map.json",
-              shapeDataField: "continent",
-              dataCount: data.length,
-              primaryValueMapper: (int index) => data[index].continent,
-              bubbleSizeMapper: (int index) => data[index].countriesCount,
-              shapeTooltipTextMapper: (int index) =>
-                  'Continent : ' +
-                  data[index].continent +
-                  '\nArea : ' +
-                  data[index].area,
-              bubbleTooltipTextMapper: (int index) =>
-                  'Continent : ' +
-                  data[index].continent +
-                  '\nTotal Countries : ' +
-                  data[index].countriesCount.toStringAsFixed(0),
-            ),
-            showBubbles: true,
-            enableBubbleTooltip: true,
-            enableShapeTooltip: true,
+            source: _shapeSource,
+            shapeTooltipBuilder: (BuildContext context, int index) {
+              return Padding(
+                padding: const EdgeInsets.all(7),
+                  child: Text(
+                    'Continent : ' +
+                        _data[index].continent +
+                        '\nArea : ' +
+                        _data[index].area,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 14,
+                      fontStyle: FontStyle.italic,
+                      fontFamily: 'Times',
+                  ),
+                ),
+              );
+            },
+            bubbleTooltipBuilder: (BuildContext context, int index) {
+              return Padding(
+                padding: const EdgeInsets.all(7),
+                child: Text(
+                    'Continent : ' +
+                        _data[index].continent +
+                        '\nTotal Countries : ' +
+                        _data[index].countriesCount.toStringAsFixed(0),
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 14,
+                      fontStyle: FontStyle.italic,
+                      fontFamily: 'Times',
+                    ),
+                ),
+              );
+            },
             tooltipSettings: const MapTooltipSettings(
               color: const Color.fromRGBO(98, 0, 238, 1),
               strokeColor: const Color.fromRGBO(252, 187, 15, 1),
               strokeWidth: 3,
-              textStyle: TextStyle(
-                color: Colors.white,
-                fontSize: 14,
-                fontStyle: FontStyle.italic,
-                fontFamily: 'Times',
-              ),
             ),
           ),
         ],
@@ -272,7 +503,6 @@ You can customize the below appearance of the tooltip using [`SfMapsTheme`](http
 * **Background color** - Change the background color of the tooltip in the maps using the [`SfMapsThemeData.tooltipColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/tooltipColor.html) property.
 * **Stroke color** - Change the stroke color of the tooltip in the maps using the [`SfMapsThemeData.tooltipStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/tooltipStrokeColor.html) property.
 * **Stroke width** - Change the stroke width of the tooltip in the maps using the [`SfMapsThemeData.tooltipStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/tooltipStrokeWidth.html) property.
-* **Text style** - Change the appearance of the tooltip text in the maps using the [`SfMapsThemeData.tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/tooltipTextStyle.html) property.
 * **Border radius** - Change the appearance of the tooltip borders in the maps using the [`SfMapsThemeData.tooltipBorderRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/tooltipBorderRadius.html) property.
 
 N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html).
@@ -280,13 +510,14 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa
 {% tabs %}
 {% highlight Dart %}
 
-List<Model> data;
+List<Model> _data;
+MapShapeSource _shapeSource;
 
 @override
 void initState() {
   super.initState();
 
-  data = <Model>[
+  _data = <Model>[
     Model('Asia', 50, '44,579,000 sq. km.'),
     Model('Africa', 54, '30,370,000 sq. km.'),
     Model('Europe', 51, '10,180,000 sq. km.'),
@@ -294,6 +525,14 @@ void initState() {
     Model('South America', 12, '17,840,000 sq. km.'),
     Model('Australia', 14, '8,600,000 sq. km.'),
   ];
+
+  _shapeSource = MapShapeSource.asset(
+    "assets/world_map.json",
+    shapeDataField: "continent",
+    dataCount: _data.length,
+    primaryValueMapper: (int index) => _data[index].continent,
+    bubbleSizeMapper: (int index) => _data[index].countriesCount,
+  );
 }
 
 @override
@@ -306,13 +545,7 @@ Widget build(BuildContext context) {
           tooltipColor: const Color.fromRGBO(98, 0, 238, 1),
           tooltipStrokeColor: const Color.fromRGBO(252, 187, 15, 1),
           tooltipStrokeWidth: 3,
-          tooltipTextStyle: TextStyle(
-            color: Colors.white,
-            fontSize: 14,
-            fontStyle: FontStyle.italic,
-            fontFamily: 'Times',
-          ),
-          tooltipBorderRadius: BorderRadiusDirectional.only(
+          tooltipBorderRadius: const BorderRadiusDirectional.only(
             topStart: Radius.circular(20),
             bottomEnd: Radius.circular(20),
           ),
@@ -320,26 +553,41 @@ Widget build(BuildContext context) {
         child: SfMaps(
           layers: [
             MapShapeLayer(
-              delegate: MapShapeLayerDelegate(
-                shapeFile: "assets/world_map.json",
-                shapeDataField: "continent",
-                dataCount: data.length,
-                primaryValueMapper: (int index) => data[index].continent,
-                bubbleSizeMapper: (int index) => data[index].countriesCount,
-                shapeTooltipTextMapper: (int index) =>
-                    'Continent : ' +
-                    data[index].continent +
-                    '\nArea : ' +
-                    data[index].area,
-                bubbleTooltipTextMapper: (int index) =>
-                    'Continent : ' +
-                  data[index].continent +
-                    '\nTotal Countries : ' +
-                    data[index].countriesCount.toStringAsFixed(0),
-              ),
-              showBubbles: true,
-              enableBubbleTooltip: true,
-              enableShapeTooltip: true,
+              source: _shapeSource,
+              shapeTooltipBuilder: (BuildContext context, int index) {
+                  return Padding(
+                      padding: const EdgeInsets.all(7),
+                        child: Text(
+                          'Continent : ' +
+                            _data[index].continent +
+                          '\nArea : ' +
+                            _data[index].area,
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 14,
+                            fontStyle: FontStyle.italic,
+                            fontFamily: 'Times',
+                      ),
+                    ),
+                );
+              },
+              bubbleTooltipBuilder: (BuildContext context, int index) {
+                  return Padding(
+                    padding: const EdgeInsets.all(7),
+                    child: Text(
+                        'Continent : ' +
+                            _data[index].continent +
+                        '\nTotal Countries : ' +
+                            _data[index].countriesCount.toStringAsFixed(0),
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontSize: 14,
+                          fontStyle: FontStyle.italic,
+                          fontFamily: 'Times',
+                        ),
+                      ),
+                  );
+              },
             ),
           ],
         ),
@@ -359,241 +607,9 @@ class Model {
 {% endhighlight %}
 {% endtabs %}
 
-![Maps tooltip Appearance customization](images/tooltip/tooltip_textStyle.png)
+![Maps tooltip appearance customization](images/tooltip/tooltip_textStyle.png)
 
 N>
-* Refer the [`MapShapeLayer.enableBubbleTooltip`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/enableBubbleTooltip.html), for enabling tooltip for the bubbles.
-* Refer the [`MapShapeLayer.enableShapeTooltip`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/enableShapeTooltip.html), for enabling tooltip for the shapes.
-
-## Custom widget for shape tooltip
-
-You can add a customized widget for shape tooltip with the [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html). The [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html) will be called with the corresponding index every time when you tap or click on a shape. You can return the customized widget from this callback.
-
-{% tabs %}
-{% highlight Dart %}
-
-List<Model> data;
-
-@override
-void initState() {
-  super.initState();
-
-  data = <Model>[
-    Model('Asia', 50, '44,579,000 sq. km.'),
-    Model('Africa', 54, '30,370,000 sq. km.'),
-    Model('Europe', 51, '10,180,000 sq. km.'),
-    Model('North America', 23, '24,709,000 sq. km.'),
-    Model('South America', 12, '17,840,000 sq. km.'),
-    Model('Australia', 14, '8,600,000 sq. km.'),
-  ];
-}
-
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-    body: Padding(
-      padding: EdgeInsets.only(left: 15, right: 15),
-      child: SfMaps(
-        layers: [
-          MapShapeLayer(
-            delegate: MapShapeLayerDelegate(
-              shapeFile: "assets/world_map.json",
-              shapeDataField: "continent",
-              dataCount: data.length,
-              primaryValueMapper: (int index) => data[index].continent,
-            ),
-            enableShapeTooltip: true,
-            shapeTooltipBuilder: (context, index) {
-              return Container(
-                width: 180,
-                padding: EdgeInsets.all(10),
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Stack(
-                      children: [
-                        Center(
-                          child: Text(
-                            data[index].continent,
-                            style: TextStyle(
-                              color: Colors.white,
-                              fontSize: Theme.of(context)
-                                      .textTheme
-                                      .bodyText2
-                                      .fontSize),
-                          ),
-                        ),
-                        Icon(
-                          Icons.map,
-                          color: Colors.white,
-                          size: 16,
-                        ),
-                      ],
-                    ),
-                    SizedBox(
-                      height: 5,
-                    ),
-                    Container(
-                      color: Colors.white,
-                      height: 1,
-                    ),
-                    SizedBox(
-                      height: 5,
-                    ),
-                    Text(
-                      'Area : ' + data[index].area,
-                      style: TextStyle(
-                      color: Colors.white,
-                      fontSize:
-                        Theme.of(context).textTheme.bodyText2.fontSize),
-                    ),
-                  ],
-                ),
-              );
-            },
-            tooltipSettings: MapTooltipSettings(
-              color: Colors.blue,
-              strokeColor: const Color.fromRGBO(252, 187, 15, 1),
-              strokeWidth: 1.5),
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
-class Model {
-  const Model(this.continent, this.countriesCount, this.area);
-
-  final String continent;
-  final double countriesCount;
-  final String area;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Maps shape tooltip builder](images/tooltip/shape_tooltip_builder.png)
-
-N>
-* Refer the [`MapShapeLayer.enableShapeTooltip`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/enableShapeTooltip.html), for enabling tooltip for the shapes.
-
-## Custom widget for bubble tooltip
-
-You can add a customized widget for bubble tooltip with the [`MapShapeLayer.bubbleTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/bubbleTooltipBuilder.html). The [`MapShapeLayer.bubbleTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/bubbleTooltipBuilder.html) will be called with the corresponding index every time when you tap or click on a bubble. You can return the customized widget from this callback.
-
-{% tabs %}
-{% highlight Dart %}
-
-List<Model> data;
-
-@override
-void initState() {
-  super.initState();
-
-  data = <Model>[
-    Model('Asia', 50, '44,579,000 sq. km.'),
-    Model('Africa', 54, '30,370,000 sq. km.'),
-    Model('Europe', 51, '10,180,000 sq. km.'),
-    Model('North America', 23, '24,709,000 sq. km.'),
-    Model('South America', 12, '17,840,000 sq. km.'),
-    Model('Australia', 14, '8,600,000 sq. km.'),
-  ];
-}
-
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-    body: Padding(
-      padding: EdgeInsets.only(left: 15, right: 15),
-      child: SfMaps(
-        layers: [
-          MapShapeLayer(
-            delegate: MapShapeLayerDelegate(
-              shapeFile: "assets/world_map.json",
-              shapeDataField: "continent",
-              dataCount: data.length,
-              primaryValueMapper: (int index) => data[index].continent,
-              bubbleSizeMapper: (int index) => data[index].countriesCount,
-            ),
-            showBubbles: true,
-            enableBubbleTooltip: true,
-            shapeTooltipBuilder: (context, index) {
-              return Container(
-                width: 150,
-                padding: EdgeInsets.all(10),
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Stack(
-                      children: [
-                        Center(
-                          child: Text(
-                            data[index].continent,
-                            style: TextStyle(
-                              color: Colors.white,
-                              fontSize: Theme.of(context)
-                                      .textTheme
-                                      .bodyText2
-                                      .fontSize),
-                          ),
-                        ),
-                        Icon(
-                          Icons.flag,
-                          color: Colors.white,
-                          size: 16,
-                        ),
-                      ],
-                    ),
-                    SizedBox(
-                      height: 5,
-                    ),
-                    Container(
-                      color: Colors.white,
-                      height: 1,
-                    ),
-                    SizedBox(
-                      height: 5,
-                    ),
-                    Text(
-                      'Total Countries : ' +
-                        data[index].countriesCount.toInt().toString(),
-                      style: TextStyle(
-                        color: Colors.white,
-                        fontSize:
-                          Theme.of(context).textTheme.bodyText2.fontSize),
-                    ),
-                  ],
-                ),
-              );
-            },
-            bubbleSettings: MapBubbleSettings(
-                minRadius: 15,
-                maxRadius: 35,
-            ),
-            tooltipSettings: MapTooltipSettings(
-              color: const Color.fromRGBO(98, 0, 238, 1),
-              strokeColor: const Color.fromRGBO(252, 187, 15, 1),
-              strokeWidth: 1.5),
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
-class Model {
-  const Model(this.continent, this.countriesCount, this.area);
-
-  final String continent;
-  final double countriesCount;
-  final String area;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Maps bubble tooltip builder](images/tooltip/bubble_tooltip_builder.png)
-
-N>
-* Refer the [`MapShapeLayer.enableBubbleTooltip`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/enableBubbleTooltip.html), for enabling tooltip for the bubbles.
+* Refer the [MapShapeLayer.shapeTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html), for enabling tooltip for the shapes.
+* Refer the [MapShapeLayer.bubbleTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/bubbleTooltipBuilder.html), for enabling tooltip for the bubbles.
+* Refer the [MapLayer.markerTooltipBuilder](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerTooltipBuilder.html), for enabling tooltip for the markers.

Flutter/maps/vector-layers/arc-layer.md

@@ -0,0 +1,896 @@
+---
+layout: post
+title: Adding arcs in Syncfusion Flutter maps | Syncfusion
+description: This section explains about how to add arcs on the map and customize its appearance in the Flutter maps.
+platform: Flutter
+control: SfMaps
+documentation: ug
+---
+
+# Arcs in the Flutter maps
+
+Arc layer is a sublayer that renders a group of [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the arcs and customize them.
+
+## Adding arcs
+
+The [`arcs`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/arcs.html) is a collection of [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html). Every single [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) connects two location coordinates through a curved line. The start coordinate is set to [`MapArc.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/from.html) property and the end coordinate is set to [`MapArc.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/to.html) property.
+
+N> It is applicable for both the tile layer and shape layer.
+
+<b>In the shape layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<b>In the tile layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 3,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapTileLayer(
+          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Default arc shape](../images/arc-layer/default_arc_shape.png)
+
+## Height factor
+
+The [`heightFactor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/heightFactor.html) is the distance from the line connecting two points to the arc bend point. The default value of [`heightFactor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/heightFactor.html) property is `0.2` and the value ranges from -1 to 1.
+
+By default, the arc will always render above the [`MapArc.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/from.html) and [`MapArc.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/to.html) points. To render the arc below the points, set the value between -1 to 0.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                    heightFactor: -0.2,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc height factor](../images/arc-layer/arc_height_factor.png)
+
+## Control point factor
+
+The [`MapArc.controlPointFactor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/controlPointFactor.html) is the arc bending position. The default value of [`MapArc.controlPointFactor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/controlPointFactor.html) property is `0.5` and the value ranges from 0 to 1.
+
+By default, the arc will bend at the center between the [`MapArc.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/from.html) and [`MapArc.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/to.html) points.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(13.0827, 80.2707), MapLatLng(22.3193, 114.1694)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                    controlPointFactor: 0.2,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc control point factor](../images/arc-layer/arc_control_point_factor.png)
+
+## Color
+
+You can apply the same color for all [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) in the [`arcs`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/arcs.html) collection using the [`MapArcLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/color.html) property. Alternatively, you can apply different colors to each [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) in the [`arcs`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/arcs.html) collection using the individual [`MapArc.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/color.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+ data = <DataModel>[
+   DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074), Colors.redAccent),
+   DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737), Colors.purpleAccent),
+   DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694), Colors.deepPurple),
+   DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694), Colors.blueAccent),
+   DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707), Colors.teal),
+ ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                    color: data[index].color,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to, this.color);
+
+  final MapLatLng from;
+  final MapLatLng to;
+  final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc color](../images/arc-layer/arc_color.png)
+
+## Width
+
+You can apply the same width for all [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) in the [`arcs`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/arcs.html) collection using the [`MapArcLayer.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/width.html) property. Alternatively, you can apply different width to each [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) in the [`arcs`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/arcs.html) collection using the individual [`MapArc.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/width.html) property. The default value of the [`MapArcLayer.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/width.html) property is `2`.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074), 2),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737), 3),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644), 2),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694), 4),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694), 5),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707), 6),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                    width: data[index].width,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to, this.width);
+
+  final MapLatLng from;
+  final MapLatLng to;
+  final double width;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc width](../images/arc-layer/arc_width.png)
+
+## Dash array
+
+You can apply dash support for the arc using the [MapArc.dashArray](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/dashArray.html) property.
+
+A sequence of dash and gap will be rendered based on the values in this list. Once all values of the list is rendered, it will be repeated again till the end of the arc.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                    dashArray: [8, 4, 2, 4],
+                  );
+                },
+              ).toSet(),
+              color: Colors.blue,
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc dash array](../images/arc-layer/arc_dash_array.png)
+
+## Animation
+
+You can apply animation for the [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) using the [`MapArcLayer.animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArcLayer/animation.html) property and able to customize the animation flow, curve and duration.
+
+By default, there will not be any animation.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+AnimationController animationController;
+Animation animation;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+
+  animationController = AnimationController(
+    duration: Duration(seconds: 3),
+    vsync: this,
+  );
+  animation = CurvedAnimation(
+    parent: animationController,
+    curve: Curves.easeInOut,
+  );
+  animationController.forward(from: 0);
+  super.initState();
+}
+
+@override
+void dispose() {
+  animationController?.dispose();
+  super.dispose();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                  );
+                },
+              ).toSet(),
+              color: Colors.blue,
+              animation: animation,
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc animation](../images/arc-layer/arc_animation.gif)
+
+## Tap
+
+You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc/onTap.html) callback to get a notification if the particular [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) is tapped. You can also customize the tapped [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) based on the index passed in the callback as shown in the below code snippet.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+int selectedIndex;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                    color: selectedIndex == index ? Colors.pink : Colors.blue,
+                    onTap: () {
+                       setState(() {
+                         selectedIndex = index;
+                       });
+                    }
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc tap support](../images/arc-layer/arc_tap-support.gif)
+
+## Tooltip
+
+You can show additional information about an arc drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+Random random = Random();
+
+@override
+void initState() {
+  data = <DataModel>[
+     DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+     DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+     DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ final ThemeData themeData = Theme.of(context);
+    final TextStyle textStyle = themeData.textTheme.caption
+        .copyWith(color: themeData.colorScheme.surface);
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                  );
+                },
+              ).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                 return Container(
+                    padding: EdgeInsets.only(left: 5, top: 5),
+                    height: 40,
+                    width: 100,
+                    child: Column(
+                       children: [
+                          Row(
+                            children: [
+                               Text('Flight   : ', style: textStyle),
+                               Text('Air India', style: textStyle),
+                            ],
+                          ),
+                          Row(
+                             children: [
+                                Text('Depart : ', style: textStyle),
+                                Text(random.nextInt(12).toString() + 'AM', style: textStyle),
+                             ],
+                          ),
+                       ],
+                    ),
+                );
+              },
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc tooltip support](../images/arc-layer/arc_tooltip.png)
+
+## Tooltip customization
+
+You can customize the appearance of the tooltip.
+
+* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
+* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
+* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior zoomPanBehavior;
+MapShapeSource dataSource;
+List<DataModel> data;
+Random random = Random();
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 4,
+    focalLatLng: MapLatLng(22.9734, 90.6569),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          tooltipSettings: MapTooltipSettings(
+             color: Colors.white,
+             strokeColor: Colors.black,
+             strokeWidth: 2,
+          ),
+          sublayers: [
+            MapArcLayer(
+              arcs: List<MapArc>.generate(
+                data.length,
+                    (int index) {
+                  return MapArc(
+                    from: data[index].from,
+                    to: data[index].to,
+                  );
+                },
+              ).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                 return Container(
+                    padding: EdgeInsets.only(left: 5, top: 5),
+                    height: 40,
+                    width: 100,
+                    child: Column(
+                       children: [
+                          Row(
+                            children: [
+                               Text('Flight   : '),
+                               Text('Air India'),
+                            ],
+                          ),
+                          Row(
+                             children: [
+                                Text('Depart : '),
+                                Text(random.nextInt(12).toString() + 'AM'),
+                             ],
+                          ),
+                       ],
+                    ),
+                );
+              },
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Arc tooltip customization](../images/arc-layer/arc_tooltip_customization.png)

Flutter/maps/vector-layers/circle-layer.md

@@ -0,0 +1,729 @@
+---
+layout: post
+title: Adding circles in Syncfusion Flutter maps | Syncfusion
+description: This section explains about how to add circles on the map and customize its appearance in the Flutter maps.
+platform: Flutter
+control: SfMaps
+documentation: ug
+---
+
+# Circles in the Flutter maps
+
+Circle layer is a sublayer that renders a group of [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the circles and customize them.
+
+## Adding circles
+
+The [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) is a collection of [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html). Every single [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) renders a circle using the [`MapCircle.center`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/center.html) and [`MapCircle.radius`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/radius.html) properties.
+
+N> It is applicable for both the tile layer and shape layer.
+
+<b>In the shape layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                    );
+                  },
+                ).toSet(),
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<b>In the tile layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapTileLayer(
+            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+            initialFocalLatLng: MapLatLng(20.5937, 78.9629),
+            initialZoomLevel: 4,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                    );
+                  },
+                ).toSet(),
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Default circle shape](../images/circle-layer/default-circle-shape.png)
+
+## Radius
+
+You can change the size of the circles using the [`MapCircle.radius`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/radius.html) property. The default value of the [`MapCircle.radius`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/radius.html) property is 5.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                      radius: 10,
+                    );
+                  },
+                ).toSet(),
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle radius](../images/circle-layer/circle-radius.png)
+
+## Fill color
+
+You can apply the same color for all [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the [`MapCircleLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/color.html) property. Alternatively, you can apply different colors to each [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the individual [`MapCircle.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/color.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapCircleModel> circles;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    circles = <MapCircleModel>[
+      MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink),
+      MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal),
+      MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple),
+      MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green),
+      MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange),
+      MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue),
+      MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent),
+      MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index].center,
+                      radius: 10,
+                      color: circles[index].color,
+                    );
+                  },
+                ).toSet(),
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+class MapCircleModel {
+  MapCircleModel(this.center, this.color);
+
+  final MapLatLng center;
+  final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle color](../images/circle-layer/circle-color.png)
+
+## Stroke width and color
+
+You can apply the same stroke width for all [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the [`MapCircleLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeWidth.html) property. Alternatively, you can apply different stroke width to each [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the individual [`MapCircle.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/strokeWidth.html) property. The default value of the [`MapCircleLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeWidth.html) property is `2`.
+
+You can apply the same stroke color for all [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the [`MapCircleLayer.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeColor.html) property. Alternatively, you can apply different stroke color to each [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the individual [`MapCircle.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/strokeColor.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapCircleModel> circles;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    circles = <MapCircleModel>[
+      MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink),
+      MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal),
+      MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple),
+      MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green),
+      MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange),
+      MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue),
+      MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent),
+      MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index].center,
+                      radius: index % 2 == 0 ? 10 : 20,
+                      strokeWidth: 3,
+                      strokeColor: circles[index].color,
+                    );
+                  },
+                ).toSet(),
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+class MapCircleModel {
+  MapCircleModel(this.center, this.color);
+
+  final MapLatLng center;
+  final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle stroke color](../images/circle-layer/circle-stroke-color.png)
+
+## Animation
+
+You can apply animation for the [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) using the [`MapCircleLayer.animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/animation.html) property and able to customize the animation flow, curve and duration.
+
+By default, there will not be any animation.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+MapShapeSource dataSource;
+AnimationController animationController;
+Animation animation;
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+
+    animationController = AnimationController(
+      duration: Duration(seconds: 3),
+      vsync: this,
+    );
+    animation = CurvedAnimation(
+      parent: animationController,
+      curve: Curves.easeInOut,
+    );
+    animationController.forward(from: 0);
+    super.initState();
+}
+
+@override
+void dispose() {
+  animationController?.dispose();
+  super.dispose();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                      radius: 10,
+                    );
+                  },
+                ).toSet(),
+                animation: animation,
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle animation support](../images/circle-layer/circle-animation.gif)
+
+## Tap
+
+You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/onTap.html) callback to get a notification if the particular [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) is tapped. You can also customize the tapped [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) based on the index passed in the callback as shown in the below code snippet.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+MapShapeSource dataSource;
+int selectedIndex;
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                      radius: 10,
+                      color: selectedIndex == index ? Colors.pink : Colors.blue,
+                      onTap: () {
+                         setState(() {
+                            selectedIndex = index;
+                         });
+                      },
+                    );
+                  },
+                ).toSet(),
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle tap support](../images/circle-layer/circle-tap-support.gif)
+
+## Tooltip
+
+You can show additional information about the circles drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+MapShapeSource dataSource;
+Random random = Random();
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   final ThemeData themeData = Theme.of(context);
+   final TextStyle textStyle = themeData.textTheme.caption
+        .copyWith(color: themeData.colorScheme.surface);
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                      radius: 10,
+                    );
+                  },
+                ).toSet(),
+                tooltipBuilder: (BuildContext context, int index) {
+                   return Container(
+                      padding: EdgeInsets.all(10),
+                         child: Column(
+                             mainAxisSize: MainAxisSize.min,
+                             children: [
+                                Row(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                     Text('Disease name  :', style: textStyle),
+                                     Text('  ' + 'Corona', style: textStyle),
+                                  ],
+                                ),
+                                Row(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                    Text('Active cases    :', style: textStyle),
+                                    Text('  ' + random.nextInt(62342).toString(),
+                                         style: textStyle),
+                                  ],
+                               ),
+                         ],
+                      ),
+                   );
+                 }
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle tooltip support](../images/circle-layer/circle-tooltip.png)
+
+## Tooltip customization
+
+You can customize the appearance of the tooltip.
+
+* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
+* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
+* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> circles;
+MapShapeSource dataSource;
+Random random = Random();
+
+@override
+void initState() {
+    circles = <MapLatLng>[
+      MapLatLng(15.2993, 74.1240),
+      MapLatLng(15.5057, 80.0499),
+      MapLatLng(19.7515, 75.7139),
+      MapLatLng(23.0225, 72.5714),
+      MapLatLng(24.8607, 67.0011),
+      MapLatLng(27.0238, 74.2179),
+      MapLatLng(26.8467, 80.9462),
+      MapLatLng(21.2787, 85.2799),
+      MapLatLng(20.9517, 85.0985),
+      MapLatLng(25.0961, 85.3131),
+      MapLatLng(24.6637, 93.9063),
+      MapLatLng(26.2006, 92.9376),
+      MapLatLng(28.7041, 77.1025),
+      MapLatLng(29.0588, 76.0856),
+      MapLatLng(30.0668, 79.0193),
+      MapLatLng(31.1471, 75.3412),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/india.json',
+      shapeDataField: 'name',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            tooltipSettings: const MapTooltipSettings(
+               color: Colors.white,
+               strokeWidth: 2,
+               strokeColor: Colors.black,
+            ),
+            sublayers: [
+              MapCircleLayer(
+                circles: List<MapCircle>.generate(
+                  circles.length,
+                  (int index) {
+                    return MapCircle(
+                      center: circles[index],
+                      radius: 10,
+                    );
+                  },
+                ).toSet(),
+                tooltipBuilder: (BuildContext context, int index) {
+                   return Container(
+                      padding: EdgeInsets.all(10),
+                         child: Column(
+                             mainAxisSize: MainAxisSize.min,
+                             children: [
+                               Row(
+                                 mainAxisSize: MainAxisSize.min,
+                                 children: [
+                                   Text('Disease name  :',
+                                      style: TextStyle(
+                                       color: Colors.black,
+                                        fontWeight: FontWeight.bold)),
+                                   Text('  ' + 'Corona',
+                                        style: TextStyle(color: Colors.black)),
+                                 ],
+                               ),
+                               Row(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                     Text('Active cases    :',
+                                          style: TextStyle(
+                                          color: Colors.black,
+                                          fontWeight: FontWeight.bold)),
+                                     Text('  ' + random.nextInt(62342).toString(),
+                                          style: TextStyle(color: Colors.black)),
+                                  ],
+                               ),
+                         ],
+                      ),
+                   );
+                 }
+              ),
+            ],
+          ),
+        ],
+      ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Circle tooltip customization](../images/circle-layer/circle-tooltip-customization.png)

Flutter/maps/vector-layers/line-layer.md

@@ -0,0 +1,660 @@
+---
+layout: post
+title: Adding lines in Syncfusion Flutter maps | Syncfusion
+description: This section explains about how to add lines on the map and customize its appearance in the Flutter maps.
+platform: Flutter
+control: SfMaps
+documentation: ug
+---
+
+# Lines in the Flutter maps
+
+Line layer is a sublayer that renders a group of [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the lines and customize them.
+
+## Adding lines
+
+The [`lines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/lines.html) is a collection of [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html). Every single [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) connects two location coordinates through a straight line. The start coordinate is set to [`MapLine.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine/from.html) property and the end coordinate is set to [`MapLine.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine/to.html) property.
+
+N> It is applicable for both the tile layer and shape layer.
+
+<b>In the shape layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                );
+              }).toSet(),
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<b>In the tile layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapTileLayer(
+          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                );
+              }).toSet(),
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Default line shape](../images/line-layer/default_line_shape.png)
+
+## Color
+
+You can apply the same color for all [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) in the [`lines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/lines.html) collection using the [`MapLineLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/color.html) property. Alternatively, you can apply different colors to each [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) in the [`lines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/lines.html) collection using the individual [`MapLine.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine/color.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), Colors.redAccent),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), Colors.deepPurpleAccent),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), Colors.blueAccent),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), Colors.teal),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                  color: data[index].color,
+                );
+              }).toSet(),
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to, this.color);
+
+  final MapLatLng from;
+  final MapLatLng to;
+  final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape color](../images/line-layer/line_shape_color.png)
+
+## Width
+
+You can apply the same width for all [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) in the [`lines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/lines.html) collection using the [`MapLineLayer.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/width.html) property. Alternatively, you can apply different width to each [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) in the [`lines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/lines.html) collection using the individual [`MapLine.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine/width.html) property. The default value of the [`MapLineLayer.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/width.html) property is `2`.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), 2),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), 4),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), 5),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), 6),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                  width: data[index].width,
+                );
+              }).toSet(),
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to, this.width);
+
+  final MapLatLng from;
+  final MapLatLng to;
+  final double width;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape width](../images/line-layer/line_shape_width.png)
+
+## Dash array
+
+You can apply dash support for the line using the [`MapLine.dashArray`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine/dashArray.html) property.
+
+A sequence of dash and gap will be rendered based on the values in this list. Once all values of the list is rendered, it will be repeated again till the end of the line.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+
+@override
+void initState() {
+  data = <DataModel>[
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+     DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                  dashArray: [8, 4, 2, 4],
+                );
+              }).toSet(),
+              color: Colors.blue,
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape dash array](../images/line-layer/line_shape_dash_array.png)
+
+## Animation
+
+You can apply animation for the [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) using the [`MapLineLayer.animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLineLayer/animation.html) property and able to customize the animation flow, curve and duration.
+
+By default, there will not be any animation.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+AnimationController animationController;
+Animation animation;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+
+  animationController = AnimationController(
+    duration: Duration(seconds: 3),
+    vsync: this,
+  );
+  animation = CurvedAnimation(
+    parent: animationController,
+    curve: Curves.easeInOut,
+  );
+  animationController.forward(from: 0);
+  super.initState();
+}
+
+@override
+void dispose() {
+  animationController?.dispose();
+  super.dispose();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                );
+              }).toSet(),
+              color: Colors.blue,
+              animation: animation,
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape animation](../images/line-layer/line_shape_animation.gif)
+
+## Tap
+
+You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine/onTap.html) callback to get a notification if the particular [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) is tapped. You can also customize the tapped [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) based on the index passed in the callback as shown in the below code snippet.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+int selectedIndex;
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                    from: data[index].from,
+                    to: data[index].to,
+                    color: selectedIndex == index ? Colors.pink : Colors.blue,
+                    onTap: () {
+                      setState(() {
+                        selectedIndex = index;
+                      });
+                    });
+              }).toSet(),
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape onTap](../images/line-layer/line_shape_onTap.gif)
+
+## Tooltip
+
+You can show additional information about the line drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+Random random = Random();
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ final ThemeData themeData = Theme.of(context);
+    final TextStyle textStyle = themeData.textTheme.caption
+        .copyWith(color: themeData.colorScheme.surface);
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                );
+              }).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                return Container(
+                  padding: EdgeInsets.only(left: 5, top: 5),
+                  height: 40,
+                  width: 100,
+                  child: Column(
+                    children: [
+                      Row(
+                        children: [
+                          Text('Flight   : ', style: textStyle),
+                          Text('Air India', style: textStyle),
+                        ],
+                      ),
+                      Row(
+                        children: [
+                          Text('Depart : ', style: textStyle),
+                          Text(random.nextInt(12).toString() + 'AM', style: textStyle),
+                        ],
+                      ),
+                    ],
+                  ),
+                );
+              },
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape tooltip](../images/line-layer/line_shape_tooltip.png)
+
+## Tooltip customization
+
+You can customize the appearance of the tooltip.
+
+* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
+* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
+* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapShapeSource dataSource;
+List<DataModel> data;
+Random random = Random();
+
+@override
+void initState() {
+  data = <DataModel>[
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)),
+    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)),
+  ];
+
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Padding(
+      padding: EdgeInsets.all(10),
+      child: SfMaps(layers: [
+        MapShapeLayer(
+          source: dataSource,
+          tooltipSettings: const MapTooltipSettings(
+            color: Colors.white,
+            strokeWidth: 2,
+            strokeColor: Colors.black,
+          ),
+          sublayers: [
+            MapLineLayer(
+              lines: List<MapLine>.generate(data.length, (int index) {
+                return MapLine(
+                  from: data[index].from,
+                  to: data[index].to,
+                );
+              }).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                return Container(
+                  padding: EdgeInsets.only(left: 5, top: 5),
+                  height: 40,
+                  width: 100,
+                  child: Column(
+                    children: [
+                      Row(
+                        children: [
+                          Text('Flight   : '),
+                          Text('Air India'),
+                        ],
+                      ),
+                      Row(
+                        children: [
+                          Text('Depart : '),
+                          Text(random.nextInt(12).toString() + 'AM'),
+                        ],
+                      ),
+                    ],
+                  ),
+                );
+              },
+            ),
+          ],
+        ),
+      ]),
+    ),
+  );
+}
+
+class DataModel {
+  DataModel(this.from, this.to);
+
+  final MapLatLng from;
+  final MapLatLng to;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Line shape tooltip customization](../images/line-layer/line_shape_tooltip_customization.png)

Flutter/maps/vector-layers/polygon-layer.md

@@ -0,0 +1,542 @@
+---
+layout: post
+title: Adding polygons in Syncfusion Flutter maps | Syncfusion
+description: This section explains how to add polygons on the map and customize its appearance in the Flutter maps.
+platform: Flutter
+control: SfMaps
+documentation: ug
+---
+
+# Polygons in the Flutter maps
+
+Polygon layer is a sublayer that renders a group of [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the polygons and customize them.
+
+## Adding polygons
+
+The [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) is a collection of [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html). Every single [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) connects multiple coordinates through a [`points`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/points.html) property.
+
+N> It is applicable for both the tile layer and shape layer.
+
+<b>In the shape layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+List<MapLatLng> polygon2;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    polygon1 = <MapLatLng>[
+      MapLatLng(55.7558, 37.6173),
+      MapLatLng(53.7596, 87.1216),
+      MapLatLng(61.5240, 105.3188),
+    ];
+
+    polygon2 = <MapLatLng>[
+      MapLatLng(64.2823, -135.0000),
+      MapLatLng(51.2538, -85.3232),
+      MapLatLng(48.4284, -123.3656),
+    ];
+
+    polygons = <PolygonModel>[
+      PolygonModel(polygon1),
+      PolygonModel(polygon2),
+    ];
+    dataSource = MapShapeSource.asset(
+      'assets/world_map.json',
+      shapeDataField: 'continent',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolygonLayer(
+              polygons: List<MapPolygon>.generate(
+                polygons.length,
+                (int index) {
+                  return MapPolygon(
+                    points: polygons[index].points,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+        ),
+      ],
+    ),
+  );
+}
+
+class PolygonModel {
+  PolygonModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<b>In the tile layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+List<MapLatLng> polygon2;
+
+@override
+void initState() {
+    polygon1 = <MapLatLng>[
+       MapLatLng(55.7558, 37.6173),
+       MapLatLng(53.7596, 87.1216),
+       MapLatLng(61.5240, 105.3188),
+    ];
+
+    polygon2 = <MapLatLng>[
+      MapLatLng(64.2823, -135.0000),
+      MapLatLng(51.2538, -85.3232),
+      MapLatLng(48.4284, -123.3656),
+    ];
+
+    polygons = <PolygonModel>[
+      PolygonModel(polygon1),
+      PolygonModel(polygon2),
+    ];
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapTileLayer(
+          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+          sublayers: [
+            MapPolygonLayer(
+              polygons: List<MapPolygon>.generate(
+                polygons.length,
+                (int index) {
+                  return MapPolygon(
+                    points: polygons[index].points,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+        ),
+      ],
+    ),
+  );
+}
+
+class PolygonModel {
+  PolygonModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Default polygon shape](../images/polygon-layer/default-polygon-shape.png)
+
+## Fill color
+
+You can apply the same color for all [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the [`MapPolygonLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/color.html) property. Alternatively, you can apply different colors to each [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the individual [`MapPolygon.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/color.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+List<MapLatLng> polygon2;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    polygon1 = <MapLatLng>[
+      MapLatLng(55.7558, 37.6173),
+      MapLatLng(53.7596, 87.1216),
+      MapLatLng(61.5240, 105.3188),
+    ];
+
+    polygon2 = <MapLatLng>[
+      MapLatLng(64.2823, -135.0000),
+      MapLatLng(51.2538, -85.3232),
+      MapLatLng(48.4284, -123.3656),
+    ];
+
+    polygons = <PolygonModel>[
+       PolygonModel(polygon1, Colors.greenAccent),
+       PolygonModel(polygon2, Colors.pinkAccent),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/world_map.json',
+      shapeDataField: 'continent',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolygonLayer(
+              polygons: List<MapPolygon>.generate(
+                polygons.length,
+                (int index) {
+                  return MapPolygon(
+                    points: polygons[index].points,
+                    color: polygons[index].color,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+        ),
+      ],
+    ),
+  );
+}
+
+class PolygonModel {
+  PolygonModel(this.points, this.color);
+  final List<MapLatLng> points;
+  final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polygon fill color](../images/polygon-layer/polygon-fill-color.png)
+
+## Stroke width and color
+
+You can apply the same stroke width for all [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the [`MapPolygonLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeWidth.html) property. Alternatively, you can apply different stroke width to each [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the individual [`MapPolygon.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/strokeWidth.html) property. The default value of the [`MapPolygonLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeWidth.html) property is `2`.
+
+You can apply the same stroke color for all [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the [`MapPolygonLayer.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeColor.html) property. Alternatively, you can apply different stroke color to each [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the individual [`MapPolygon.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/strokeColor.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+List<MapLatLng> polygon2;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    polygon1 = <MapLatLng>[
+       MapLatLng(55.7558, 37.6173),
+       MapLatLng(53.7596, 87.1216),
+       MapLatLng(61.5240, 105.3188),
+    ];
+
+    polygon2 = <MapLatLng>[
+      MapLatLng(64.2823, -135.0000),
+      MapLatLng(51.2538, -85.3232),
+      MapLatLng(48.4284, -123.3656),
+    ];
+
+    polygons = <PolygonModel>[
+       PolygonModel(polygon1, 3),
+       PolygonModel(polygon2, 4),
+    ];
+    dataSource = MapShapeSource.asset(
+      'assets/world_map.json',
+      shapeDataField: 'continent',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolygonLayer(
+              polygons: List<MapPolygon>.generate(
+                polygons.length,
+                (int index) {
+                  return MapPolygon(
+                    points: polygons[index].points,
+                    strokeWidth: polygons[index].width,
+                    strokeColor: Colors.pink,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+        ),
+      ],
+    ),
+  );
+}
+
+class PolygonModel {
+  PolygonModel(this.points, this.width);
+  final List<MapLatLng> points;
+  final double width;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polygon stroke color](../images/polygon-layer/polygon-stroke-color.png)
+
+## Tap
+
+You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/onTap.html) callback to get a notification if the particular [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) is tapped. You can also customize the tapped [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) based on the index passed in the callback as shown in the below code snippet.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+List<MapLatLng> polygon2;
+MapShapeSource dataSource;
+int selectedIndex;
+
+@override
+void initState() {
+    polygon1 = <MapLatLng>[
+       MapLatLng(55.7558, 37.6173),
+       MapLatLng(53.7596, 87.1216),
+       MapLatLng(61.5240, 105.3188),
+    ];
+
+    polygon2 = <MapLatLng>[
+      MapLatLng(64.2823, -135.0000),
+      MapLatLng(51.2538, -85.3232),
+      MapLatLng(48.4284, -123.3656),
+    ];
+
+    polygons = <PolygonModel>[
+      PolygonModel(polygon1),
+      PolygonModel(polygon2),
+    ];
+    dataSource = MapShapeSource.asset(
+      'assets/world_map.json',
+      shapeDataField: 'continent',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolygonLayer(
+              polygons: List<MapPolygon>.generate(
+                polygons.length,
+                (int index) {
+                  return MapPolygon(
+                    points: polygons[index].points,
+                    color: selectedIndex == index ? Colors.pink : Colors.blue,
+                    onTap: () {
+                       setState(() {
+                         selectedIndex = index;
+                       });
+                    }
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+        ),
+      ],
+    ),
+  );
+}
+
+class PolygonModel {
+  PolygonModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polygon tap support](../images/polygon-layer/polygon-tap-support.gif)
+
+## Tooltip
+
+You can show additional information about the polygon drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+List<MapLatLng> polygon2;
+MapShapeSource dataSource;
+
+@override
+void initState() {
+    polygon1 = <MapLatLng>[
+      MapLatLng(55.7558, 37.6173),
+      MapLatLng(53.7596, 87.1216),
+      MapLatLng(61.5240, 105.3188),
+    ];
+
+    polygon2 = <MapLatLng>[
+      MapLatLng(64.2823, -135.0000),
+      MapLatLng(51.2538, -85.3232),
+      MapLatLng(48.4284, -123.3656),
+    ];
+
+    polygons = <PolygonModel>[
+      PolygonModel(polygon1),
+      PolygonModel(polygon2),
+    ];
+    dataSource = MapShapeSource.asset(
+      'assets/world_map.json',
+      shapeDataField: 'continent',
+    );
+    super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolygonLayer(
+              polygons: List<MapPolygon>.generate(
+                polygons.length,
+                (int index) {
+                  return MapPolygon(
+                    points: polygons[index].points,
+                  );
+                },
+              ).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                 return Padding(
+                    padding: EdgeInsets.all(10),
+                    child: Text('Luxurious \n restaurant'),
+                 );
+              },
+            ),
+          ],
+        ),
+      ],
+    ),
+  );
+}
+
+class PolygonModel {
+  PolygonModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Tooltip customization
+
+You can customize the appearance of the tooltip.
+
+* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
+* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
+* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<PolygonModel> polygons;
+List<MapLatLng> polygon1;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+
+@override
+void initState() {
+  polygon1 = <MapLatLng>[
+    MapLatLng(27.6648, -81.5158),
+    MapLatLng(32.3078, -64.7505),
+    MapLatLng(18.2208, -66.5901),
+  ];
+
+  polygons = <PolygonModel>[
+    PolygonModel(polygon1),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/world_map.json',
+    shapeDataField: 'continent',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    focalLatLng: MapLatLng(25.3078, -74.7505),
+    zoomLevel: 4,
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+     body: SfMaps(
+        layers: [
+          MapTileLayer(
+            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+            zoomPanBehavior: zoomPanBehavior,
+            tooltipSettings: const MapTooltipSettings(
+              color: Colors.white,
+              strokeColor: Colors.black,
+              strokeWidth: 2,
+            ),
+            sublayers: [
+              MapPolygonLayer(
+                polygons: List<MapPolygon>.generate(
+                  polygons.length,
+                  (int index) {
+                    return MapPolygon(
+                      points: polygons[index].points,
+                    );
+                  },
+                ).toSet(),
+                tooltipBuilder: (BuildContext context, int index) {
+                  return Padding(
+                    padding: EdgeInsets.all(10),
+                    child: Text('Bermuda \n triangle'),
+                  );
+                },
+              ),
+            ],
+          ),
+        ],
+     ),
+   );
+}
+
+class PolygonModel {
+   PolygonModel(this.points);
+   final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}

Flutter/maps/vector-layers/polyline-layer.md

@@ -0,0 +1,804 @@
+---
+layout: post
+title: Adding polylines in Syncfusion Flutter maps | Syncfusion
+description: This section explains how to add polylines on the map and customize its appearance in the Flutter maps.
+platform: Flutter
+control: SfMaps
+documentation: ug
+---
+
+# Polylines in the Flutter maps
+
+Polyline layer is a sublayer that renders a group of [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the polylines and customize them.
+
+## Adding polylines
+
+The [`polylines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/polylines.html) is a collection of [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html). Every single [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) connects multiple coordinates through a [`points`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline/points.html) property.
+
+N> It is applicable for both the tile layer and shape layer.
+
+<b>In the shape layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<List<MapLatLng>> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <List<MapLatLng>>[polyline];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+     shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+     zoomLevel: 2,
+     focalLatLng: MapLatLng(20.3173, 78.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index],
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<b>In the tile layer</b>
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<List<MapLatLng>> polylines;
+MapZoomPanBehavior zoomPanBehavior;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <List<MapLatLng>>[polyline];
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 5,
+    focalLatLng: MapLatLng(20.3173, 78.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapTileLayer(
+          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index],
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Default polyline shape](../images/polyline-layer/default-polyline-shape.png)
+
+## Color
+
+You can apply the same color for all [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) in the [`polylines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/polylines.html) collection using the [`MapPolylineLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/color.html) property. Alternatively, you can apply different colors to each [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) in the [`polylines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/polylines.html) collection using the individual [`MapPolyline.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline/color.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline, Colors.purple),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 1,
+    focalLatLng: MapLatLng(20.3173, 78.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                    color: polylines[index].color,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points, this.color);
+  final List<MapLatLng> points;
+  final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline color](../images/polyline-layer/polyline-color.png)
+
+## Width
+
+You can apply the same width for all [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) in the [`polylines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/polylines.html) collection using the [`MapPolylineLayer.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/width.html) property. Alternatively, you can apply different width to each [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) in the [`polylines`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/polylines.html) collection using the individual [`MapPolyline.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline/width.html) property. The default value of the [`MapPolylineLayer.width`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/width.html) property is `2`.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline, 3),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 2,
+    focalLatLng: MapLatLng(20.3173, 78.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                    width: polylines[index].width,
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points, this.width);
+  final List<MapLatLng> points;
+  final double width;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline width](../images/polyline-layer/polyline-width.png)
+
+## Dash array
+
+You can apply dash support for the polyline using the [`MapPolyline.dashArray`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline/dashArray.html) property.
+
+A sequence of dash and gap will be rendered based on the values in this list. Once all values of the list is rendered, it will be repeated again till the end of the polyline.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 2,
+    focalLatLng: MapLatLng(18.3173, 77.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                    dashArray: [8, 4, 2, 4],
+                  );
+                },
+              ).toSet(),
+              color: Colors.blue,
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline dash array](../images/polyline-layer/polyline-dash-array.png)
+
+## Animation
+
+You can apply animation for the [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) using the [`MapPolylineLayer.animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolylineLayer/animation.html) property and able to customize the animation flow, curve and duration.
+
+By default, there will not be any animation.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+AnimationController animationController;
+Animation animation;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+     zoomLevel: 2,
+     focalLatLng: MapLatLng(19.3173, 76.7139),
+  );
+
+  animationController = AnimationController(
+     duration: Duration(seconds: 3),
+      vsync: this,
+  );
+  animation = CurvedAnimation(
+     parent: animationController,
+     curve: Curves.easeInOut,
+  );
+  animationController.forward(from: 0);
+  super.initState();
+}
+
+@override
+void dispose() {
+  animationController?.dispose();
+  super.dispose();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                  );
+                },
+              ).toSet(),
+              color: Colors.blue,
+              animation: animation,
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline animation](../images/polyline-layer/polyline-animation.gif)
+
+## Tap
+
+You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline/onTap.html) callback to get a notification if the particular [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) is tapped. You can also customize the tapped [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) based on the index passed in the callback as shown in the below code snippet.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+int selectedIndex;
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 2,
+    focalLatLng: MapLatLng(19.3173, 76.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                    color: selectedIndex == index ? Colors.pink: Colors.blue,
+                    onTap: () {
+                      setState(() {
+                        selectedIndex = index;
+                      });
+                    }
+                  );
+                },
+              ).toSet(),
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline tap support](../images/polyline-layer/polyline-tap-support.gif)
+
+## Tooltip
+
+You can show additional information about the polyline drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+Random random = Random();
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 2,
+    focalLatLng: MapLatLng(19.3173, 76.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  final ThemeData themeData = Theme.of(context);
+  final TextStyle textStyle = themeData.textTheme.caption
+        .copyWith(color: themeData.colorScheme.surface);
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                  );
+                },
+              ).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                 return Container(
+                    padding: EdgeInsets.only(left: 15, top: 10),
+                       width: 150,
+                       height: 50,
+                       child: Column(
+                          children: [
+                              Row(
+                                children: [
+                                   Text('Order item  :  ', style: textStyle),
+                                   Text('Pizza', style: textStyle),
+                                ],
+                              ),
+                              Row(
+                                children: [
+                                   Text('Time left    :  ', style: textStyle),
+                                   Text(random.nextInt(30).toString() + ' mins',
+                                       style: textStyle),
+                                ],
+                             ),
+                          ],
+                       ),
+                    );
+                 },
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline tooltip support](../images/polyline-layer/polyline-tooltip.png)
+
+## Tooltip customization
+
+You can customize the appearance of the tooltip.
+
+* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
+* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
+* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+List<MapLatLng> polyline;
+List<PolylineModel> polylines;
+MapShapeSource dataSource;
+MapZoomPanBehavior zoomPanBehavior;
+Random random = Random();
+
+@override
+void initState() {
+  polyline = <MapLatLng>[
+    MapLatLng(13.0827, 80.2707),
+    MapLatLng(13.1746, 79.6117),
+    MapLatLng(13.6373, 79.5037),
+    MapLatLng(14.4673, 78.8242),
+    MapLatLng(14.9091, 78.0092),
+    MapLatLng(16.2160, 77.3566),
+    MapLatLng(17.1557, 76.8697),
+    MapLatLng(18.0975, 75.4249),
+    MapLatLng(18.5204, 73.8567),
+    MapLatLng(19.0760, 72.8777),
+  ];
+
+  polylines = <PolylineModel>[
+    PolylineModel(polyline),
+  ];
+  dataSource = MapShapeSource.asset(
+    'assets/india.json',
+    shapeDataField: 'name',
+  );
+
+  zoomPanBehavior = MapZoomPanBehavior(
+    zoomLevel: 3,
+    focalLatLng: MapLatLng(15.3173, 76.7139),
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfMaps(
+      layers: [
+        MapShapeLayer(
+          source: dataSource,
+          tooltipSettings: MapTooltipSettings(
+            color: Colors.white,
+            strokeWidth: 2,
+            strokeColor: Colors.black,
+          ),
+          sublayers: [
+            MapPolylineLayer(
+              polylines: List<MapPolyline>.generate(
+                polylines.length,
+                (int index) {
+                  return MapPolyline(
+                    points: polylines[index].points,
+                  );
+                },
+              ).toSet(),
+              tooltipBuilder: (BuildContext context, int index) {
+                 return Container(
+                    padding: EdgeInsets.only(left: 15, top: 10),
+                       width: 150,
+                       height: 50,
+                       child: Column(
+                          children: [
+                            Row(
+                              children: [
+                                Text('Order item :  ',
+                                   style: TextStyle(fontWeight: FontWeight.bold)),
+                                Text('Pizza'),
+                              ],
+                            ),
+                            Row(
+                               children: [
+                                  Text('Time left    :  ',
+                                      style: TextStyle(fontWeight: FontWeight.bold)),
+                                  Text(random.nextInt(30).toString() + ' mins'),
+                               ],
+                            ),
+                          ],
+                       ),
+                    );
+                 },
+            ),
+          ],
+          zoomPanBehavior: zoomPanBehavior,
+        ),
+      ],
+    ),
+  );
+}
+
+class PolylineModel {
+  PolylineModel(this.points);
+  final List<MapLatLng> points;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Polyline tooltip customization](../images/polyline-layer/polyline-tooltip- customization.png)

Flutter/maps/zoom-pan.md

@@ -132,6 +132,63 @@ Widget build(BuildContext context) {
 
 ![Bing maps aerial focalLatLng](images/zoom-pan/bing_maps_focallatlng.png)
 
+## Update the center latitude and longitude programmatically
+
+You can change the center latitude and longitude of the shape layer programmatically using the [`MapZoomPanBehavior.focalLatLng`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/focalLatLng.html) property.
+
+N> It is applicable for both shape layer and tile layer.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior _zoomPanBehavior;
+MapShapeSource _dataSource;
+
+@override
+void initState() {
+  super.initState();
+  _dataSource = MapShapeSource.asset(
+     'assets/world_map.json',
+      shapeDataField: 'continent',
+  );
+
+  _zoomPanBehavior = MapZoomPanBehavior(
+    focalLatLng: MapLatLng(27.1751, 78.0421),
+    zoomLevel: 4,
+  );
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+     body: Column(
+        children: [
+          Container(
+            height: 600,
+            child: SfMaps(
+              layers: [
+                MapShapeLayer(
+                  source: _dataSource,
+                  zoomPanBehavior: _zoomPanBehavior,
+                ),
+              ],
+            ),
+          ),
+          SizedBox(height: 20),
+          RaisedButton(
+            child: Text('Change focalLatLng'),
+            onPressed: () {
+               _zoomPanBehavior.focalLatLng = MapLatLng(56.1304, -106.3468);
+            },
+          ),
+        ],
+     ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Customizing the zoom level
 
 You can set the current zoom level of the map layer by using [`MapZoomPanBehavior.zoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/zoomLevel.html) property.
@@ -180,6 +237,62 @@ Widget build(BuildContext context) {
 
 ![Bing maps aerial zoomlevel](images/zoom-pan/bing_maps_zoomlevel.png)
 
+## Update the zoom level programmatically
+
+You can change the zoom level of the shape layer programmatically using the [`MapZoomPanBehavior.zoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/zoomLevel.html) property.
+
+N> It is applicable for both shape layer and tile layer.
+
+{% tabs %}
+{% highlight Dart %}
+
+MapZoomPanBehavior _zoomPanBehavior;
+MapShapeSource _dataSource;
+
+@override
+void initState() {
+  _dataSource = MapShapeSource.asset(
+     'assets/world_map.json',
+     shapeDataField: 'continent',
+  );
+  _zoomPanBehavior = MapZoomPanBehavior(
+     focalLatLng: MapLatLng(27.1751, 78.0421),
+     zoomLevel: 2,
+  );
+  super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: Column(
+      children: [
+        Container(
+          height: 600,
+          child: SfMaps(
+            layers: [
+              MapShapeLayer(
+                source: _dataSource,
+                zoomPanBehavior: _zoomPanBehavior,
+              ),
+            ],
+          ),
+        ),
+        SizedBox(height: 20),
+        RaisedButton(
+          child: Text('Change zoomLevel'),
+          onPressed: () {
+            _zoomPanBehavior.zoomLevel = 7;
+          },
+        ),
+      ],
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Customizing min and max zoom level
 
 You can set the min and max zoom level of the map layer by setting the value to [`MapZoomPanBehavior.minZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/minZoomLevel.html) and [`MapZoomPanBehavior.maxZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/maxZoomLevel.html) properties. The minimum and maximum zooming levels can be restricted using these properties respectively. The default values of [`MapZoomPanBehavior.minZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/minZoomLevel.html) and [`MapZoomPanBehavior.maxZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/maxZoomLevel.html) are 1 and 15 respectively.

Flutter/pdf-viewer/document-link-annotation-navigation.md

@@ -1,31 +0,0 @@
----
-layout: post
-title: Document link annotation in Syncfusion Flutter PDF Viewer | Syncfusion
-description: This section explains about how to navigate to the desired topic in a PDF document by tapping the document link annotation in the table of contents.
-platform: Flutter
-control: SfPdfViewer
-documentation: ug
----
-
-# Document link annotation in Flutter PDF Viewer (SfPdfViewer)
-
-By default, the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to navigate to the desired topic or position by tapping its document link annotation in the table of contents in a PDF document.
-
-## Enable or disable the document link annotation navigation
-
-You can enable or disable the navigation of document link annotation using the [enableDocumentLinkAnnotation](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/enableDocumentLinkAnnotation.html) property. The following code example explains the same.
-
-{% tabs %}
-{% highlight Dart %}
-
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-      body: Container(
-          child: SfPdfViewer.network(
-              'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
-              enableDocumentLinkAnnotation: false)));
-}
-
-{% endhighlight %}
-{% endtabs %}

Flutter/pdf/overview.md

@@ -21,5 +21,6 @@ The Syncfusion Flutter PDF is a library written natively in Dart for creating th
 * Support to add tables.
 * Support to add headers and footers in PDF document.
 * Support to add bookmarks in PDF document.
+* Support to protect PDF document by encryption.
 
 You can get the sample from this link: [`Flutter PDF`](https://github.com/syncfusion/flutter-examples).

Flutter/pdf/working-with-attachments.md

@@ -0,0 +1,132 @@
+---
+layout: post
+title: Attachments of Syncfusion Flutter PDF
+description: Learn how to add, remove, and load the properties of file attachments in a PDF document using Flutter PDF.
+platform: flutter
+control: PDF
+documentation: ug
+---
+
+# Working with Attachments
+
+The Syncfusion Flutter PDF provides support for file attachments in PDF documents.
+
+Attachments can contain any kind of file with detailed information.
+
+## Adding an attachment to a PDF document
+
+You can add a file attachment to a PDF document using the PdfAttachment class. The following code example shows this.
+
+{% highlight dart %}
+
+//Creates a new PDF document
+PdfDocument document = PdfDocument();
+
+//Create and add attachment to the PDF document
+document.attachments.add(PdfAttachment(
+    'input.txt', File('input.txt').readAsBytesSync(),
+    description: 'Text File', mimeType: 'application/txt'));
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}
+
+You can also add file attachment as a base 64 string using the PdfAttachment class. The following code example shows this.
+
+{% highlight dart %}
+
+//Creates a new PDF document
+PdfDocument document = PdfDocument();
+
+//Create and add attachment to the PDF document
+document.attachments.add(PdfAttachment.fromBase64String(
+    'input.txt', 'SGVsbG8gV29ybGQ=',
+    description: 'Text File', mimeType: 'application/txt'));
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}
+
+The Syncfusion Flutter PDF also provides support for adding the attachments to an existing PDF document. The following code example shows the same.
+
+{% highlight dart %}
+
+//Loads an existing PDF document
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
+
+//Create and add attachment to the PDF document
+document.attachments.add(PdfAttachment(
+    'input.txt', File('input.txt').readAsBytesSync(),
+    description: 'Text File', mimeType: 'application/txt'));
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Loads an existing PDF document
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
+
+//Gets the attachment from the loaded document
+PdfAttachment attachment = document.attachments[0];
+
+//Removes the attachment
+document.attachments.remove(attachment);
+
+//Removes the attachment from a specific index
+document.attachments.removeAt(1);
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}
+
+## Extracting and saving an attachment to the disc
+
+The Syncfusion 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 %}
+
+//Loads an existing PDF document
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
+
+//Gets the attachment collection
+PdfAttachmentCollection attachmentCollection = document.attachments;
+
+//Iterates the attachments
+for (int i = 0; i < attachmentCollection.count; i++) {
+  //Extracts the attachment and saves it to the disk
+  File(attachmentCollection[i].fileName)
+      .writeAsBytesSync(attachmentCollection[i].data);
+}
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}

Flutter/pdf/working-with-layers.md

@@ -0,0 +1,188 @@
+---
+layout: post
+title: Layers of Syncfusion Flutter PDF
+description: Learn how to add, remove, and modify the layers in a PDF document and its pages for the Flutter PDF.
+platform: flutter
+control: PDF
+documentation: ug
+---
+
+# Working with layers in a PDF document
+
+Layers also known as Option content, refer to sections of content in a PDF document that can be selectively viewed or hidden by document authors or consumers.
+
+Syncfusion Flutter PDF provides support to create, add, update, and remove the layers from the PDF document.
+
+## Adding Layers in a PDF document
+
+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 %}
+
+//Creates a new PDF document
+PdfDocument document = PdfDocument();
+
+//Creates a new page
+PdfPage page = document.pages.add();
+
+//Add the first layer.
+PdfPageLayer layer = page.layers.add(name: 'Layer1');
+
+//Get the layer graphics.
+PdfGraphics graphics = layer.graphics;
+graphics.translateTransform(100, 60);
+
+//Draw an Arc.
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 0, 0), width: 50));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(0, 0, 250), width: 30));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 250, 0), width: 20));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(0, 250, 0), width: 10));
+
+//Add another layer on the page.
+layer = page.layers.add(name: 'Layer2', visible: false);
+
+graphics = layer.graphics;
+graphics.translateTransform(100, 180);
+
+//Draw another set of elements.
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 0, 0), width: 50));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(0, 0, 250), width: 30));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 250, 0), width: 20));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(0, 250, 0), width: 10));
+
+//Save the PDF document.
+File('output.pdf').writeAsBytes(document.save());
+
+{% endhighlight %}
+
+The following code shows how to add the multiple layers in an existing PDF document.
+
+{% highlight dart %}
+
+//Load the existing PDF document.
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
+
+//Add the first layer.
+PdfPageLayer layer =
+    document.pages[0].layers.add(name: 'Layer1', visible: true);
+
+//Get the layer graphics.
+PdfGraphics graphics = layer.graphics;
+
+graphics.translateTransform(300, 360);
+
+//Draw an Arc.
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 0, 0), width: 50));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(0, 0, 250), width: 30));
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 250, 0), width: 20));
+graphics.drawArc(const Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(0, 250, 0), width: 10));
+
+//Save the PDF document.
+File('output.pdf').writeAsBytes(document.save());
+
+{% endhighlight %}
+
+## Toggling the visibility of layers
+
+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 %}
+
+//Creates a new PDF document
+PdfDocument document = PdfDocument();
+
+//Creates a new page
+PdfPage page = document.pages.add();
+
+//Add the first layer and enable visibility.
+PdfPageLayer layer = page.layers.add(name: 'Layer1', visible: true);
+PdfGraphics graphics = layer.graphics;
+graphics.translateTransform(100, 60);
+graphics.drawArc(Rect.fromLTWH(0, 0, 50, 50), 360, 360,
+    pen: PdfPen(PdfColor(250, 0, 0), width: 50));
+
+//Add another layer on the page and disable the visibility.
+PdfPageLayer layer2 = page.layers.add(name: 'Layer2', visible: false);
+graphics = layer2.graphics;
+graphics.translateTransform(100, 180);
+graphics.drawEllipse(Rect.fromLTWH(0, 0, 50, 50),
+    pen: PdfPen(PdfColor(250, 0, 0), width: 50));
+
+//Save the PDF document.
+File('output.pdf').writeAsBytes(document.save());
+
+{% endhighlight %}
+
+## 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 %}
+
+//Load the existing PDF document and remove the layer on the first page.
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync())
+      ..pages[0].layers.removeAt(1);
+
+//Save the PDF document.
+File('output.pdf').writeAsBytes(document.save());
+
+{% endhighlight %}
+
+## Nested Layers
+
+Syncfusion Flutter PDF allows users to add nested layers in the PDF document. Refer to the following code sample.
+
+{% highlight dart %}
+
+//Creates a new PDF document
+PdfDocument document = PdfDocument();
+
+//Creates a new page
+PdfPage page = document.pages.add();
+
+//Add the first layer.
+PdfLayer layer = document.layers.add(name: 'Layer1', visible: true)
+  ..createGraphics(page).drawRectangle(
+      bounds: Rect.fromLTWH(0, 0, 200, 100), brush: PdfBrushes.red);
+
+//Create nested layer.
+layer.layers.add(name: 'Nested Layer1', visible: true)
+  ..createGraphics(page)
+      .drawRectangle(bounds: Rect.fromLTWH(0, 120, 200, 100), brush: PdfBrushes.green);
+
+//Save the PDF document.
+File('output.pdf').writeAsBytes(document.save());
+
+{% endhighlight %}
+
+## 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 %}
+
+//Load the existing PDF document and flatten the layer.
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync())..layers.removeAt(0, false);
+
+//Save the PDF document.
+File('output.pdf').writeAsBytes(document.save());
+
+
+{% endhighlight %}

Flutter/pdf/working-with-pdf-conformance.md

@@ -0,0 +1,90 @@
+---
+layout: post
+title: PDF Conformance of Syncfusion Flutter PDF
+description: Learn how to create a PDF conformance document specialized for uses such as archiving, long-term preservation and more using Flutter PDF.
+platform: flutter
+control: PDF
+documentation: ug
+---
+
+# Working with PDF Conformance
+
+The Syncfusion Flutter PDF currently supports the following PDF conformances:
+
+* PDF/A-1b conformance
+* PDF/A-2b conformance
+* PDF/A-3b conformance
+
+N> To know more details about PDF/A standard refer [`https://en.wikipedia.org/wiki/PDF/A#Description`](https://en.wikipedia.org/wiki/PDF/A#Description)
+
+## PDF/A-1b conformance
+
+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 %}
+
+//Creates a new document with the PDF/A-1b standard
+PdfDocument document = PdfDocument(conformanceLevel: PdfConformanceLevel.a1b)
+  ..pages.add().graphics.drawString('Hello World!',
+      PdfTrueTypeFont(File('arial.ttf').readAsBytesSync(), 12),
+      bounds: Rect.fromLTWH(20, 20, 200, 50));
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Creates a new document with the PDF/A-2b standard
+PdfDocument document = PdfDocument(conformanceLevel: PdfConformanceLevel.a2b)
+  ..pages.add().graphics.drawString('Hello World!',
+      PdfTrueTypeFont(File('arial.ttf').readAsBytesSync(), 12),
+      bounds: Rect.fromLTWH(20, 20, 200, 50));
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}
+
+## PDF/A-3b conformance
+
+The PDF/A-3b conformance supports the external files as attachment to the PDF document, so you can attach any document format such as Excel, Word, HTML, CAD, or XML files.
+
+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 %}
+
+//Creates a new document with the PDF/A-3b standard
+PdfDocument document = PdfDocument(conformanceLevel: PdfConformanceLevel.a3b)
+  ..pages.add().graphics.drawString('Hello World!',
+      PdfTrueTypeFont(File('arial.ttf').readAsBytesSync(), 12),
+      bounds: Rect.fromLTWH(20, 20, 200, 50));
+
+//Creates an attachment
+PdfAttachment attachment = PdfAttachment(
+    'input.txt', File('input.txt').readAsBytesSync(),
+    description: 'Input text', mimeType: 'application/txt')
+  ..relationship = PdfAttachmentRelationship.alternative
+  ..modificationDate = DateTime.now();
+
+//Adds the attachment to the document
+document.attachments.add(attachment);
+
+//Saves the document
+File('output.pdf').writeAsBytes(document.save());
+
+//Disposes the document
+document.dispose();
+
+{% endhighlight %}

Flutter/pdf/working-with-security.md

@@ -0,0 +1,325 @@
+---
+layout: post
+title: Document of Syncfusion Flutter PDF
+description: Learn how to protect PDF document using encryption and set permission to the PDF document operations in the Flutter PDF.
+platform: flutter
+control: PDF
+documentation: ug
+---
+
+# Working with PDF Security
+
+Flutter PDF allows you to protect the PDF document using encryption and set permission to the PDF document operations like printing, editing, copy content etc. using user password and owner password. Two types of encryption algorithms are available
+
+* Rivest Cipher 4 (RC4)
+* Advanced Encryption Standard (AES)
+
+## Working with RC4 Encryption
+
+You can encrypt PDF document using RC4 algorithm with 40bit or 128bit 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).
+
+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 %}
+
+//Create a new PDF documentation
+PdfDocument document = PdfDocument();
+
+//Document security
+PdfSecurity security = document.security;
+
+//Specifies encryption algorithm and key size
+security.algorithm = PdfEncryptionAlgorithm.rc4x128Bit;
+
+//Set user password
+security.userPassword = 'password';
+
+//Draw the text by adding page to the document
+document.pages.add().graphics.drawString(
+    'Encrypted with RC4 128bit', PdfStandardFont(PdfFontFamily.helvetica, 27),
+    brush: PdfBrushes.mediumVioletRed,
+    bounds: const Rect.fromLTWH(10, 10, 500, 50));
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+N> While using both user and owner passwords, please specify different user and owner password while encrypting the PDF document for better security.
+
+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.
+
+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 %}
+
+//Create a new PDF documentation
+PdfDocument document = PdfDocument();
+
+//Document security
+PdfSecurity security = document.security;
+
+//Specifies encryption algorithm and key size
+security.algorithm = PdfEncryptionAlgorithm.rc4x128Bit;
+
+//Set owner password
+security.ownerPassword = 'password';
+
+//It allows printing and accessibility copy content
+security.permissions.addAll(<PdfPermissionsFlags>[
+    PdfPermissionsFlags.print,
+    PdfPermissionsFlags.accessibilityCopyContent
+]);
+
+//Draw the text by adding page to the document
+document.pages.add().graphics.drawString(
+    'This document is protected with owner password',
+    PdfStandardFont(PdfFontFamily.helvetica, 27),
+    brush: PdfBrushes.mediumVioletRed,
+    bounds: const Rect.fromLTWH(10, 10, 500, 50));
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Create a new PDF documentation
+PdfDocument document = PdfDocument();
+
+//Document security
+PdfSecurity security = document.security;
+
+//Specifies encryption algorithm and key size
+security.algorithm = PdfEncryptionAlgorithm.aesx256Bit;
+
+//Set user password
+security.userPassword = 'password';
+
+//Draw the text by adding page to the document
+document.pages.add().graphics.drawString(
+    'Encrypted with AES 256bit', PdfStandardFont(PdfFontFamily.helvetica, 27),
+    brush: PdfBrushes.mediumVioletRed,
+    bounds: const Rect.fromLTWH(10, 10, 500, 50));
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+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 %}
+
+//Create a new PDF documentation
+PdfDocument document = PdfDocument();
+
+//Document security
+PdfSecurity security = document.security;
+
+//Specifies encryption algorithm and key size
+security.algorithm = PdfEncryptionAlgorithm.aesx256Bit;
+
+//Set owner password
+security.ownerPassword = 'password';
+
+//It allows printing and accessibility copy content
+security.permissions.addAll(<PdfPermissionsFlags>[
+    PdfPermissionsFlags.print,
+    PdfPermissionsFlags.accessibilityCopyContent]);
+
+//Draw the text by adding page to the document
+document.pages.add().graphics.drawString(
+    'This document is protected with owner password',
+    PdfStandardFont(PdfFontFamily.helvetica, 27),
+    brush: PdfBrushes.mediumVioletRed,
+    bounds: const Rect.fromLTWH(10, 10, 500, 50));
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Loads an existing PDF document
+PdfDocument document =
+    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
+
+//Document security
+PdfSecurity security = document.security;
+
+//Specifies encryption algorithm and key size
+security.algorithm = PdfEncryptionAlgorithm.aesx256Bit;
+
+//Set owner and user password
+security.ownerPassword = 'ownerPassword';
+security.userPassword = 'userPassword';
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Loads an existing PDF document
+PdfDocument document = PdfDocument(
+    inputBytes: File('input.pdf').readAsBytesSync(), password: 'password');
+
+//Change the user password
+document.security.userPassword = 'NewPassword';
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Loads an existing PDF document
+PdfDocument document = PdfDocument(
+    inputBytes: File('input.pdf').readAsBytesSync(), password: 'password');
+
+//Change the user password as empty string
+document.security.userPassword = '';
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+## 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 %}
+
+//Loads an existing PDF document
+PdfDocument document = PdfDocument(
+    inputBytes: File('input.pdf').readAsBytesSync(), password: 'password');
+
+//Remove the permissions
+document.security.permissions.remove(PdfPermissionsFlags.print);
+
+//Add the new permissions
+document.security.permissions.addAll(<PdfPermissionsFlags>[
+    PdfPermissionsFlags.editContent,
+    PdfPermissionsFlags.copyContent,
+    PdfPermissionsFlags.editAnnotations,
+    PdfPermissionsFlags.fillFields,
+    PdfPermissionsFlags.assembleDocument,
+    PdfPermissionsFlags.fullQualityPrint]);
+
+//Save and dispose the PDF document
+File('Output.pdf').writeAsBytes(document.save());
+document.dispose();
+
+{% endhighlight %}
+
+## How to determine whether the PDF document is protected by user or owner password?
+
+Flutter PDF supports identifying the document whether it is protected by user or owner.
+
+The following table shows the various combination for loading the secured document with user or owner password:
+
+<table>
+<thead>
+<tr>
+<th>
+Document type
+</th>
+<th>
+Open with
+</th>
+<th>
+User password
+</th>
+<th>
+Owner password
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+PDF document secured with both the owner and user passwords
+</td>
+<td>
+User password
+</td>
+<td>
+Returns user password
+</td>
+<td>
+Returns empty string
+</td>
+</tr>
+<tr>
+<td>
+PDF document secured with both the owner and user passwords
+</td>
+<td>
+Owner password
+</td>
+<td>
+Returns user password (Returns null for AES 256 and AES 256 Revision 6 encryptions)
+</td>
+<td>
+Returns owner password
+</td>
+</tr>
+<tr>
+<td>
+PDF document secured with owner password alone
+</td>
+<td>
+Owner password
+</td>
+<td>
+Returns empty string
+</td>
+<td>
+Returns owner password
+</td>
+</tr>
+<tr>
+<td>
+PDF document secured with user password alone
+</td>
+<td>
+User Password
+</td>
+<td>
+Returns user password
+</td>
+<td>
+Returns owner Password (owner password is same as the user password; it allows full permission to users)
+</td>
+</tr>
+</tbody>
+</table>

Flutter/pdf/working-with-tables.md

@@ -13,7 +13,7 @@ The Syncfusion Flutter PDF provides support for creating customizable tables in
 
 ## Creating a table
 
-[`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html) allows you to create table by entering the data manually or from an external data source. The data source can be a [`DataTable`](https://api.flutter.dev/flutter/material/DataTable-class.html).
+[`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html) allows you to create table by entering the data manually.
 
 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.
 
@@ -65,52 +65,6 @@ document.dispose();
 
 {% endhighlight %}
 
-The following code example explains how to create a table from a data source using [`PdfGrid`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGrid-class.html).
-
-{% highlight dart %}
-
-//Create a new PDF document
-PdfDocument document = PdfDocument();
-
-//Create a PdfGrid
-PdfGrid grid = PdfGrid();
-
-//Set the dataSource in PdfGrid with created DataTable
-grid.dataSource = DataTable(
-  columns: [
-    DataColumn(label: Text('ID')),
-    DataColumn(label: Text('Name')),
-    DataColumn(label: Text('Salary'))
-  ],
-  rows: <DataRow>[
-    DataRow(cells: [
-      DataCell(Text('E01')),
-      DataCell(Text('Clay')),
-      DataCell(Text('\$10,000'))
-    ]),
-    DataRow(cells: [
-      DataCell(Text('E02')),
-      DataCell(Text('Thomas')),
-      DataCell(Text('\$10,500'))
-    ]),
-    DataRow(cells: [
-      DataCell(Text('E02')),
-      DataCell(Text('Simon')),
-      DataCell(Text('\$12,000'))
-    ])
-  ],
-);
-
-//Draw the grid in PDF document
-grid.draw(
-    page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
-
-//Save and dispose the PDF document
-File('SampleOutput.pdf').writeAsBytes(document.save());
-document.dispose();
-
-{% endhighlight %}
-
 ## Cell customization in PdfGrid
 
 [`PdfGridCell`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridCell-class.html) provides various direct options to customize cells such as [`columnSpan`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridCell/columnSpan.html), [`rowSpan`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridCell/rowSpan.html), [`textPen`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridStyleBase/textPen.html), [`backgroundBrush`](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGridStyleBase/backgroundBrush.html), and more.

Flutter/range-selector/tooltip.md

@@ -11,9 +11,9 @@ documentation: ug
 
 This section helps to learn about how to add tooltip in the range selector.
 
-## Show tooltips
+## Enable tooltips
 
-You can enable tooltips for both thumbs. It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html).
+You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html).
 
 {% tabs %}
 {% highlight Dart %}
@@ -45,7 +45,7 @@ Widget build(BuildContext context) {
                     interval: 2,
                     showLabels: true,
                     showTicks: true,
-                    showTooltip: true,
+                    enableTooltip: true,
                     initialValues: _values,
                     child: Container(
                     height: 130,
@@ -126,7 +126,7 @@ Widget build(BuildContext context) {
               interval: 1,
               showLabels: true,
               showTicks: true,
-              showTooltip: true,
+              enableTooltip: true,
               tooltipShape: SfPaddleTooltipShape(),
               initialValues: _values,
               child: Container(
@@ -211,7 +211,7 @@ Widget build(BuildContext context) {
                     interval: 2,
                     dateFormat: DateFormat('h:mm'),
                     dateIntervalType: DateIntervalType.hours,
-                    showTooltip: true,
+                    enableTooltip: true,
                     tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) {
                         return DateFormat('h:mm a').format(actualValue);
                     },
@@ -296,7 +296,7 @@ Widget build(BuildContext context) {
                         min: _min,
                         max: _max,
                         interval: 1,
-                        showTooltip: true,
+                        enableTooltip: true,
                         showTicks: true,
                         showLabels: true,
                         initialValues: _values,
@@ -380,7 +380,7 @@ Widget build(BuildContext context) {
                         min: _min,
                         max: _max,
                         interval: 1,
-                        showTooltip: true,
+                        enableTooltip: true,
                         showTicks: true,
                         showLabels: true,
                         initialValues: _values,
@@ -464,7 +464,7 @@ Widget build(BuildContext context) {
                         min: _min,
                         max: _max,
                         interval: 1,
-                        showTooltip: true,
+                        enableTooltip: true,
                         showTicks: true,
                         showLabels: true,
                         initialValues: _values,

Flutter/range-slider/interval.md

@@ -201,7 +201,7 @@ Widget build(BuildContext context) {
               dateIntervalType: DateIntervalType.years,
               showTicks: true,
               showLabels: true,
-              showTooltip: true,
+              enableTooltip: true,
               values: _values,
               onChanged: (SfRangeValues newValues) {
                 setState(() {

Flutter/range-slider/tooltip.md

@@ -11,9 +11,9 @@ documentation: ug
 
 This section helps to learn about how to add tooltip in the range slider.
 
-## Show tooltips
+## Enable tooltips
 
-You can enable tooltips for both thumbs. It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html).
+You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html).
 
 {% tabs %}
 {% highlight Dart %}
@@ -31,7 +31,7 @@ Widget build(BuildContext context) {
                     interval: 2,
                     showTicks: true,
                     showLabels: true,
-                    showTooltip: true,
+                    enableTooltip: true,
                     values: _values,
                     onChanged: (SfRangeValues newValues) {
                         setState(() {
@@ -73,7 +73,7 @@ Widget build(BuildContext context) {
               interval: 20,
               showTicks: true,
               showLabels: true,
-              showTooltip: true,
+              enableTooltip: true,
               tooltipShape: SfPaddleTooltipShape(),
               values: _values,
               onChanged: (SfRangeValues newValues) {
@@ -118,7 +118,7 @@ Widget build(BuildContext context) {
                     interval: 3,
                     showTicks: true,
                     showLabels: true,
-                    showTooltip: true,
+                    enableTooltip: true,
                     dateFormat: DateFormat('h:mm'),
                     dateIntervalType: DateIntervalType.hours,
                     tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) {
@@ -166,7 +166,7 @@ Widget build(BuildContext context) {
                         interval: 1,
                         showTicks: true,
                         showLabels: true,
-                        showTooltip: true,
+                        enableTooltip: true,
                         values: _values,
                         onChanged: (SfRangeValues newValues){
                             setState(() {
@@ -211,7 +211,7 @@ Widget build(BuildContext context) {
                      interval: 1,
                      showTicks: true,
                      showLabels: true,
-                     showTooltip: true,
+                     enableTooltip: true,
                      values: _values,
                      onChanged: (SfRangeValues newValues){
                             setState(() {
@@ -256,7 +256,7 @@ Widget build(BuildContext context) {
                      interval: 1,
                      showTicks: true,
                      showLabels: true,
-                     showTooltip: true,
+                     enableTooltip: true,
                      values: _values,
                      onChanged: (SfRangeValues newValues){
                             setState(() {

Flutter/slider/tooltip.md

@@ -11,9 +11,9 @@ documentation: ug
 
 This section helps to learn about how to add tooltip in the slider.
 
-## Show tooltip
+## Enable tooltip
 
-You can enable tooltip for the thumb. It is used to clearly indicate the current selection of the value during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html).
+You can enable tooltip for the thumb using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html). It is used to clearly indicate the current selection of the value during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html).
 
 {% tabs %}
 {% highlight Dart %}
@@ -31,7 +31,7 @@ Widget build(BuildContext context) {
               interval: 2,
               showTicks: true,
               showLabels: true,
-              showTooltip: true,
+              enableTooltip: true,
               value: _value,
               onChanged: (dynamic newValue) {
                 setState(() {
@@ -73,7 +73,7 @@ Widget build(BuildContext context) {
               interval: 20,
               showTicks: true,
               showLabels: true,
-              showTooltip: true,
+              enableTooltip: true,
               tooltipShape: SfPaddleTooltipShape(),
               value: _value,
               onChanged: (dynamic newValue) {
@@ -118,7 +118,7 @@ Widget build(BuildContext context) {
               interval: 3,
               showTicks: true,
               showLabels: true,
-              showTooltip: true,
+              enableTooltip: true,
               dateFormat: DateFormat('h:mm'),
               dateIntervalType: DateIntervalType.hours,
               tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) {
@@ -166,7 +166,7 @@ Widget build(BuildContext context) {
                   interval: 1,
                   showTicks: true,
                   showLabels: true,
-                  showTooltip: true,
+                  enableTooltip: true,
                   value: _value,
                   onChanged: (dynamic newValue){
                     setState(() {
@@ -211,7 +211,7 @@ Widget build(BuildContext context) {
                   interval: 1,
                   showTicks: true,
                   showLabels: true,
-                  showTooltip: true,
+                  enableTooltip: true,
                   value: _value,
                   onChanged: (dynamic newValue){
                     setState(() {