diff --git a/Flutter/DateRangePicker/Callbacks.md b/Flutter/DateRangePicker/Callbacks.md
index ef95a828a..03a992b1f 100644
--- a/Flutter/DateRangePicker/Callbacks.md
+++ b/Flutter/DateRangePicker/Callbacks.md
@@ -7,9 +7,9 @@ control: SfDateRangePicker
documentation: ug
---
-# Callbacks in Flutter DateRangePicker (SfDateRangePicker)
+# Callbacks in Flutter Date Range Picker (SfDateRangePicker)
-Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter date range picker.
+Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter Date Range Picker.
## View changed callback
@@ -40,7 +40,7 @@ The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/
## Selection changed callback
-The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the date picker.
+The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the Flutter Date Range Picker.
* `args.value` - returns the dates based on the selection mode.
diff --git a/Flutter/DateRangePicker/accessibility.md b/Flutter/DateRangePicker/accessibility.md
index 04eb8453e..1886f05e8 100644
--- a/Flutter/DateRangePicker/accessibility.md
+++ b/Flutter/DateRangePicker/accessibility.md
@@ -75,7 +75,7 @@ The following APIs allows you to customize the colors of the following elements.
## Large fonts
-The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in date range picker.
+The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in Flutter Date Range Picker.
* [todayTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [leadingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [trailingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
diff --git a/Flutter/DateRangePicker/builders.md b/Flutter/DateRangePicker/builders.md
index d06ca9447..14c01935a 100644
--- a/Flutter/DateRangePicker/builders.md
+++ b/Flutter/DateRangePicker/builders.md
@@ -8,11 +8,11 @@ documentation: ug
---
# Builders in Flutter DateRangePicker (SfDateRangePicker)
-The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker.
+The Flutter Date Range Picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells.
## Cell builder
-The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the date range picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
+The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the Flutter Date Range Picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
[DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell.
diff --git a/Flutter/DateRangePicker/customizations.md b/Flutter/DateRangePicker/customizations.md
index 6ca14ebc7..e1a40f296 100644
--- a/Flutter/DateRangePicker/customizations.md
+++ b/Flutter/DateRangePicker/customizations.md
@@ -107,7 +107,7 @@ You can customize the month format of the [SfDateRangePicker](https://pub.dev/do
## Selection cell customization
-You can also customize the date range picker section by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
+You can also customize the Flutter Date Range Picker section by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthCellStyle.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
* **Selection date text style** – Selected date text style can be customized using the [selectionTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionTextStyle.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) that is applicable for [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), it is also applicable to start and end of the selected range text style in the [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) and [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) selection.
diff --git a/Flutter/DateRangePicker/date-navigations.md b/Flutter/DateRangePicker/date-navigations.md
index a589745b5..22bcc4b4f 100644
--- a/Flutter/DateRangePicker/date-navigations.md
+++ b/Flutter/DateRangePicker/date-navigations.md
@@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---
-# Date Navigation in Flutter DateRangePicker (SfDateRangePicker)
+# Date Navigation in Flutter Date Range Picker (SfDateRangePicker)
## Programmatic date navigation
@@ -392,7 +392,7 @@ You can customize the navigation mode of the date range picker by using the [nav
>**NOTE**
When the navigation mode is set to [DateRangePickerNavigationMode.scroll](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationMode.html#scroll).
* Swipe selection is not supported when the range and multi-range are the selection modes.
-* The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) will be called when the view reaches the starting position of the date range picker view.
+* The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) will be called when the view reaches the starting position of the Date Range Picker view.
* [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html), [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) and [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) is not supported.
diff --git a/Flutter/DateRangePicker/date-restrictions.md b/Flutter/DateRangePicker/date-restrictions.md
index 9182fc1aa..f0d13cb4d 100644
--- a/Flutter/DateRangePicker/date-restrictions.md
+++ b/Flutter/DateRangePicker/date-restrictions.md
@@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---
-# Date Restrictions in Flutter DateRangePicker (SfDateRangePicker)
+# Date Restrictions in Flutter Date Range Picker (SfDateRangePicker)
## Minimum display date
@@ -97,7 +97,7 @@ In [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepick
## SelectableDayPredicate
-[selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback allows certain days for selection. Only the days that [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) returns `true` will be selectable in the date range picker.
+[selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) callback allows certain days for selection. Only the days that [selectableDayPredicate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectableDayPredicate.html) returns `true` will be selectable in the Flutter Date Range Picker.
{% tabs %}
{% highlight dart hl_lines="4 5 6 7 8 9" %}
diff --git a/Flutter/DateRangePicker/getting-started.md b/Flutter/DateRangePicker/getting-started.md
index 3f440361d..e02d32566 100644
--- a/Flutter/DateRangePicker/getting-started.md
+++ b/Flutter/DateRangePicker/getting-started.md
@@ -7,11 +7,11 @@ control: SfDateRangePicker
documentation: ug
---
-# Getting Started with Flutter DateRangePicker (SfDateRangePicker)
+# Getting Started with Flutter Date Range Picker (SfDateRangePicker)
-This section explains the steps required to add the [date range picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) widget. This section covers only basic features needed to get started with Syncfusion® date range picker widget.
+This section explains the steps required to add the [Flutter Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) widget. This section covers only basic features needed to get started with Syncfusion® Flutter DateRangePicker widget.
-To get start quickly with our Flutter date range picker widget, you can check on this video.
+To get start quickly with our Flutter Date Range Picker widget, you can check on this video.
@@ -22,7 +22,7 @@ Create a simple project using the instructions given in the [Getting Started wit
**Add dependency**
-Add the Syncfusion® Flutter date range picker dependency to your `pubspec.yaml` file.
+Add the Syncfusion® Flutter Date Range Picker dependency to your `pubspec.yaml` file.
{% highlight dart %}
@@ -32,7 +32,7 @@ syncfusion_flutter_datepicker: ^xx.x.xx
{% endhighlight %}
-N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package.
+N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Range Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package.
**Get packages**
@@ -56,9 +56,9 @@ import 'package:syncfusion_flutter_datepicker/datepicker.dart';
{% endhighlight %}
{% endtabs %}
-## Initialize date range picker
+## Initialize Date Range Picker
-After importing the package, initialize the date range picker widget as a child of any widget. Here, the date range picker widget is added as a child of the scaffold widget.
+After importing the package, initialize the Flutter Date Range Picker widget as a child of any widget. Here, the date range picker widget is added as a child of the scaffold widget.
{% tabs %}
{% highlight dart hl_lines="5" %}
@@ -79,7 +79,7 @@ After importing the package, initialize the date range picker widget as a child
## Multiple picker views
-The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.
+ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the Date Range Picker views.
{% tabs %}
{% highlight dart hl_lines="5" %}
@@ -124,7 +124,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports selecting single, multiple, and range of dates. It also supports programmatic selection.
-The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback of date range picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html) which contains the selected date or range details.
+The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback of the Flutter Date Range Picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html) which contains the selected date or range details.
{% tabs %}
{% highlight dart hl_lines="1 2 3 11" %}
@@ -154,7 +154,7 @@ The selected date or range details can be obtained using the [onSelectionChanged
## Today highlight color
-You can highlight the today’s date by customizing its color in the date range picker by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/todayHighlightColor.html) property. This allows you to make today’s date stand out in all views such as month, year, decade, and century.
+You can highlight the today’s date by customizing its color in the Flutter Date Range Picker by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/todayHighlightColor.html) property. This allows you to make today’s date stand out in all views such as month, year, decade, and century.
{% tabs %}
@@ -175,7 +175,7 @@ You can highlight the today’s date by customizing its color in the date range
## Action buttons
-You can display action buttons at the bottom of the date range picker by using the [showActionButtons](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showActionButtons.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
+You can display action buttons at the bottom of the Flutter Date Range Picker by using the [showActionButtons](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showActionButtons.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
* [confirmText](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/confirmText.html) - Customizes the text that display on the confirm button.
@@ -183,7 +183,7 @@ You can display action buttons at the bottom of the date range picker by using t
* [onCancel](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onCancel.html) - Callback function that is triggered when the cancel button is tapped within a date range picker.
-* [onSubmit](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSubmit.html) - Callback function that is triggered when the confirm button is tapped within a date range picker.
+* [onSubmit](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSubmit.html) - Callback function that is triggered when the confirm button is tapped within a Flutter Date Range Picker.
{% tabs %}
{% highlight dart hl_lines="11" %}
@@ -220,7 +220,7 @@ You can display action buttons at the bottom of the date range picker by using t
## Today button
-The today button can be displayed at the bottom of the date range picker by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showTodayButton.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It easily moves to the current date of the picker view.
+The today button can be displayed at the bottom of the Flutter Date Range Picker by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showTodayButton.html) property of the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html). It easily moves to the current date of the picker view.
{% tabs %}
{% highlight dart hl_lines="6" %}
diff --git a/Flutter/DateRangePicker/headers.md b/Flutter/DateRangePicker/headers.md
index ccc87a339..9d2dc4ffe 100644
--- a/Flutter/DateRangePicker/headers.md
+++ b/Flutter/DateRangePicker/headers.md
@@ -7,9 +7,9 @@ control: SfDateRangePicker
documentation: ug
---
-# Headers in Flutter DateRangePicker (SfDateRangePicker)
+# Headers in Flutter Date Range Picker (SfDateRangePicker)
-You can customize the header of the date range picker using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) properties in date range picker.
+You can customize the header of the Flutter Date Range Picker using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) properties in date range picker.
## Customize the header height
diff --git a/Flutter/DateRangePicker/hijri-date-picker.md b/Flutter/DateRangePicker/hijri-date-picker.md
index 1ce4ae145..d6c0843cf 100644
--- a/Flutter/DateRangePicker/hijri-date-picker.md
+++ b/Flutter/DateRangePicker/hijri-date-picker.md
@@ -7,13 +7,13 @@ control: SfDateRangePicker
documentation: ug
---
-# About Flutter Hijri DateRangePicker Control (SfHijriDateRangePicker)
+# About Flutter Hijri Date Range Picker Control (SfHijriDateRangePicker)
Along with the Gregorian calendar, the picker package contains a Hijri date picker to display the Islamic calendar. Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To know more about the Islamic calendar, kindly refer to [Wikipedia](https://en.wikipedia.org/wiki/Islamic_calendar).
It consists of all the Gregorian calendar functionalities like min and max date, the first day of the week, different selection modes, RTL, and customization for special dates.
-To display the Hijri date picker, initialize the [HijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget as a child of any widget. Here, the Hijri date range picker added as a child of the scaffold widget.
+To display the Hijri Date Range Picker, initialize the [HijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget as a child of any widget. Here, the Hijri date range picker added as a child of the scaffold widget.
{% tabs %}
{% highlight dart hl_lines="4" %}
@@ -30,7 +30,7 @@ To display the Hijri date picker, initialize the [HijriDateRangePicker](https://
{% endhighlight %}
{% endtabs %}
-
+
>**NOTE**
* Most of the properties type and classes were same from [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) except the followings [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html), [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html), [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html), [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html), [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html), [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) and [HijriDatePickerView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerView.html).
@@ -38,7 +38,7 @@ To display the Hijri date picker, initialize the [HijriDateRangePicker](https://
## Multiple picker views
-The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget provides three different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/view.html) property. The default view of the widget is the month view. By default, the current date will be displayed initially for all the date range picker views.
+The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget provides three different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/view.html) property. The default view of the widget is the month view. By default, the current date will be displayed initially for all the Date Range Picker views.
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -144,7 +144,7 @@ Customize the Week number style by using the [textStyle](https://pub.dev/documen
The [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) supports selecting single, multiple, and range of dates. It also supports the programmatic selection.
-The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/onSelectionChanged.html) callback of Hijri date range picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html), which contains the selected date or range details.
+The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/onSelectionChanged.html) callback of Hijri Date Range Picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html), which contains the selected date or range details.
{% tabs %}
@@ -173,7 +173,7 @@ The selected date or range details can be obtained using the [onSelectionChanged
## Programmatic date navigation
-You can programmatically navigate date in the Hijri date picker widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/displayDate.html) property from [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
+You can programmatically navigate date in the Hijri Date Range Picker widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/displayDate.html) property from [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
{% tabs %}
{% highlight dart hl_lines="2 6 15" %}
@@ -206,7 +206,7 @@ class MyAppState extends State {
## Programmatic view navigation
-You can programmatically navigate to any view in the Hijri date picker widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/view.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
+You can programmatically navigate to any view in the Hijri Date Range Picker widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/view.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
{% tabs %}
{% highlight dart hl_lines="2 6 15" %}
@@ -238,7 +238,7 @@ class MyAppState extends State {
## Programmatic date selection
-You can select dates programmatically on the Hijri date picker widget by using the [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
+You can select dates programmatically on the Hijri Date Range Picker widget by using the [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
For selection [refer](https://help.syncfusion.com/flutter/daterangepicker/selections).
@@ -321,7 +321,7 @@ class MyAppState extends State {
You can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) property of [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html). It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/selectionMode.html) is set to [DateRangePickerSelectionMode.range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range).
-Use the [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) to define the date range for the Hijri date picker.
+Use the [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) to define the date range for the Hijri Date Range Picker.
{% tabs %}
{% highlight dart hl_lines="2 7 8 17 18" %}
@@ -398,7 +398,7 @@ class MyAppState extends State {
### Extendable range selection
-Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange).
+Extend the selected range with the new selected date in any Date Range Picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange).
{% tabs %}
{% highlight dart hl_lines="2 7 8 17 18" %}
@@ -467,7 +467,7 @@ You can set the extendable range selection direction as forward, backward, both
## Month cell customization
-Customize the Hijri date picker month view by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/monthCellStyle.html) property of [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
+Customize the Hijri Date Range Picker month view by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/monthCellStyle.html) property of [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
* **Current month dates**: You can customize the text style and background of the current month dates in the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/cellDecoration.html) properties of [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html).
* **Today date**: You can customize the text style and background of the today's date in the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayCellDecoration.html).
diff --git a/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md b/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md
index 9f2ce742d..373186722 100644
--- a/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md
+++ b/Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md
@@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---
-# How to Add DateRangePicker in FlutterFlow (SfDateRangePicker)
+# How to Add Date Range Picker in FlutterFlow (SfDateRangePicker)
## Overview
@@ -28,31 +28,31 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
-### Add DateRangePicker widget as a dependency
+### Add Date Range Picker widget as a dependency
1. Click on `+ Add Dependency`, a text editor will appear.
-2. Navigate to [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
+2. Navigate to [Syncfusion® Flutter DateRangePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it.
->**Note**: The live version of [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
+>**Note**: The live version of [Syncfusion® Flutter DateRangePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter DateRangePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
>**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`.
->**Note**: Since [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above.
+>**Note**: Since [Syncfusion® Flutter DateRangePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above.
### Import the package
-1. Navigate to the `Installing` tab on the [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) page. Under the `Import it` section, copy the package import statement.
+1. Navigate to the `Installing` tab on the [Syncfusion® Flutter DateRangePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) page. Under the `Import it` section, copy the package import statement.
2. Paste the copied import statement into the code editor and then `Save` it.
### Add widget code snippet in code editor
-1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_datepicker/example) tab in [Syncfusion® Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) and copy the widget specific codes.
+1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_datepicker/example) tab in [Syncfusion® Flutter DateRangePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) and copy the widget specific codes.
2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it.
diff --git a/Flutter/DateRangePicker/localization.md b/Flutter/DateRangePicker/localization.md
index 2f628dbbb..56e2dac49 100644
--- a/Flutter/DateRangePicker/localization.md
+++ b/Flutter/DateRangePicker/localization.md
@@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---
-# Localization in Flutter DateRangePicker (SfDateRangePicker)
+# Localization in Flutter Date Range Picker (SfDateRangePicker)
By default, the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget supports US English localizations. You can change other languages by specifying the [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html) properties and adding the `flutter_localizations` package to your application.
diff --git a/Flutter/DateRangePicker/overview.md b/Flutter/DateRangePicker/overview.md
index 16e66d8db..e9c5d0c56 100644
--- a/Flutter/DateRangePicker/overview.md
+++ b/Flutter/DateRangePicker/overview.md
@@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---
-# About Flutter DateRangePicker Control (SfDateRangePicker)
+# About Flutter Date Range Picker Control (SfDateRangePicker)
The Syncfusion® Flutter Date Range Picker is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. It provides month, year, decade, and century view options to quickly navigate to the desired date. It supports minimum, maximum, and disabled dates to restrict date selection.
@@ -38,21 +38,21 @@ The Syncfusion® Flutter Date Range Picker is a lightweight widget
* **Change first day of week**: Customize the first day of the week as needed. The default first day is Sunday.
-* **Blackout dates**: Disable any date to make it inactive in a date range picker. Easily prevent the selection of weekends by disabling them.
+* **Blackout dates**: Disable any date to make it inactive in a Date Range Picker. Easily prevent the selection of weekends by disabling them.
-* **Highlight holidays and weekends**: Highlight any date or every weekend in a month as special days using decoration in Flutter date range picker.
+* **Highlight holidays and weekends**: Highlight any date or every weekend in a month as special days using decoration in Flutter Date Range Picker.
-* **Appearance customization**: Change the look and feel of the date range picker by customizing its default appearance and style using Flutter decorations.
+* **Appearance customization**: Change the look and feel of the Date Range Picker by customizing its default appearance and style using Flutter decorations.
* **Right to left (RTL)** - Right-to-left direction support for users working in RTL languages like Hebrew and Arabic.
-* **Accessibility** - Easy access of the date range picker by screen readers.
+* **Accessibility** - Easy access of the Date Range Picker by screen readers.
* **Globalization** - Display the current date and time by following the globalized date and time formats.
diff --git a/Flutter/DateRangePicker/right-to-left.md b/Flutter/DateRangePicker/right-to-left.md
index 523cc7c32..1db270666 100644
--- a/Flutter/DateRangePicker/right-to-left.md
+++ b/Flutter/DateRangePicker/right-to-left.md
@@ -7,7 +7,7 @@ control: SfDateRangePicker
documentation: ug
---
-# Right-to-Left (RTL) in Flutter DateRangePicker (SfDateRangePicker)
+# Right-to-Left (RTL) in Flutter Date Range Picker (SfDateRangePicker)
[SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) supports Right to left rendering and all the date picker elements rendering direction will be changed.
@@ -40,7 +40,7 @@ The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepic
### Changing the locale to RTL languages
-To change the date range picker rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
+To change the rendering direction of the Flutter Date Range Picker from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
{% tabs %}
{% highlight dart hl_lines="4 5 6 7 8 9 10 11 12 13" %}
diff --git a/Flutter/DateRangePicker/selections.md b/Flutter/DateRangePicker/selections.md
index f5c814b69..2b70241b3 100644
--- a/Flutter/DateRangePicker/selections.md
+++ b/Flutter/DateRangePicker/selections.md
@@ -7,15 +7,15 @@ control: SfDateRangePicker
documentation: ug
---
-# Selections in Flutter DateRangePicker (SfDateRangePicker)
+# Selections in Flutter Date Range Picker (SfDateRangePicker)
Dates can be selected by touching the month view cells. The default [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is Single that allows the user to select one date at a time. [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) provides support to select dates in five modes such as [Single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single), [Multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple), [Range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range) [MultiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange) and [ExtendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange) selection
->**NOTE** When the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property is set to `false`, the Date range picker allows you to select the cells in the year, decade, and century views of date range picker.
+>**NOTE** When the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property is set to `false`, the Flutter Date Range Picker allows you to select the cells in the year, decade, and century views.
## Single selection
- A [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) date range picker cell can be selected in a date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single).
+A [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single) cell can be selected in the Flutter Date Range Picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [single](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#single).
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -45,7 +45,7 @@ Dates can be selected by touching the month view cells. The default [selectionMo
## Multiple selection
-You can randomly select more than one date range picker cell by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). By clicking again you can deselect the selected cells.
+You can randomly select more than one Date Range Picker cell by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [multiple](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiple). By clicking again you can deselect the selected cells.
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -67,7 +67,7 @@ You can randomly select more than one date range picker cell by setting the [Dat
## Range selection
-You can select a range of cells in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range).
+You can select a range of cells in any Date Range Picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [range](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#range).
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -97,7 +97,7 @@ You can select a range of cells in any date range picker view by setting the [Da
## Multi range selection
-You can select more than one range of cells in any of the date range picker views by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange).
+You can select more than one range of cells in any of the Date Range Picker views by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to the [multiRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#multiRange).
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -119,7 +119,7 @@ You can select more than one range of cells in any of the date range picker view
## Extendable range selection
-Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange).
+Extend the selected range with the new selected date in any Date Range Picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html) to [extendableRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode.html#extendableRange).
{% tabs %}
{% highlight dart hl_lines="7" %}
diff --git a/Flutter/DateRangePicker/views.md b/Flutter/DateRangePicker/views.md
index c28f7f117..61ec4694f 100644
--- a/Flutter/DateRangePicker/views.md
+++ b/Flutter/DateRangePicker/views.md
@@ -7,9 +7,9 @@ control: SfDateRangePicker
documentation: ug
---
-# Views in Flutter DateRangePicker (SfDateRangePicker)
+# Views in Flutter Date Range Picker (SfDateRangePicker)
-The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.
+The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the Date Range Picker views.
## Month view
@@ -178,7 +178,7 @@ The number of weeks in the month view can be customized by setting the [numberOf
## Multi-date picker view
-You can enable a multi-date range picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
+You can enable a multi-view Date Range Picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html), which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -205,7 +205,7 @@ You can enable a multi-date range picker by using the [enableMultiView](https://
## Vertical picker
-You can arrange the two date range picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as [DateRangePickerNavigationDirection.vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).`
+You can arrange the two Date Range Picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as [DateRangePickerNavigationDirection.vertical](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerNavigationDirection.html#vertical) in the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).`
{% tabs %}
{% highlight dart hl_lines="7" %}
@@ -226,7 +226,7 @@ You can arrange the two date range picker views in the vertical direction by set
{% endhighlight %}
{% endtabs %}
-
+
## See also
diff --git a/Flutter/ai-assistview/action-button.md b/Flutter/ai-assistview/action-button.md
index 70d1fc011..493b69d61 100644
--- a/Flutter/ai-assistview/action-button.md
+++ b/Flutter/ai-assistview/action-button.md
@@ -48,7 +48,7 @@ class DefaultActionButtonExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Child
@@ -84,7 +84,7 @@ class ActionButtonChildExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### onPressed callback
@@ -172,7 +172,7 @@ class ActionButtonTooltipExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Colors
@@ -297,7 +297,7 @@ class ActionButtonMouseCursorExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Shape
@@ -340,7 +340,7 @@ class ActionButtonShapeExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Margin
diff --git a/Flutter/ai-assistview/composer.md b/Flutter/ai-assistview/composer.md
index 4d5a7c453..c8e0b0da9 100644
--- a/Flutter/ai-assistview/composer.md
+++ b/Flutter/ai-assistview/composer.md
@@ -52,7 +52,7 @@ class MinMaxLinesExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Decoration
@@ -110,7 +110,7 @@ class BorderExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
#### Content padding
@@ -146,7 +146,7 @@ class ContentPaddingExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
#### Hint text
@@ -181,7 +181,7 @@ class HintTextExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
#### Hint text style
@@ -221,7 +221,7 @@ class HintTextStyleExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
#### Prefix and suffix icons
@@ -263,7 +263,7 @@ class PrefixSuffixIconExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Margin
@@ -298,7 +298,7 @@ class ComposerMarginExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Text style
@@ -335,7 +335,7 @@ class TextStyleExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Builder
@@ -451,6 +451,6 @@ class _ComposerBuilderExampleState extends State {
{% endhighlight %}
{% endtabs %}
-
+
>You can refer to our [Flutter AI AssistView](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter AI AssistView example](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects.
diff --git a/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md b/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md
index b522bd699..a38f138ba 100644
--- a/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md
+++ b/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md
@@ -28,7 +28,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
-### Add AIAssistView widget as a dependency
+### Add AI AssistView widget as a dependency
1. Click on `+ Add Dependency`, and a text editor will appear.
2. Navigate to [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
diff --git a/Flutter/ai-assistview/placeholder.md b/Flutter/ai-assistview/placeholder.md
index 15d67a722..76228be0a 100644
--- a/Flutter/ai-assistview/placeholder.md
+++ b/Flutter/ai-assistview/placeholder.md
@@ -145,7 +145,7 @@ class _HideOnMessageExampleState extends State {
{% endhighlight %}
{% endtabs %}
-
+
## Scroll with message
@@ -164,6 +164,6 @@ The placeholder can [`scroll`](https://pub.dev/documentation/syncfusion_flutter_
{% endhighlight %}
{% endtabs %}
-
+
>You can refer to our [Flutter AI AssistView](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter AI AssistView example](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects.
\ No newline at end of file
diff --git a/Flutter/barcode/accessibility.md b/Flutter/barcode/accessibility.md
index 7124adb05..b7737b1bf 100644
--- a/Flutter/barcode/accessibility.md
+++ b/Flutter/barcode/accessibility.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Accessibility in Flutter Barcodes | Syncfusion®
+title: Accessibility in Flutter Barcode Generator | Syncfusion®
description: Learn about accessibility support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including screen readers, keyboard navigation, and more.
platform: flutter
@@ -8,7 +8,7 @@ control: SfBarcodeGenerator
documentation: ug
---
-# Accessibility in Flutter Barcodes (SfBarcodeGenerator)
+# Accessibility in Flutter Barcode Generator (SfBarcodeGenerator)
## Sufficient contrast
@@ -20,9 +20,9 @@ You can customize colors for the following elements:
## Large fonts
-The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) automatically adjusts font size based on device settings and scales according to the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all text elements in the barcode generator.
-* [Input value of barcode](https://help.syncfusion.com/flutter/barcode/barcode-customization#text-customization)
+The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) automatically adjusts font size based on device settings and scales according to the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all text elements in Flutter Barcode Generator.
+* [Input value of Barcode Generator](https://help.syncfusion.com/flutter/barcode/barcode-customization#text-customization)
## Screen reader support
-The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) supports Flutter's built-in [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) framework, which provides voice-over and TalkBack screen reader support. You can wrap the barcode generator in a [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget and provide a descriptive label using the label property so that screen readers can announce the barcode's input value. Alternatively, the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget can be placed on the parent container holding the [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html). This improves accessibility for visually impaired users, especially since barcodes are inherently visual elements that cannot be interpreted by screen readers without a meaningful label.
\ No newline at end of file
+The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) supports Flutter's built-in [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) framework, which provides voice-over and TalkBack screen reader support. You can wrap the Flutter Barcode Generator in a [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget and provide a descriptive label using the label property so that screen readers can announce the barcode's input value. Alternatively, the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget can be placed on the parent container holding the [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html). This improves accessibility for visually impaired users, especially since barcodes are inherently visual elements that cannot be interpreted by screen readers without a meaningful label.
\ No newline at end of file
diff --git a/Flutter/barcode/barcode-customization.md b/Flutter/barcode/barcode-customization.md
index 1611ffb94..6033b924d 100644
--- a/Flutter/barcode/barcode-customization.md
+++ b/Flutter/barcode/barcode-customization.md
@@ -1,21 +1,21 @@
---
layout: post
-title: Customization in Flutter Barcodes | Syncfusion®
+title: Customization in Flutter Barcode Generator | Syncfusion®
description: Learn about customization options in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including appearance, sizing, colors, and styling.
platform: flutter
control: SfBarcodeGenerator
documentation: ug
---
-# Customization in Flutter Barcodes (SfBarcodeGenerator)
+# Customization in Flutter Barcode Generator (SfBarcodeGenerator)
-To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
+To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
## Text customization
**Displaying input value**
-To display the input value of the barcode, enable its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, it is set to false.
+To display the input value of the Barcode Generator, enable its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, it is set to false.
{% tabs %}
@@ -52,7 +52,7 @@ To display the input value of the barcode, enable its [`showValue`](https://pub.
**Text style customization**
-The text style can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the barcode generator.
+The text style can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the Flutter Barcode Generator.
{% tabs %}
@@ -99,7 +99,7 @@ The text style can be customized using the [`textStyle`](https://pub.dev/documen
**Text spacing**
-Control the space between the text and the barcode with the [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) property of barcode generator. By default, it is set to 2.
+Control the space between the text and the barcode with the [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) property of the Flutter Barcode Generator. By default, it is set to 2.
{% tabs %}
@@ -140,7 +140,7 @@ Control the space between the text and the barcode with the [`textSpacing`](http
**Horizontal text alignment**
-The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. Position the displayed text at the [`start`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#start), [`center`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#center) or [`end`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#end) of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center.
+The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of the Flutter Barcode Generator. Position the displayed text at the [`start`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#start), [`center`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#center) or [`end`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#end) of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center.
{% tabs %}
@@ -351,7 +351,7 @@ The following code snippet shows the two-dimensional barcode without the [`modul
**Bar color customization**
-Customize the barcode's bar color using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as shown in the following code snippet.
+Customize the bar color of the Barcode Generator using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as shown in the following code snippet.
{% tabs %}
@@ -391,7 +391,7 @@ Customize the barcode's bar color using the [`barColor`](https://pub.dev/documen
**Background color customization**
-You can customize the barcode's background color with the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property of barcode generator as shown in the following code snippet.
+You can customize the background color of the Barcode Generator using the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property, as shown in the following code snippet.
{% tabs %}
diff --git a/Flutter/barcode/getting-started.md b/Flutter/barcode/getting-started.md
index 271220679..353528f64 100644
--- a/Flutter/barcode/getting-started.md
+++ b/Flutter/barcode/getting-started.md
@@ -1,24 +1,24 @@
---
layout: post
-title: Getting Started with Flutter Barcodes | Syncfusion®
+title: Getting Started with Flutter Barcode Generator | Syncfusion®
description: Learn how to get started with the Syncfusion® Flutter Barcodes (SfBarcodeGenerator). Explore setup, barcode generation, and customization options.
platform: flutter
control: SfBarcodeGenerator
documentation: ug
---
-# Getting Started with Flutter Barcodes (SfBarcodeGenerator)
+# Getting Started with Flutter Barcode Generator (SfBarcodeGenerator)
-This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion® barcode generator widget.
+This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion® Flutter Barcode Generator widget.
-## Add Flutter Barcode to an application
+## Add Flutter Barcode Generator to an application
Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation.
**Add dependency**
-Add the Syncfusion® Flutter Barcode dependency to your pubspec.yaml file.
+Add the Syncfusion® Flutter Barcodes dependency to your pubspec.yaml file.
{% tabs %}
@@ -99,11 +99,11 @@ Add the Barcode Generator widget as a child of any widget. Here, the widget is a
N> The default symbology of SfBarcodeGenerator is [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html).
-
+
## Initialize QR Code symbology
-You can set the required symbology type to the barcode generator based on input value by initializing the [`symbology`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology-class.html) property. In the following code snippet, the QR code is set as the barcode symbology.
+You can set the required symbology type to the Flutter Barcode Generator based on input value by initializing the [`symbology`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology-class.html) property. In the following code snippet, the QR code is set as the barcode symbology.
{% tabs %}
@@ -144,7 +144,7 @@ You can set the required symbology type to the barcode generator based on input
## Display input value
-The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of barcode as shown in the following code snippet.
+The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of Barcode Generator as shown in the following code snippet.
{% tabs %}
diff --git a/Flutter/barcode/how-to/custom-widget-on-flutterflow.md b/Flutter/barcode/how-to/custom-widget-on-flutterflow.md
index d9b3076de..84d363435 100644
--- a/Flutter/barcode/how-to/custom-widget-on-flutterflow.md
+++ b/Flutter/barcode/how-to/custom-widget-on-flutterflow.md
@@ -1,19 +1,19 @@
---
layout: post
-title: How to Add Barcodes in FlutterFlow | Syncfusion®
+title: How to Add Barcode Generator in FlutterFlow | Syncfusion®
description: Learn how to add and use Syncfusion® Flutter Barcodes (SfBarcodeGenerator) in FlutterFlow, including setup, integration, and configuration.
platform: flutter
control: SfBarcodeGenerator
documentation: ug
---
-# How to Add Barcodes in FlutterFlow (SfBarcodeGenerator)
+# How to Add Barcode Generator in FlutterFlow (SfBarcodeGenerator)
## Overview
[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our `SfBarcodeGenerator` widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard).
-To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
+To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
### Create a new project
@@ -30,7 +30,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
-### Add the Barcodes widget as a dependency
+### Add the Barcode Generator widget as a dependency
1. Click on `+ Add Dependency`; a text editor will appear.
2. Navigate to [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
diff --git a/Flutter/barcode/one-dimensional.md b/Flutter/barcode/one-dimensional.md
index 56aacad0b..7a6efd6cd 100644
--- a/Flutter/barcode/one-dimensional.md
+++ b/Flutter/barcode/one-dimensional.md
@@ -1,17 +1,17 @@
---
layout: post
-title: One-Dimensional Symbology in Flutter Barcodes | Syncfusion®
+title: One-Dimensional Symbology in Flutter Barcode Generator | Syncfusion®
description: Learn about one-dimensional symbology support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including Code128, EAN, UPC, Codabar, and Code39.
platform: flutter
control: SfBarcodeGenerator
documentation: ug
---
-# One-Dimensional Symbology in Flutter Barcodes (SfBarcodeGenerator)
+# One-Dimensional Symbology in Flutter Barcode (SfBarcodeGenerator)
-To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
+To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
-One-dimensional barcodes represent data by varying the widths and spacings of parallel lines. These barcode types are also known as linear barcodes. The Syncfusion® flutter barcode generator supports the following one-dimensional barcode types:
+One-dimensional barcodes represent data by varying the widths and spacings of parallel lines. These barcode types are also known as linear barcodes. The Syncfusion® Flutter Barcode Generator supports the following one-dimensional barcode types:
* [`Codabar`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Codabar-class.html)
* [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html)
diff --git a/Flutter/barcode/overview.md b/Flutter/barcode/overview.md
index dfa4de689..ab4d23188 100644
--- a/Flutter/barcode/overview.md
+++ b/Flutter/barcode/overview.md
@@ -11,9 +11,9 @@ documentation: ug
The Syncfusion® Flutter Barcode Generator is a data visualization widget designed to generate and display data in a machine-readable format. It offers an efficient way to encode text using supported symbology types.
-To get started with the Flutter Barcode Generator, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
+To get started with the Flutter Barcode Generator, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
-
+
@@ -29,4 +29,4 @@ To quickly get started with our Flutter Barcode Generator widget, watch the tuto
* **Barcode customization** - Customize the visual appearance of barcodes using the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) and [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) properties and adjust the size of smallest line or dot of the code using the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property.
* **Text customization** - Configure to display the barcode value and customize the position and style of the barcode text.
-You can get the barcode sample in the following link: [`Flutter Barcode Examples`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes).
\ No newline at end of file
+You can get the barcode sample in the following link: [`Flutter Barcode Generator Examples`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes).
\ No newline at end of file
diff --git a/Flutter/barcode/two-dimensional.md b/Flutter/barcode/two-dimensional.md
index fe550d00c..f0ad44349 100644
--- a/Flutter/barcode/two-dimensional.md
+++ b/Flutter/barcode/two-dimensional.md
@@ -1,17 +1,17 @@
---
layout: post
-title: Two-Dimensional Symbology in Flutter Barcodes | Syncfusion®
+title: Two-Dimensional Symbology in Flutter Barcode Generator | Syncfusion®
description: Learn about two-dimensional symbology support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including QR Code, Data Matrix, and PDF417.
platform: flutter
control: SfBarcodeGenerator
documentation: ug
---
-# Two-Dimensional Symbology in Flutter Barcodes (SfBarcodeGenerator)
+# Two-Dimensional Symbology in Flutter Barcode (SfBarcodeGenerator)
-To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
+To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/flutter/barcode/getting-started) documentation.
-Two-dimensional barcode is a way to represent information by using the two-dimensional approach. It is similar to one-dimensional barcode, but can represent more data per unit area. The barcode generator control supports the following two-dimensional symbology:
+ Two-dimensional barcode is a way to represent information by using the two-dimensional approach. It is similar to one-dimensional barcode, but can represent more data per unit area. The Flutter Barcode Generator widget supports the following two-dimensional symbology:
* [`QR Code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode-class.html)
* [`Data Matrix`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix-class.html)
@@ -21,7 +21,7 @@ Two-dimensional barcode is a way to represent information by using the two-dimen
A [`QR Code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode-class.html) is a two-dimensional barcode that consists of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift JIS characters.
* The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules.
-* Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text.
+* Each version has its own capacity. By default, the Barcode Generator widget automatically sets the version according to the length of the input text.
* The QR Barcodes are designed for industrial uses and also commonly used in consumer advertising.
{% tabs %}
diff --git a/Flutter/calendar/accessibility.md b/Flutter/calendar/accessibility.md
index cae33c7eb..a80e63b41 100644
--- a/Flutter/calendar/accessibility.md
+++ b/Flutter/calendar/accessibility.md
@@ -70,7 +70,7 @@ The following APIs allow you to customize the colors of the following elements.
## Large fonts
-The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaler`. And also it allows to change the font size of all UI elements in the calendar.
+The [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaler`. And also it allows to change the font size of all UI elements in the Flutter Calendar.
* [appointmentTextStyle](https://help.syncfusion.com/flutter/calendar/appointments#appearance-customization)
* [timeTextStyle](https://help.syncfusion.com/flutter/calendar/timeslot-views#time-text-appearance)
* [dateTextStyle](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
@@ -90,7 +90,7 @@ The following keyboard interactions are supported by the [SfCalendar](https://pu
| Left arrow | Moves selection to the same time slot on the previous day |
| Tab | Focuses the next clickable element, except appointments and cells |
| Shift + tab | Focuses the previous clickable element, except appointment and cells |
-| Alt + number | Calendar view changes in the order of day, week, work week, month, timeline and schedule. Also view change will be restricted if it is not mentioned in the allowed views property of the calendar |
+| Alt + number | Calendar view changes in the order of day, week, work week, month, timeline and schedule. Also view change will be restricted if it is not mentioned in the allowed views property of the Flutter Event Calendar |
| Ctrl + left arrow | To navigate to the previous view |
| Ctrl + right arrow| To navigate to the next view |
| Page up/down | Vertically scrolls through the timeslot views |
diff --git a/Flutter/calendar/appointments.md b/Flutter/calendar/appointments.md
index 680107bb5..99642e528 100644
--- a/Flutter/calendar/appointments.md
+++ b/Flutter/calendar/appointments.md
@@ -9,7 +9,7 @@ documentation: ug
# Flutter Event Calendar Appointments (SfCalendar)
-SfCalendar widget has a built-in capability to handle the appointment arrangement internally based on the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html). [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html) is a class, which holds the details about the appointment to be rendered in calendar.
+ SfCalendar widget has a built-in capability to handle the appointment arrangement internally based on the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html). [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html) is a class, which holds the details about the appointment to be rendered in Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="16 23 24 25 26 27 28 29 30 31 32 34 35 37 38 39 40 41" %}
@@ -64,7 +64,7 @@ class _AppointmentDataSource extends CalendarDataSource {
## Calendar data source and mapping
-[CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) is an abstract class used to set the appointment datasource for calendar and has properties to map the custom appointments to the calendar `Appointment`. Calendar supports full data binding to any type of List source. Specify the corresponding property override method to map the properties in the underlying data source to the calendar appointments in [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html).
+[CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) is an abstract class used to set the appointment datasource for calendar and has properties to map the custom appointments to the calendar `Appointment`. Flutter Event Calendar supports full data binding to any type of List source. Specify the corresponding property override method to map the properties in the underlying data source to the calendar appointments in [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html).
| Property Name | Description |
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|
@@ -329,7 +329,7 @@ class Meeting {
{% endhighlight %}
{% endtabs %}
-You can map those properties of `Meeting` class with our calendar widget by using the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) override methods properties.
+You can map those properties of `Meeting` class with our Flutter Event Calendar widget by using the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) override methods properties.
{% tabs %}
{% highlight dart hl_lines="3 4 6 7 8 9 11 12 13 14 16 17 18 19 21 22 23 24 26 27 28 29 31 32 33 34 36 37 38 39 40" %}
@@ -603,7 +603,7 @@ class _AppointmentDataSource extends CalendarDataSource {
#### Recurrence appointments on last day of month
-To create recurring appointments on the last day of the month, use BYMONTHDAY=-1 in the flutter event calendar.
+To create recurring appointments on the last day of the month, use BYMONTHDAY=-1 in the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="20" %}
@@ -668,7 +668,7 @@ class Meeting {
{% endhighlight %}
{% endtabs %}
-You can map those properties of `Meeting` class with our calendar widget by using [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html).
+You can map those properties of `Meeting` class with our Flutter Event Calendar widget by using [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html).
{% tabs %}
{% highlight dart hl_lines="31 32 33 34" %}
@@ -803,7 +803,7 @@ class Meeting {
#### How to get the Recurrence editor field values from RRULE?
-You can get the Recurrence properties form `RRULE` by using the [parseRRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/parseRRule.html) method from calendar.
+ You can get the Recurrence properties form `RRULE` by using the [parseRRule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/parseRRule.html) method from the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="2 3" %}
@@ -850,7 +850,7 @@ You can delete any occurrence appointment, which exception from the recurrence p
#### Recurrence exception appointment
-You can also change any occurrence appointment, which exception from recurrence pattern appointment by adding the recurrence exception appointment to the calendar [dataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/dataSource.html).
+You can also change any occurrence appointment, which exception from recurrence pattern appointment by adding the recurrence exception appointment to the [dataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/dataSource.html) of the Flutter Event Calendar.
#### Create recurrence exceptions for calendar appointment
@@ -912,7 +912,7 @@ You can add the recurrence exception appointments and recurrence exception dates
#### Delete occurrence from custom recurrence pattern appointment or adding exception dates to custom recurrence pattern appointment
-You can delete any occurrence, which is an exception from the recurrence pattern appointment by using the [getRecurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getRecurrenceExceptionDates.html) override method of [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html), which is used to map the exception dates to the calendar recurrence appointment. The deleted occurrence date will be considered as recurrence exception dates.
+You can delete any occurrence, which is an exception from the recurrence pattern appointment by using the [getRecurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getRecurrenceExceptionDates.html) override method of [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html), which is used to map the exception dates to the recurrence appointment of the Flutter Event Calendar. The deleted occurrence date will be considered as recurrence exception dates.
To add the exception dates in the recurrence series of custom appointment, add the [recurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceExceptionDates.html) property to custom class Meeting.
{% tabs %}
@@ -1065,7 +1065,7 @@ AppointmentDataSource _getDataSource() {
{% endhighlight %}
{% endtabs %}
-
+
>**NOTE**
* The RecurrenceId of the changed occurrence should hold the exact recurrence pattern appointment Id.
@@ -1074,7 +1074,7 @@ AppointmentDataSource _getDataSource() {
## Appearance customization
-The Calendar appointment text style can be customized by using the [appointmentTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTextStyle.html) property of the calendar.
+The appointment text style of the Flutter Event Calendar can be customized by using the [appointmentTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTextStyle.html) property .
{% tabs %}
{% highlight dart hl_lines="9 10 11 12 13" %}
@@ -1104,7 +1104,7 @@ Widget build(BuildContext context) {
## Appointment time format
-You can customize the displaying time format in the appointment widget in the month agenda view and schedule view of calendar by specifying the [appointmentTimeTextFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTimeTextFormat.html) property of the SfCalendar.
+You can customize the displaying time format in the appointment widget in the month agenda view and schedule view of the Flutter Event Calendar by specifying the [appointmentTimeTextFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTimeTextFormat.html) property.
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -1129,7 +1129,7 @@ You can customize the displaying time format in the appointment widget in the mo
### Get visible appointments
-You can get the list of visible appointments by using the [getVisibleAppointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getVisibleAppointments.html) method available in the Calendar data source.
+You can get the list of visible appointments by using the [getVisibleAppointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getVisibleAppointments.html) method available in the CalendarDataSource.
{% tabs %}
{% highlight dart hl_lines="19 20 21" %}
@@ -1240,7 +1240,7 @@ Gets the pattern appointment for the specified occurrence by using the [getPatte
## See also
-To know more about how to display more appointments in the Flutter Calendar, you can watch this video.
+To know more about how to display more appointments in the Flutter Event Calendar, you can watch this video.
diff --git a/Flutter/calendar/builders.md b/Flutter/calendar/builders.md
index 7a8fac307..bb82fbfb5 100644
--- a/Flutter/calendar/builders.md
+++ b/Flutter/calendar/builders.md
@@ -9,14 +9,14 @@ documentation: ug
# Flutter Event Calendar Builders (SfCalendar)
-The calendar allows you to create a responsive UI with conditions based on a widget's details, to design and create your custom view for the month cells and month header of schedule view in the calendar.
+The Flutter Event Calendar allows you to create a responsive UI with conditions based on a widget's details, to design and create your custom view for the month cells and month header of schedule view.
-The calendar has two builders to create and assign your custom view:
+The Flutter Event Calendar has two builders to create and assign your custom view:
* Month cell builder
* Schedule view month header builder
## Month cell builder
-The [MonthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellBuilder.html) allows you to design your custom view and assign the view to the month cells of the calendar by returning an appropriate widget in the [monthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/monthCellBuilder.html) of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
+The [MonthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellBuilder.html) allows you to design your custom view and assign the view to the month cells of the Flutter Event Calendar by returning an appropriate widget in the [monthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/monthCellBuilder.html) of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
[MonthCellDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails-class.html) - returns the details of the month cell.
@@ -81,7 +81,7 @@ class CalendarApp extends StatelessWidget {
## Schedule view month header builder
-You can design your custom view and assign this view to the month header of a schedule view in the calendar by returning an appropriate widget using the [scheduleViewMonthHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/scheduleViewMonthHeaderBuilder.html) in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
+You can design your custom view and assign this view to the month header of a schedule view by returning an appropriate widget using the [scheduleViewMonthHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/scheduleViewMonthHeaderBuilder.html) in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
[ScheduleViewMonthHeaderDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewMonthHeaderDetails-class.html) - returns the required details of the schedule view month header.
@@ -143,7 +143,7 @@ class CalendarApp extends StatelessWidget {
## Appointment builder
-The [CalendarAppointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentBuilder.html) allows you to design your custom view and assign the view to the appointment UI of the calendar by returning an appropriate widget in the [appointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentBuilder.html) of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
+The [CalendarAppointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentBuilder.html) allows you to design your custom view and assign the view to the appointment UI of the Flutter Event Calendar by returning an appropriate widget in the [appointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentBuilder.html) of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
[CalendarAppointmentDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails-class.html): Returns the details of the appointment view.
@@ -292,7 +292,7 @@ class _CalendarAppState extends State {
## Time region builder
-The [TimeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionBuilder.html) allows you to design your custom view and assign the view to the time region view of the calendar by returning an appropriate widget in the [timeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/timeRegionBuilder.html) of SfCalendar.
+The [TimeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionBuilder.html) allows you to design your custom view and assign the view to the time region view of the Flutter Event Calendar by returning an appropriate widget in the [timeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/timeRegionBuilder.html).
[TimeRegionDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionDetails-class.html): Returns the details of the time region view.
@@ -368,7 +368,7 @@ class CalendarApp extends StatelessWidget {
## Resource view header builder
-The [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderBuilder.html) allows you to design the custom view, and assign the view to the resource view header of the calendar by returning an appropriate widget in the [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderBuilder.html) of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
+ The [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderBuilder.html) allows you to design the custom view, and assign the view to the resource view header by returning an appropriate widget in the [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderBuilder.html) of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
[ResourceViewHeaderDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderDetails-class.html) - returns the required details of the resource view header builder.
@@ -421,7 +421,7 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## See also
diff --git a/Flutter/calendar/callbacks.md b/Flutter/calendar/callbacks.md
index 39375a4e7..5ef53a166 100644
--- a/Flutter/calendar/callbacks.md
+++ b/Flutter/calendar/callbacks.md
@@ -9,11 +9,11 @@ documentation: ug
# Flutter Event Calendar Callbacks (SfCalendar)
-The calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedCallback.html) and [CalendarTapCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTapCallback.html) to interact with the Flutter calendar.
+The Flutter Event Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedCallback.html) and [CalendarTapCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTapCallback.html) to handle user interaction.
## View changed callback
-The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onViewChanged.html) callback triggers when the current view of calendar changed, that is view swiped to previous/next view, calendar view switched to another calendar view.
+The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onViewChanged.html) callback triggers when the current view of Flutter Event Calendar changed, that is view swiped to previous/next view, or when the calendar view is switched to another view.
* [visibleDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedDetails/visibleDates.html) - returns the current view visible dates collection.
@@ -55,7 +55,7 @@ class CalendarApp extends StatelessWidget {
## Calendar tap callback
-The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) callback triggers whenever the calendar is tapped.
+The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) callback triggers whenever the Flutter Event Calendar is tapped.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/date.html) - returns the selected date.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/appointments.html) - returns the selected appointments.
@@ -99,15 +99,15 @@ class CalendarApp extends StatelessWidget {
>**NOTE**
* For recurrence appointment, the tap details will always return as `Appointment`, even for the custom business object.
-* The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) and [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callbacks are not applicable for pop-ups like allowedViews and date picker in the calendar header.
+* The [onTap](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) and [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callbacks are not applicable for pop-ups like allowedViews and date picker in the header of the Flutter Event Calendar.
-## Calendar details callback
+## Flutter Event Calendar details callback
-Return calendar details based on the given offset passed through an argument by using the [getCalendarDetailsAtOffset](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/getCalendarDetailsAtOffset.html) method.
+Return details of the Flutter Event Calendar based on the given offset passed through an argument by using the [getCalendarDetailsAtOffset](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/getCalendarDetailsAtOffset.html) method.
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/date.html) - returns the date based on the given offset.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/appointments.html) - returns the appointments based on the given offset.
-* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the calendar element based on the given offset.
+* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the Flutter Event Calendar element based on the given offset.
* [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/resource.html) - returns the resource based on the given offset.
{% tabs %}
@@ -166,8 +166,8 @@ The long-pressed date, appointments, and element details when the long-press act
* [date](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/date.html) - returns the long-pressed date.
* [appointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/appointments.html) - returns the long-pressed appointments.
-* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the long-pressed calendar element.
-* [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/resource.html) - returns the long-pressed calendar resource.
+* [targetElement](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/targetElement.html) - returns the long-pressed element in the Flutter Event Calendar.
+* [resource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTouchDetails/resource.html) - returns the long-pressed resource in the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="18 19 20 21 22" %}
diff --git a/Flutter/calendar/date-navigations.md b/Flutter/calendar/date-navigations.md
index e7dc62d5a..3fd2a0f2d 100644
--- a/Flutter/calendar/date-navigations.md
+++ b/Flutter/calendar/date-navigations.md
@@ -76,7 +76,7 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
@@ -85,7 +85,7 @@ class CalendarApp extends StatelessWidget {
## Programmatic date navigation
-You can programmatically navigate dates in calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/displayDate.html) property of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html).
+You can programmatically navigate dates in the Flutter Event Calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/displayDate.html) property of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html).
{% tabs %}
{% highlight dart hl_lines="3 12 22" %}
@@ -130,7 +130,7 @@ class _CalendarAppState extends State {
{% endtabs %}
## Programmatic date selection
-You can programmatically select the dates in calendar widget by [selectedDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/selectedDate.html) property of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html).
+You can programmatically select the dates in the Flutter Event Calendar widget by [selectedDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController/selectedDate.html) property of [CalendarController](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarController-class.html).
{% tabs %}
{% highlight dart hl_lines="3 12 22" %}
@@ -277,7 +277,7 @@ class _CalendarAppState extends State {
{% endtabs %}
## Show date picker
-You can enable the date picker for the calendar by using the [showDatePickerButton](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showDatePickerButton.html) property in the calendar, which displays the date picker in the header view. It allows you to quickly navigate to the different calendar views.
+You can enable the date picker for the Flutter Event Calendar by using the [showDatePickerButton](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showDatePickerButton.html) property, which displays the date picker in the header view. It allows you to quickly navigate to the different calendar views.
{% tabs %}
{% highlight dart hl_lines="15" %}
@@ -316,7 +316,7 @@ To know more about how to customize the Date Picker's appearance in the Flutter
## Show today button
-You can enable the today button by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showTodayButton.html) property in the calendar, which displays the today button in the header view. It allows you to quickly navigate from the current view to the today's view.
+You can enable the today button by using the [showTodayButton](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showTodayButton.html) property in the Flutter Event Calendar, which displays the today button in the header view. It allows you to quickly navigate from the current view to the today's view.
{% tabs %}
{% highlight dart hl_lines="15" %}
@@ -348,7 +348,7 @@ class CalendarApp extends StatelessWidget {
{% endtabs %}
## Allow view navigation
-You can quickly navigate to the day view by a tap on the month cell and view header of the calendar views by using the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowViewNavigation.html) property of the calendar.
+You can quickly navigate to the day view by a tap on the month cell and view header of the calendar views by using the [allowViewNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowViewNavigation.html) property of the Flutter Event Calendar.
{% tabs %}
@@ -383,7 +383,7 @@ class CalendarApp extends StatelessWidget {
## Allowed views
-You can quickly navigate to the different calendar views by using the [allowedViews](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowedViews.html) property in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). The views set to this property will display as a view button in the calendar header view. This UI will be responsive as showing more icons in the mobile view and will be updated based on the browser size change.
+You can quickly navigate to the different calendar views by using the [allowedViews](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowedViews.html) property in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). The views set to this property will display as a view button in the header view of the Flutter Event Calendar. This UI will be responsive as showing more icons in the mobile view and will be updated based on the browser size change.
{% tabs %}
{% highlight dart hl_lines="15 16 17 18 19 20 21 22" %}
diff --git a/Flutter/calendar/drag-drop.md b/Flutter/calendar/drag-drop.md
index 42a49dd82..6a8476041 100644
--- a/Flutter/calendar/drag-drop.md
+++ b/Flutter/calendar/drag-drop.md
@@ -13,7 +13,7 @@ Easily reschedule an appointment by dragging it from one time slot or month cell
## Allow Drag and Drop
-To perform drag-and-drop operations within the calendar, enable the [allowDragAndDrop](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowDragAndDrop.html) property of SfCalendar.
+To perform drag-and-drop operations within the Flutter Event Calendar, enable the [allowDragAndDrop](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/allowDragAndDrop.html) property of SfCalendar.
{% tabs %}
{% highlight dart hl_lines="20" %}
@@ -210,7 +210,7 @@ void dragEnd(AppointmentDragEndDetails appointmentDragEndDetails) {
## Disabling navigation when dragging appointment
-You can restrict the navigation to the next/previous view when the dragging appointment reaches the start/end point of the current view in calendar by using the [allowNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowNavigation.html) property of [DragAndDropSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings-class.html). Default value of [allowNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowNavigation.html) property is true.
+You can restrict the navigation to the next/previous view when the dragging appointment reaches the start/end point of the current view in Flutter Event Calendar by using the [allowNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowNavigation.html) property of [DragAndDropSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings-class.html). Default value of [allowNavigation](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowNavigation.html) property is true.
{% tabs %}
{% highlight dart hl_lines="20" %}
@@ -247,7 +247,7 @@ class CalendarApp extends StatelessWidget {
## Disabling scroll when dragging appointment
-You can restrict the timeslot views auto scroll when the appointment reaches the start/end point of the view port in the timeslot views of calendar by using the [allowScroll](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowScroll.html) property of [DragAndDropSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/DragAndDropSettings.html).
+You can restrict the timeslot views auto scroll when the appointment reaches the start/end point of the view port in the timeslot views of Flutter Event Calendar by using the [allowScroll](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/allowScroll.html) property of [DragAndDropSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/DragAndDropSettings/DragAndDropSettings.html).
{% tabs %}
{% highlight dart hl_lines="20" %}
diff --git a/Flutter/calendar/getting-started.md b/Flutter/calendar/getting-started.md
index 7a7fcb500..090b0f0ff 100644
--- a/Flutter/calendar/getting-started.md
+++ b/Flutter/calendar/getting-started.md
@@ -9,21 +9,21 @@ documentation: ug
# Flutter Event Calendar Getting Started (SfCalendar)
-This section explains the steps required to add the calendar widget and populate appointments to the calendar widget. This section covers only basic features needed to get started with Syncfusion® calendar widget.
+This section explains the steps required to add the Flutter Event Calendar widget and populate it with appointments. This section covers only basic features needed to get started with Syncfusion® Flutter Calendar widget.
-To get started quickly with our [Flutter event calendar widget](https://www.syncfusion.com/flutter-widgets/flutter-calendar), you can refer to this video.
+To get started quickly with our [Flutter Event Calendar widget](https://www.syncfusion.com/flutter-widgets/flutter-calendar), you can refer to this video.
-N> You can also explore our [Flutter Calendar example](https://flutter.syncfusion.com/#/event-calendar/getting-started) to know how to render and configure the Flutter Examples.
+N> You can also explore our [Flutter Event Calendar example](https://flutter.syncfusion.com/#/event-calendar/getting-started) to know how to render and configure the Flutter Examples.
-## Add Flutter calendar to an application
+## Add Flutter Event Calendar to an application
Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation.
**Add dependency**
-Add the Syncfusion® Flutter calendar dependency to your pubspec.yaml file.
+Add the Syncfusion® Flutter Calendar dependency to your pubspec.yaml file.
{% tabs %}
{% highlight dart %}
@@ -61,9 +61,9 @@ import 'package:syncfusion_flutter_calendar/calendar.dart';
{% endhighlight %}
{% endtabs %}
-## Initialize calendar
+## Initialize Flutter Event Calendar
-After importing the package, initialize the calendar widget as a child of any widget. Here, the calendar widget is added as a child of the scaffold widget.
+After importing the package, initialize the Flutter Event Calendar widget as a child of any widget. Here, the Flutter Event Calendar widget is added as a child of the scaffold widget.
{% tabs %}
{% highlight dart hl_lines="11" %}
@@ -131,8 +131,8 @@ class CalendarApp extends StatelessWidget {
## Add data source
-The calendar widget has a built-in capability to handle appointment arrangement internally based on the appointment collections. You need to assign the created collection to the [dataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/dataSource.html) property.
-You can also map custom appointment data to our calendar.
+The Flutter Event Calendar widget has a built-in capability to handle appointment arrangement internally based on the appointment collections. You need to assign the created collection to the [dataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/dataSource.html) property.
+You can also map custom appointment data to our Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="16 22 23 24 25 26 27 28 29 30 31" %}
@@ -221,7 +221,7 @@ class Meeting {
## Change first day of week
-The calendar widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/firstDayOfWeek.html) property.
+The Flutter Event Calendar widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/firstDayOfWeek.html) property.
{% tabs %}
{% highlight dart hl_lines="12" %}
@@ -256,7 +256,7 @@ class CalendarApp extends StatelessWidget {
## Initial selected date
-You can programmatically select the specific calendar month cell, and time slot by setting corresponding date and time value to the [initialSelectedDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialSelectedDate.html) property of calendar. By default, it is null.
+You can programmatically select the specific month cell and time slot in the Flutter Event Calendar by setting corresponding date and time value to the [initialSelectedDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialSelectedDate.html) property. By default, it is null.
{% tabs %}
{% highlight dart hl_lines="14" %}
@@ -293,7 +293,7 @@ class CalendarApp extends StatelessWidget {
## Initial display date
-You can change the initial display date of calendar by using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of calendar, which displays the calendar based on the given date time. By default, current date will be set as `initialDisplayDate`.
+You can change the initial display date of the Flutter Event Calendar by using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property, which displays the calendar based on the given date time. By default, current date will be set as `initialDisplayDate`.
{% tabs %}
{% highlight dart hl_lines="14" %}
@@ -330,7 +330,7 @@ class CalendarApp extends StatelessWidget {
## Selection decoration
-You can decorate the selection view of calendar by using the [selectionDecoration](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/selectionDecoration.html) property of Calendar.
+You can decorate the selection view of the Flutter Event Calendar by using the [selectionDecoration](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/selectionDecoration.html) property.
{% tabs %}
{% highlight dart hl_lines="14 15 16 17 18 19" %}
@@ -372,7 +372,7 @@ class CalendarApp extends StatelessWidget {
## Today highlight color
-You can customize the today highlight color of calendar by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/todayHighlightColor.html) property in calendar, which will highlight the today text in calendar view header, month cell, and agenda view.
+You can customize the today highlight color of the Flutter Event Calendar by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/todayHighlightColor.html) property. This property highlights the today text in the view header, month cell, and agenda view.
{% tabs %}
{% highlight dart hl_lines="14" %}
@@ -409,7 +409,7 @@ class CalendarApp extends StatelessWidget {
## Cell border color
-You can customize the vertical and horizontal line color of calendar by using the [cellBorderColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellBorderColor.html) property in calendar.
+You can customize the vertical and horizontal line color of the Flutter Event Calendar by using the [cellBorderColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellBorderColor.html) property.
{% tabs %}
{% highlight dart hl_lines="14" %}
@@ -446,7 +446,7 @@ class CalendarApp extends StatelessWidget {
## Background color
-The calendar widgets background color can be customized by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/backgroundColor.html) property in calendar.
+The background color of the Flutter Event Calendar can be customized by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_Calendar/latest/Calendar/SfCalendar/backgroundColor.html) property.
{% tabs %}
{% highlight dart hl_lines="14" %}
@@ -482,7 +482,7 @@ class CalendarApp extends StatelessWidget {
## Navigation arrow
-Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showNavigationArrow.html) property of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html), you can navigate to the next or previous views of the calendar without swiping.
+Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showNavigationArrow.html) property of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html), you can navigate to the next or previous views of the Flutter Event Calendar without swiping.
{% tabs %}
{% highlight dart hl_lines="14" %}
@@ -520,7 +520,7 @@ class CalendarApp extends StatelessWidget {
* The [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showNavigationArrow.html) property is not applicable when the [view](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/view.html) is set to [CalendarView.schedule](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarView.html).
## Cell end padding
-You can customize the padding of appointment view end to make touch position for timeslot and month cell by using the [cellEndPadding](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellEndPadding.html) property in the calendar, which allows you to tap the calendar cell when the cell has appointments.
+You can customize the padding of appointment view end to make touch position for timeslot and month cell by using the [cellEndPadding](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellEndPadding.html) property in the Flutter Event Calendar, which allows you to tap the calendar cell when the cell has appointments.
{% tabs %}
{% highlight dart hl_lines="15" %}
@@ -594,7 +594,7 @@ class CalendarApp extends StatelessWidget {
## Week number
-Display the Week number of the year in all views except schedule view of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showWeekNumber.html) property as true and by default it is false. Week numbers will be displayed based on the ISO standard.
+Display the Week number of the year in all views except schedule view of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_Calendar/latest/Calendar/SfCalendar-class.html) by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_Calendar/latest/Calendar/SfCalendar/showWeekNumber.html) property as true and by default it is false. Week numbers will be displayed based on the ISO standard.
{% tabs %}
{% highlight dart hl_lines="15" %}
@@ -625,11 +625,11 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Week number appearance
-Customize the Week number text style of the calendar by using the [WeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle-class.html) property. Allows to customize the [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/backgroundColor.html) in the Week number of the calendar.
+Customize the Week number text style of the Flutter Event Calendar by using the [WeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle-class.html) property. Allows to customize the [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/backgroundColor.html) in the Week number of the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="16 17 18 19" %}
@@ -664,7 +664,7 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
Get the complete "getting started" sample from [here](https://github.com/SyncfusionExamples/flutter-calendar).
diff --git a/Flutter/calendar/headers.md b/Flutter/calendar/headers.md
index f9dd7b9e1..07d029412 100644
--- a/Flutter/calendar/headers.md
+++ b/Flutter/calendar/headers.md
@@ -14,11 +14,11 @@ You can learn about the header and view header height, date format, and appearan
## Header
-You can customize the header of the calendar using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerHeight.html) properties in calendar.
+You can customize the header of the Flutter Event Calendar using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerHeight.html) properties.
-### Customize header height in calendar
+### Customize header height in Flutter Event Calendar
-You can customize the height for header in calendar using the [headerHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerHeight.html) property in calendar.
+You can customize the height for the header using the [headerHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerHeight.html) property in Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="16" %}
@@ -49,10 +49,10 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### Header appearance
-You can style the header using the [calendarHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle-class.html) in calendar. You can change the background color, textStyle, and text alignment using the properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textAlign.html) of header using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerStyle.html) property in calendar.
+You can style the header using the [calendarHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle-class.html) in Flutter Event Calendar. You can change the background color, textStyle, and text alignment using the properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarHeaderStyle/textAlign.html) of header using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/headerStyle.html) property in Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24" %}
@@ -132,11 +132,11 @@ class CalendarApp extends StatelessWidget {
## View header
-You can customize the view header of the calendar using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderStyle.html) and [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderHeight.html) properties in calendar.
+You can customize the view header of the Flutter Event Calendar using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderStyle.html) and [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderHeight.html) properties.
-### Customize view header height in calendar
+### Customize view header height in Flutter Event Calendar
-You can customize the height for view header in calendar using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderHeight.html) property in calendar.
+You can customize the height for view header in Flutter Event Calendar using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderHeight.html) property.
{% tabs %}
{% highlight dart hl_lines="16" %}
@@ -167,11 +167,11 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
### View header appearance
-You can style the header using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle-class.html) properties in calendar. You can change the background color, dayTextStyle, and dateTextStyle using properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/backgroundColor.html), [dayTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/dayTextStyle.html) and [dateTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/dateTextStyle.html) of view header using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderStyle.html) property in calendar.
+You can style the header using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle-class.html) properties in the Flutter Event Calendar. You can change the background color, dayTextStyle, and dateTextStyle using properties such as [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/backgroundColor.html), [dayTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/dayTextStyle.html) and [dateTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewHeaderStyle/dateTextStyle.html) of view header using the [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/viewHeaderStyle.html) property in Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="16 17 18 19 20 21 22 23 24 25 26" %}
@@ -215,7 +215,7 @@ class CalendarApp extends StatelessWidget {
>**NOTE**
-* The `dateTextStyle` property not applicable for view header in month view of calendar.
+* The `dateTextStyle` property is not applicable for view header in month view of the Flutter Event Calendar.
## See also
diff --git a/Flutter/calendar/how-to/custom-widget-on-flutterflow.md b/Flutter/calendar/how-to/custom-widget-on-flutterflow.md
index c098d02ad..89d025d30 100644
--- a/Flutter/calendar/how-to/custom-widget-on-flutterflow.md
+++ b/Flutter/calendar/how-to/custom-widget-on-flutterflow.md
@@ -28,7 +28,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
-### Add Calendar widget as a dependency
+### Add Syncfusion® Flutter Calendar widget as a dependency
1. Click on `+ Add Dependency`, a text editor will appear.
2. Navigate to [Syncfusion® Flutter Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
diff --git a/Flutter/calendar/load-more.md b/Flutter/calendar/load-more.md
index 01a6e5b57..460d1b6c7 100644
--- a/Flutter/calendar/load-more.md
+++ b/Flutter/calendar/load-more.md
@@ -9,11 +9,11 @@ documentation: ug
# Load more in Flutter Event Calendar (SfCalendar)
-The Calendar provides the support to display an interactive view when the calendar view is changed, or the schedule view reaches its start or end offset. You can use the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) builder to display the view while loading appointments in the calendar.
+The Flutter Event Calendar provides the support to display an interactive view when the calendar view is changed, or the schedule view reaches its start or end offset. You can use the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) builder to display the view while loading appointments in the Flutter Event Calendar.
## Building load more widget
-Build your own custom widget by using the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) that will be displayed as a loading indicator in the calendar when the calendar view changes, and in the calendar schedule view, the loading indicator will be displayed when it reaches the start or end position to load more appointments.
+Build your own custom widget by using the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) property. The widget will be displayed as a loading indicator when the view of the Flutter Event Calendar changes. In Schedule view, the loading indicator will be displayed when it reaches the start or end position to load more appointments.
{% tabs %}
{% highlight dart hl_lines="20 21 22 23 24 25 26 27 28 29 30 31 32 33" %}
@@ -95,7 +95,7 @@ You can get the complete load more sample from this [link](https://github.com/Sy
## Load appointments
-Update the appointments on-demand, when the loading indicator is displaying in the calendar by using the [handleLoadMore](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/handleLoadMore.html) method in the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html), which allows adding the appointments to the data source, update the data source, and notify the listener to update the appointment on view.
+Update the appointments on-demand, when the loading indicator is displaying in the Flutter Event Calendar by using the [handleLoadMore](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/handleLoadMore.html) method in the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html), which allows adding the appointments to the data source, update the data source, and notify the listener to update the appointment on view.
{% tabs %}
{% highlight dart hl_lines="3 9 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34" %}
diff --git a/Flutter/calendar/localization.md b/Flutter/calendar/localization.md
index 8b1b1439f..c506df367 100644
--- a/Flutter/calendar/localization.md
+++ b/Flutter/calendar/localization.md
@@ -9,7 +9,7 @@ documentation: ug
# Flutter Event Calendar Localization (SfCalendar)
-By default, the calendar widget supports US English localizations. You can change to other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
+By default, the Flutter Event Calendar widget supports US English localizations. You can change to other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
To use `flutter_localizations`, add the package as dependency to your `pubspec.yaml` file.
@@ -68,8 +68,8 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-## Localize the custom text in Calendar
-Calendar custom text can be localized using the `syncfusion_localizations` package and specifying `localizationsDelegates` in `MaterialApp`.
+## Localize the custom text in Flutter Event Calendar
+Flutter Event Calendar custom text can be localized using the `syncfusion_localizations` package and specifying `localizationsDelegates` in `MaterialApp`.
To use `syncfusion_localizations`, add the package as dependency to `pubspec.yaml` file.
@@ -94,7 +94,7 @@ import 'package:syncfusion_localizations/syncfusion_localizations.dart';
{% endhighlight %}
{% endtabs %}
-Then, declare the `SfGlobalLocalizations.delegate` in the `localizationsDelegates`, which is used to localize the custom string (No events, No selected date) used in the calendar and specify the `supportedLocales` as well.
+Then, declare the `SfGlobalLocalizations.delegate` in the `localizationsDelegates`, which is used to localize the custom string (No events, No selected date) used in the Flutter Event Calendar and specify the `supportedLocales` as well.
{% tabs %}
{% highlight dart hl_lines="16" %}
@@ -141,7 +141,7 @@ class CalendarApp extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## See also
diff --git a/Flutter/calendar/month-view.md b/Flutter/calendar/month-view.md
index 548fb5177..2361b851f 100644
--- a/Flutter/calendar/month-view.md
+++ b/Flutter/calendar/month-view.md
@@ -9,11 +9,11 @@ documentation: ug
# Flutter Event Calendar Month View (SfCalendar)
-The `month` view of Flutter Event [Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) (SfCalendar) is used to display entire dates of the specific month and current month by default initially. Current date color is differentiated with other dates of the current month, also the color differentiation for dates will be applicable for previous and next month dates.
+The `month` view of [Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-Calendar) is used to display entire dates of the specific month and current month by default initially. Current date color is differentiated with other dates of the current month, also the color differentiation for dates will be applicable for previous and next month dates.
## Month agenda view
-The calendar month view displays a divided agenda view that is used to show the selected date’s appointments below the month. You can show the agenda view by setting the [showAgenda](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/showAgenda.html) property to true in [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html).
+The month view of the Flutter Event Calendar displays a divided agenda view that is used to show the selected date’s appointments below the month. You can show the agenda view by setting the [showAgenda](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/showAgenda.html) property to true in [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html).
{% tabs %}
{% highlight dart hl_lines="16" %}
@@ -52,7 +52,7 @@ class CalendarApp extends StatelessWidget {
## Month appointment display mode
-You can handle the calendar month view appointment display by using the [appointmentDisplayMode](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/appointmentDisplayMode.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, `appointmentDisplayMode` is set to Indicator, using the `appointmentDisplayMode` you can set the month view appointments display as follows.
+You can handle the Flutter Event Calendar month view appointment display by using the [appointmentDisplayMode](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/appointmentDisplayMode.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, `appointmentDisplayMode` is set to Indicator, using the `appointmentDisplayMode` you can set the month view appointments display as follows.
* [indicator](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthAppointmentDisplayMode.html) - appointment will be denoted as the circle.
* [appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthAppointmentDisplayMode.html) - appointment subject will be displayed in month cell.
@@ -94,7 +94,7 @@ class CalendarApp extends StatelessWidget {
## Agenda view height
-You can customize the month agenda view height from calendar by using the [agendaViewHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/agendaViewHeight.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, the agenda view will occupy the 30% height of the calendar height.
+You can customize the month agenda view height from the Flutter Event Calendar by using the [agendaViewHeight](https://pub.dev/documentation/syncfusion_flutter_Calendar/latest/Calendar/MonthViewSettings/agendaViewHeight.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_Calendar/latest/Calendar/MonthViewSettings-class.html). By default, the agenda view will occupy the 30% height of the Flutter Event Calendar height.
{% tabs %}
{% highlight dart hl_lines="20" %}
@@ -216,7 +216,7 @@ class CalendarApp extends StatelessWidget {
## Month navigation direction
-MonthView of calendar can be navigated in both horizontal and vertical direction. You can change the direction of navigation using the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/navigationDirection.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html), by default Month navigation direction is Horizontal.
+MonthView of the Flutter Event Calendar can be navigated in both horizontal and vertical direction. You can change the direction of navigation using the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/navigationDirection.html) property of [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html), by default Month navigation direction is Horizontal.
{% tabs %}
{% highlight dart hl_lines="18 19" %}
@@ -298,7 +298,7 @@ class CalendarApp extends StatelessWidget {
## Hide leading and trailing dates
-You can hide the previous and next month dates of a calendar month view by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/showTrailingAndLeadingDates.html) property in the [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html) of the calendar.
+You can hide the previous and next month dates of the Flutter Event Calendar month view by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/showTrailingAndLeadingDates.html) property in the [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html).
{% tabs %}
{% highlight dart hl_lines="16" %}
@@ -336,7 +336,7 @@ class CalendarApp extends StatelessWidget {
## Customize number of month rows
-The number of weeks in the month view can be changed by setting the [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/numberOfWeeksInView.html) property in [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, `numberOfWeeksInView` starts from current week, and this can be modified using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of calendar, the two weeks calendar can be achieved by setting the `numberOfWeeksInView` property with the value 2.
+The number of weeks in the month view can be changed by setting the [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/numberOfWeeksInView.html) property in [MonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings-class.html). By default, `numberOfWeeksInView` starts from current week, and this can be modified using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of the Flutter Event Calendar. A two-week calendar can be achieved by setting the `numberOfWeeksInView` property to 2.
{% tabs %}
{% highlight dart hl_lines="18" %}
@@ -373,7 +373,7 @@ class CalendarApp extends StatelessWidget {
>**NOTE**
* Week number ranges from 1 to 6. If lesser or greater than these range is considered, [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/numberOfWeeksInView.html) will be displayed as 6.
-* Dynamically changing [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/numberOfWeeksInView.html) shows the first row of month view dates. It can be handled using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of calendar.
+* Dynamically changing [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthViewSettings/numberOfWeeksInView.html) shows the first row of month view dates. It can be handled using the [initialDisplayDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/initialDisplayDate.html) property of the Flutter Event Calendar.
## View header DayFormat
diff --git a/Flutter/calendar/overview.md b/Flutter/calendar/overview.md
index 6f004a8d0..947769a03 100644
--- a/Flutter/calendar/overview.md
+++ b/Flutter/calendar/overview.md
@@ -9,9 +9,9 @@ documentation: ug
# Flutter Event Calendar Overview (SfCalendar)
-The Syncfusion® Flutter Calendar library is written natively in Dart and has nine types of built-in configurable view modes that provide basic functionality for scheduling, managing, and representing appointments efficiently. The calendar widget exposes a clean and convenient user interface for custom working days and hours and basic calendar operations such as date navigation and selection.
+The Syncfusion® Flutter Calendar library is written natively in Dart and has nine types of built-in configurable view modes that provide basic functionality for scheduling, managing, and representing appointments efficiently. The Flutter Event Calendar widget exposes a clean and convenient user interface for custom working days and hours and basic calendar operations such as date navigation and selection.
-
+
## Key features
@@ -20,13 +20,13 @@ The Syncfusion® Flutter Calendar library is written natively in D
* **Appointments**: Appointments contain information on events scheduled at specific times. In addition to default appointments, users can use their own collections to connect a business entity to an appointment by mapping their fields, such as start time, end time, subject, notes, and recurrence.
-
+
* **Recurring appointments**: Easily configure recurring events to be repeated on a daily, weekly, monthly, or yearly basis with optimized recurrence options. You can also skip or change the occurrence of a recurring appointment.
-* **Time zone**: Regardless of the time zone in your device, Calendar supports setting any required time zone for the control itself, as well as individual events.
+* **Time zone**: Regardless of the time zone in your device, Flutter Event Calendar supports setting any required time zone for the control itself, as well as individual events.
-
+
* **Schedule view**: Show a list of scheduled appointments grouped by week, between set minimum and maximum dates, with the schedule view. You can customize everything from the date and time formats to the styling of each header.
@@ -37,7 +37,7 @@ The Syncfusion® Flutter Calendar library is written natively in D
* **Special time regions**: Disable interactions and selections for specific time ranges. This is useful when you want to block user interaction during holidays or other special events and to highlight those time slots.
-
+
* **Flexible working days**: Customize the work days in a workweek so that the remaining days will be hidden from view.
@@ -46,19 +46,19 @@ The Syncfusion® Flutter Calendar library is written natively in D
* **First day of the week**: Customize the first day of the week as needed. The default is Sunday.
-* **Blackout dates**: Disable any date in a month and timeline month view of a calendar to make it inactive. You can easily prevent the selection of weekends by disabling them.
+* **Blackout dates**: Disable any date in a month and timeline month view of a Flutter Event Calendar to make it inactive. You can easily prevent the selection of weekends by disabling them.
-* **Hide leading and trailing dates**: Hide the next month and previous month dates in the calendar to enhance the appearance.
+* **Hide leading and trailing dates**: Hide the next month and previous month dates in the Flutter Event Calendar to enhance the appearance.
* **Month agenda view**: Display appointments in a list as shown in the following month view by clicking on a day.
-* **Appearance customization**: Provide a uniform and consistent look with Calendar’s flexible appearance and format.
+* **Appearance customization**: Provide a uniform and consistent look with flexible appearance and format of the Flutter Event Calendar.
-* **Custom start and end hours**: Display the event calendar timeslot views with specific time durations by hiding the unwanted hours.
-* **Web layout**: The web layout improved for a better experience, and now, the mouse hovering effect has been applied to all the calendar elements.
+* **Custom start and end hours**: Display the Flutter Event Calendar timeslot views with specific time durations by hiding the unwanted hours.
+* **Web layout**: The web layout improved for a better experience, and now, the mouse hovering effect has been applied to all the Flutter Event Calendar elements.
## Getting started
diff --git a/Flutter/calendar/resource-view.md b/Flutter/calendar/resource-view.md
index ac55ddf78..a860be951 100644
--- a/Flutter/calendar/resource-view.md
+++ b/Flutter/calendar/resource-view.md
@@ -9,7 +9,7 @@ documentation: ug
# Flutter Event Calendar Resource View (SfCalendar)
-The timeline resource grouping is a discrete view integrated into our Event Calendar widget that allows you to group the appointments based on the available resource in timeline views of the calendar. Using this feature, you can group the appointments and time regions arranged in a row-wise order based on the allocated resource in the timeline views. This rich feature set includes customization and you can assign unique styles to the available resource view.
+The timeline resource grouping is a discrete view integrated into our Flutter Event Calendar widget that allows you to group the appointments based on the available resource in timeline views. Using this feature, you can group the appointments and time regions arranged in a row-wise order based on the allocated resource in the timeline views. This rich feature set includes customization and you can assign unique styles to the available resource view.
You can create a resource view by setting the [displayName](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/displayName.html), [color](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/color.html), [id](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/id.html), and [image](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/image.html) property of the [CalendarResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource-class.html).
@@ -81,7 +81,7 @@ class _AppointmentDataSource extends CalendarDataSource {
## Assigning events for resources
-You can associate resources to the appointments by adding `id` of a resource to the [resourceIds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/resourceIds.html) property of [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html). The appointments will be displayed in the row associates with the resource in the event calendar timeline views.
+You can associate resources to the appointments by adding `id` of a resource to the [resourceIds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/resourceIds.html) property of [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html). The appointments will be displayed in the row associates with the resource in the Flutter Event Calendar timeline views.
{% tabs %}
{% highlight dart hl_lines="6" %}
@@ -357,7 +357,7 @@ class _CalendarAppState extends State {
### Resource panel size
-You can customize the size of the panel that displays the resource views in the calendar by setting an appropriate value to the [size](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/size.html) property available in the [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/resourceViewSettings.html).
+You can customize the size of the panel that displays the resource views in the Flutter Event Calendar by setting an appropriate value to the [size](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/size.html) property available in the [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/resourceViewSettings.html).
{% tabs %}
{% highlight dart hl_lines="21" %}
diff --git a/Flutter/calendar/right-to-left.md b/Flutter/calendar/right-to-left.md
index e003d083e..e8f4f2a04 100644
--- a/Flutter/calendar/right-to-left.md
+++ b/Flutter/calendar/right-to-left.md
@@ -8,7 +8,7 @@ documentation: ug
---
# Right to Left (RTL) in Flutter Event Calendar (SfCalendar)
-The event calendar supports right-to-left rendering and all the calendar elements rendering direction will be changed.
+The Flutter Event Calendar supports right-to-left rendering and the rendering direction of all the calendar elements will be changed.
## RTL rendering ways
Right to Left rendering can be switched in the following ways:
@@ -51,7 +51,7 @@ class CalendarApp extends StatelessWidget {
{% endtabs %}
### Changing the locale to RTL languages
-To change the event calendar rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
+To change the rendering direction of the Flutter Event Calendar from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
{% tabs %}
{% highlight dart hl_lines="14 15 16 17 18 19 20 21 22 23" %}
diff --git a/Flutter/calendar/schedule-view.md b/Flutter/calendar/schedule-view.md
index 7e16f72e1..019e2f812 100644
--- a/Flutter/calendar/schedule-view.md
+++ b/Flutter/calendar/schedule-view.md
@@ -13,10 +13,10 @@ The `schedule` view of SfCalendar shows a list of scheduled appointments grouped
The schedule view displays two different UIs for mobile and web. For mobile, it will display the month header, week header, and date header, but for the web, it will display the appointments alone in the view.
-
+
>**NOTE**
-* If the web view width is less than `767`, the calendar will render the mobile schedule UI for the web.
+* If the web view width is less than `767`, the Flutter Event Calendar will render the mobile schedule UI for the web.
## Appointment item height
You can customize the height of an appointment in a schedule view by using the [appointmentItemHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings/appointmentItemHeight.html) property of [ScheduleViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewSettings-class.html).
diff --git a/Flutter/calendar/timeslot-views.md b/Flutter/calendar/timeslot-views.md
index 79f4c6af5..151fba91f 100644
--- a/Flutter/calendar/timeslot-views.md
+++ b/Flutter/calendar/timeslot-views.md
@@ -9,7 +9,7 @@ documentation: ug
# Flutter Event Calendar Timeslot View (SfCalendar)
-[Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) has six built-in time slot views used to display dates, and the views will show based on the current day by default. Appointments on a specific day will be arranged in respective timeslots based on their duration.
+[Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) has six built-in time slot views used to display dates, and the views will show based on the current day by default. Appointments on a specific day will be arranged in respective timeslots based on their duration.
* **Day view:** Displays a single day.
* **Week view:** Displays all days of a week.
@@ -174,14 +174,14 @@ class CalendarApp extends StatelessWidget {
>**NOTE**
* The [nonWorkingDay](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/nonWorkingDays.html) property is applicable only for `workWeek` and `timelineWorkWeek` views only, and not applicable for the remaining views.
-* Calendar Appointments UI, which does not fall within the `startHour` and `endHour` will not be visible and if it falls partially, it will be clipped.
+* Flutter Event Calendar Appointments UI, which does not fall within the `startHour` and `endHour` will not be visible and if it falls partially, it will be clipped.
* No need to specify the decimal point values for `startHour` and `endHour`, if you don’t want to set the minutes.
* The number of time slots will be calculated based on total minutes of a day and time interval (total minutes of a day ((start hour - end hour) * 60) / time interval).
* If custom timeInterval is given, then the number of time slots calculated based on the given TimeInterval should result in integer value (total minutes % timeInterval = 0), otherwise next immediate time interval that result in integer value when divide total minutes of a day will be considered. For example, if timeInterval=2 Hours 15 minutes and total minutes = 1440 (24 Hours per day), then timeInterval will be changed to ‘144’ (1440%144=0) by considering (total minutes % timeInterval = 0), it will return integer value for time slots rendering.
* If the custom `startHour` and `endHour` are given, then the number of time slots calculated based on given `startHour` and `endHour` should result in integer value, otherwise next immediate `timeInterval` will be considered until the result is integer value. For example, if `startHour` is 9 (09:00AM), `endHour` is 18.25 (06:15 PM), `timeInterval` is 30 minutes, and total minutes = 555 ((18.25-9)*60), then the timeInterval will be changed to ’37 minutes’ (555%37=0) by considering (total minutes % timeInterval = 0). it will return integer value for time slots rendering.
## Number of days in view
-You can customize the days count by setting the [numberOfDaysInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/numberOfDaysInView.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/) in the calendar.
+You can customize the days count by setting the [numberOfDaysInView](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/numberOfDaysInView.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html/) in the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="17" %}
@@ -220,7 +220,7 @@ class CalendarApp extends StatelessWidget {
## Special time regions
You can restrict the user interaction such as selection and highlights specific regions of time in the timeslot views by adding the [specialRegions](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/specialRegions.html) property of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). You need to set the [startTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/startTime.html) and [endTime](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/endTime.html) properties of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html) to create a `specialTimeRegion`, you can use the [timeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/timeZone.html) property to set the specific timezone for start and end time of `specialTimeRegion`. The `specialTimeRegion` will display the text or icon on it that set to the [text](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/text.html) or [iconData](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/iconData.html) property of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html).
-
+
>**NOTE**
* If time region has both the text and icon then it will draw icon only.
@@ -429,7 +429,7 @@ class CalendarApp extends StatelessWidget {
## Full screen calendar
-The calendar time interval height and width can be adjusted based on the screen height by changing the value of the [timeIntervalHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalHeight.html) and [timeIntervalWidth](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalWidth.html) property to -1. It will auto fit the screen height and width.
+The time interval height and width of the Flutter Event Calendar can be adjusted based on the screen height by changing the value of the [timeIntervalHeight](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalHeight.html) and [timeIntervalWidth](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeIntervalWidth.html) property to -1. It will auto fit the screen height and width.
{% tabs %}
{% highlight dart hl_lines="17" %}
@@ -644,7 +644,7 @@ class CalendarApp extends StatelessWidget {
## Time text formatting
-You can customize the format for the labels mentioning the time, by setting the [timeFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeFormat.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in calendar.
+You can customize the format for the labels mentioning the time, by setting the [timeFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeFormat.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="19" %}
@@ -682,7 +682,7 @@ class CalendarApp extends StatelessWidget {
## Time text appearance
-You can customize the text style for the labels mentioning the time, by setting the [timeTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeTextStyle.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in calendar.
+You can customize the text style for the labels mentioning the time, by setting the [timeTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/timeTextStyle.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="19 20 21 22 23 24" %}
@@ -723,7 +723,7 @@ class CalendarApp extends StatelessWidget {
## All day panel background color
-All day panel background color can be customized by using the [allDayPanelColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/allDayPanelColor.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in the calendar.
+All day panel background color can be customized by using the [allDayPanelColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings/allDayPanelColor.html) property of [TimeSlotViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeSlotViewSettings-class.html) in the Flutter Event Calendar.
{% tabs %}
{% highlight dart hl_lines="19" %}
diff --git a/Flutter/calendar/timezone.md b/Flutter/calendar/timezone.md
index acc54d86e..cf346cb6d 100644
--- a/Flutter/calendar/timezone.md
+++ b/Flutter/calendar/timezone.md
@@ -9,14 +9,14 @@ documentation: ug
# Flutter Event Calendar Time Zone (SfCalendar)
-[Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) allows you to create appointments in various time zones and display them in users’ time zone or any other time zone. You can use a time zone in the following four different ways:
+[Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) allows you to create appointments in various time zones and display them in users’ time zone or any other time zone. You can use a time zone in the following four different ways:
* Create appointments in different time zones.
* Display appointments based on the client’s time zone.
-* Display appointments based on calendar time zone.
+* Display appointments based on time zone of the Flutter Event Calendar.
* Display appointments at the same time everywhere regardless of client’s time zone.
-We have added the following Time Zones for the respective countries to cover all time zone regions. You can use any of the time zones from the following list for calendar time zone.
+We have added the following Time Zones for the respective countries to cover all time zone regions. You can use any of the time zones from the following list for Flutter Event Calendar time zone.
@@ -1183,17 +1183,17 @@ appointments.add(Appointment(
>**NOTE**
* If the recurring appointment is converted to another time zone, then the whole sequence will be recalculated according to the new time zone information.
* If you create an all-day appointment, its start time and end time will be set to 12 A.M. and 12 A.M. by default, so time zone is not applicable for all-day appointments.
-* Calendar supports daylight saving time.
+* Flutter Event Calendar supports daylight saving time.
* The time zone support is applicable for custom appointments too, so you need to map the corresponding property.
* You can use TimeZone for custom appointments by mapping the `startTimeZoneMapper` and `endTimeZoneMapper` custom properties of [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html).
## Display appointment based on client’s time zone
-You can display the appointments based on the client’s local time zone in calendar. For example, consider a scenario that you are in North Carolina and you want to set up a meeting at 10 A.M. on North Carolina time. You have colleagues in London and Chennai, and they also need to participate. The time for this meeting will be 3 P.M. (15:00) in London and 5.30 A.M. in Chennai. When you each view your calendar, you need to see the appointment displayed relative to your local time zones 5.30 A.M., 10 A.M., and 3 P.M., respectively. It can be achieved by setting calendar time zone to default (it will consider your device’s local time zone as calendar time zone) and appointment’s time zone to Eastern Standard Time (North Carolina) [as you are in North Carolina and its time zone is Eastern Standard Time].
+You can display the appointments based on the client’s local time zone in the Flutter Event Calendar. For example, consider a scenario that you are in North Carolina and you want to set up a meeting at 10 A.M. on North Carolina time. You have colleagues in London and Chennai, and they also need to participate. The time for this meeting will be 3 P.M. (15:00) in London and 5.30 A.M. in Chennai. When you each view your calendar, you need to see the appointment displayed relative to your local time zones 5.30 A.M., 10 A.M., and 3 P.M., respectively. It can be achieved by setting calendar time zone to default (it will consider your device’s local time zone as calendar time zone) and appointment’s time zone to Eastern Standard Time (North Carolina) [as you are in North Carolina and its time zone is Eastern Standard Time].
-## Display appointments based on calendar time zone
+## Display appointments based on Flutter Event Calendar time zone
-You can set specific time zone to calendar using the [timeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/timeZone.html) property of calendar. On this scenario, the appointments will be displayed in UTC time when the [startTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTimeZone.html) and [endTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTimeZone.html) properties of `Appointment` are set to null. The appointments will be displayed in UTC time based on the given calendar time zone.
+You can set specific time zone to Flutter Event Calendar using the [timeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/timeZone.html) property. On this scenario, the appointments will be displayed in UTC time when the [startTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTimeZone.html) and [endTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTimeZone.html) properties of `Appointment` are set to null. The appointments will be displayed in UTC time based on the given calendar time zone.
{% tabs %}
{% highlight dart hl_lines="8" %}
@@ -1217,4 +1217,4 @@ Widget build(BuildContext context) {
## Display appointments at same time everywhere regardless of client’s time zone
-You can display appointments at the same time everywhere without considering the time zone when you set the `timeZone` property of calendar, the [startTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTimeZone.html) and [endTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTimeZone.html) properties of `Appointment` to null. The appointments will be displayed based on the given `startTime` and `endTime` of appointment everywhere without considering the time zone.
+You can display appointments at the same time everywhere without considering the time zone when you set the `timeZone` property of the Flutter Event Calendar, the [startTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/startTimeZone.html) and [endTimeZone](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/endTimeZone.html) properties of `Appointment` to null. The appointments will be displayed based on the given `startTime` and `endTime` of appointment everywhere without considering the time zone.
diff --git a/Flutter/chat/chat-theme.md b/Flutter/chat/chat-theme.md
index 321009d96..bffa41710 100644
--- a/Flutter/chat/chat-theme.md
+++ b/Flutter/chat/chat-theme.md
@@ -491,4 +491,4 @@ class SuggestionThemeExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
\ No newline at end of file
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
\ No newline at end of file
diff --git a/Flutter/chat/composer.md b/Flutter/chat/composer.md
index 0e38c5f30..3f136b3f6 100644
--- a/Flutter/chat/composer.md
+++ b/Flutter/chat/composer.md
@@ -15,7 +15,7 @@ This section explains the customization options available in [`ChatComposer`](ht
The [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) is a customizable text editor designed for typing new messages. It offers options to adjust the appearance and behavior of the text editor, including settings for the `minimum` and `maximum` number of lines, `decoration`, `margin`, `textStyle`, and theme-level `editorTextStyle` (see [Chat theme - Editor text style](chat-theme.md#editor-text-style)).
-When the composer is null, no default text field is added to the chat widget.
+When the composer is null, no default text field is added to the Flutter Chat widget.
### Minimum and maximum lines
@@ -562,4 +562,4 @@ class _ComposerBuilderExampleState extends State {
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
\ No newline at end of file
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
\ No newline at end of file
diff --git a/Flutter/chat/conversation-area.md b/Flutter/chat/conversation-area.md
index ea40b29d2..ac9088e24 100644
--- a/Flutter/chat/conversation-area.md
+++ b/Flutter/chat/conversation-area.md
@@ -9,11 +9,11 @@ documentation: ug
# Message Content in Flutter Chat (SfChat)
-This section explains the customization options available for incoming and outgoing messages in the chat widget.
+This section explains the customization options available for incoming and outgoing messages in the Flutter Chat widget.
## Messages
-The [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messages.html) property is the data source of the Chat widget. It accepts a list of [`ChatMessage`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) objects that are displayed as incoming or outgoing based on the [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingUser.html) value.
+The [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messages.html) property is the data source of the Flutter Chat widget. It accepts a list of [`ChatMessage`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) objects that are displayed as incoming or outgoing based on the [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingUser.html) value.
Each [`ChatMessage`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) contains:
@@ -592,7 +592,7 @@ class MessageSettingsExample extends StatelessWidget {
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
#### See Also
diff --git a/Flutter/chat/getting-started.md b/Flutter/chat/getting-started.md
index 93bcb335e..3e3b93bb8 100644
--- a/Flutter/chat/getting-started.md
+++ b/Flutter/chat/getting-started.md
@@ -57,9 +57,9 @@ import 'package:syncfusion_flutter_chat/chat.dart';
{% endhighlight %}
{% endtabs %}
-## Initialize chat widget
+## Initialize Flutter Chat widget
-Add a chat widget with the necessary properties, such as [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messages.html) and [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingUser.html).
+Add a Flutter Chat widget with the necessary properties, such as [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messages.html) and [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingUser.html).
{% tabs %}
{% highlight dart hl_lines="16 42" %}
@@ -115,7 +115,7 @@ class ChatInitializeExample extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Add composer
@@ -235,7 +235,7 @@ class ChatPlaceholderExample extends StatelessWidget {
The action button represents the send button, which is not included by default. To add it, create an instance of [`ChatActionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton-class.html) for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/actionButton.html) property.
-When the send button is clicked, the [`ChatActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/onPressed.html) callback is invoked. In that callback, add the newly composed message to the messages list and rebuild the chat widget.
+When the send button is clicked, the [`ChatActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/onPressed.html) callback is invoked. In that callback, add the newly composed message to the messages list and rebuild the Flutter Chat widget.
{% tabs %}
{% highlight dart hl_lines="55" %}
@@ -321,6 +321,6 @@ class _ChatActionButtonExampleState extends State {
{% endhighlight %}
{% endtabs %}
-
+
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
\ No newline at end of file
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
\ No newline at end of file
diff --git a/Flutter/chat/overview.md b/Flutter/chat/overview.md
index 2c1ea3b01..0e652ee35 100644
--- a/Flutter/chat/overview.md
+++ b/Flutter/chat/overview.md
@@ -31,6 +31,6 @@ The Syncfusion® Flutter Chat widget displays conversations betwee
* **Custom Message Content** - The actual message content can be customized using the [`messageContentBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageContentBuilder.html), which lets you build a fully custom layout for each message. For customization details, refer to the [Conversation Area](conversation-area.md) documentation.
-* **Message Avatar** - Displays user avatars or profile pictures of the respective message. Using the [`messageAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageAvatarBuilder.html), a custom widget can be specified to display the chat message avatar with relevant details.
+* **Message Avatar** - Displays user avatars or profile pictures of the respective message. Using the [`messageAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageAvatarBuilder.html), a custom widget can be specified to display the message avatar of the Flutter Chat with relevant details.
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
\ No newline at end of file
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
\ No newline at end of file
diff --git a/Flutter/chat/placeholder.md b/Flutter/chat/placeholder.md
index 59bffe841..7a464cd31 100644
--- a/Flutter/chat/placeholder.md
+++ b/Flutter/chat/placeholder.md
@@ -80,7 +80,7 @@ class PlaceholderExample extends StatelessWidget {
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
#### See Also
diff --git a/Flutter/chat/right-to-left.md b/Flutter/chat/right-to-left.md
index 9d6f72c17..0d68df781 100644
--- a/Flutter/chat/right-to-left.md
+++ b/Flutter/chat/right-to-left.md
@@ -9,7 +9,7 @@ documentation: ug
# Right-to-Left (RTL) in Flutter Chat (SfChat)
-Chat supports right-to-left rendering for all elements in the chat widget.
+Chat supports right-to-left rendering for all elements in the Flutter Chat widget.
## RTL rendering ways
@@ -353,4 +353,4 @@ class RTLMessageContentExample extends StatelessWidget {
->You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects.
\ No newline at end of file
+>You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the Flutter Chat widget with built-in support for creating stunning visual effects.
\ No newline at end of file
diff --git a/Flutter/linear-gauge/animation.md b/Flutter/linear-gauge/animation.md
index 016d5bacb..f723cede7 100644
--- a/Flutter/linear-gauge/animation.md
+++ b/Flutter/linear-gauge/animation.md
@@ -44,7 +44,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Animate range
@@ -79,7 +79,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Pointer animation
@@ -182,4 +182,4 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
diff --git a/Flutter/linear-gauge/axis.md b/Flutter/linear-gauge/axis.md
index e3268387c..b486851c1 100644
--- a/Flutter/linear-gauge/axis.md
+++ b/Flutter/linear-gauge/axis.md
@@ -41,7 +41,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize minimum and maximum axis values
@@ -73,7 +73,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize axis track style
@@ -104,7 +104,7 @@ The following code sample demonstrates how to customize the [`thickness`](https:
{% endhighlight %}
-
+
## Apply solid color
@@ -138,7 +138,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Apply gradient
@@ -182,7 +182,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize borders
@@ -268,7 +268,7 @@ class LinearGaugeDemo extends StatelessWidget {
## Inverse the axis
-The direction of the linear gauge axis can be customized using the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property. When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is set to true, the axis will be displayed in an inverse direction. The default value is false.
+The direction of the Flutter Linear Gauge axis can be customized using the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property. When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is set to true, the axis will be displayed in an inverse direction. The default value is false.
{% tabs %}
{% highlight dart %}
diff --git a/Flutter/linear-gauge/bar-pointer.md b/Flutter/linear-gauge/bar-pointer.md
index b934113b2..34ee0b1aa 100644
--- a/Flutter/linear-gauge/bar-pointer.md
+++ b/Flutter/linear-gauge/bar-pointer.md
@@ -169,7 +169,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize the offset
@@ -210,7 +210,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Change the color of bar pointer
@@ -437,7 +437,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Add multiple bar pointers
diff --git a/Flutter/linear-gauge/getting-started.md b/Flutter/linear-gauge/getting-started.md
index 4ffa43245..a78641dbc 100644
--- a/Flutter/linear-gauge/getting-started.md
+++ b/Flutter/linear-gauge/getting-started.md
@@ -89,7 +89,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Add axis
@@ -121,7 +121,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Update orientation
@@ -155,7 +155,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Add range
@@ -194,7 +194,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Add marker pointer
@@ -271,7 +271,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Add bar pointer
@@ -362,4 +362,4 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Flutter/linear-gauge/interaction.md b/Flutter/linear-gauge/interaction.md
index dcc1a9719..b69014e7c 100644
--- a/Flutter/linear-gauge/interaction.md
+++ b/Flutter/linear-gauge/interaction.md
@@ -196,4 +196,4 @@ class _LinearGaugeDemoState extends State {
{% endhighlight %}
{% endtabs %}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Flutter/linear-gauge/labels.md b/Flutter/linear-gauge/labels.md
index dd842dcf4..d43e1e202 100644
--- a/Flutter/linear-gauge/labels.md
+++ b/Flutter/linear-gauge/labels.md
@@ -11,7 +11,7 @@ documentation: ug
The default style of axis labels is as follows.
-
+
## Customize label styles
@@ -57,7 +57,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Change visibility
@@ -158,7 +158,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Change label offset
@@ -193,7 +193,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize maximum number of visible labels
diff --git a/Flutter/linear-gauge/mirror-linear-gauge.md b/Flutter/linear-gauge/mirror-linear-gauge.md
index 825d2f5f8..c174e5778 100644
--- a/Flutter/linear-gauge/mirror-linear-gauge.md
+++ b/Flutter/linear-gauge/mirror-linear-gauge.md
@@ -39,10 +39,10 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Comparison for the mirrored and normal gauge
The following screenshot provides a visual comparison between a mirrored Linear Gauge and a normal Linear Gauge.
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Flutter/linear-gauge/overview.md b/Flutter/linear-gauge/overview.md
index b3b47b7a3..0b5fa83b6 100644
--- a/Flutter/linear-gauge/overview.md
+++ b/Flutter/linear-gauge/overview.md
@@ -11,7 +11,7 @@ documentation: ug
Syncfusion® Flutter Linear Gauge is a powerful data visualization widget designed to display data on a linear scale. It's an ideal component for crafting high-quality mobile application user interfaces that require visual representation of data along a linear axis.
-
+
## Key Features
diff --git a/Flutter/linear-gauge/range.md b/Flutter/linear-gauge/range.md
index 461b0600b..1a128cdbf 100644
--- a/Flutter/linear-gauge/range.md
+++ b/Flutter/linear-gauge/range.md
@@ -9,7 +9,7 @@ documentation: ug
# Ranges in Flutter Linear Gauge (SfLinearGauge)
-A range is a visual element that helps you quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a linear gauge. The default style of range will be as below.
+A range is a visual element that helps you quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a Flutter Linear Gauge. The default style of range will be as below.
{% tabs %}
{% highlight dart %}
@@ -44,7 +44,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize range shape
@@ -91,7 +91,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize edge style
@@ -177,7 +177,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Apply radial gradient to a range
@@ -318,7 +318,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize range position
@@ -356,7 +356,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Setting range color to axis element
@@ -462,4 +462,4 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Flutter/linear-gauge/shape-marker-pointer.md b/Flutter/linear-gauge/shape-marker-pointer.md
index 9b698bf18..e3e39f301 100644
--- a/Flutter/linear-gauge/shape-marker-pointer.md
+++ b/Flutter/linear-gauge/shape-marker-pointer.md
@@ -47,7 +47,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Change the size
@@ -82,7 +82,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize color
@@ -319,7 +319,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Drag behavior
diff --git a/Flutter/linear-gauge/ticks.md b/Flutter/linear-gauge/ticks.md
index 1b639c4af..fae95ae0e 100644
--- a/Flutter/linear-gauge/ticks.md
+++ b/Flutter/linear-gauge/ticks.md
@@ -11,7 +11,7 @@ documentation: ug
The default style of axis ticks is as follows.
-
+
## Customize tick style
@@ -47,7 +47,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize minor tick interval
@@ -77,7 +77,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Change tick visibility
@@ -109,7 +109,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Customize tick position
@@ -173,5 +173,5 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
diff --git a/Flutter/linear-gauge/widget-marker-pointer.md b/Flutter/linear-gauge/widget-marker-pointer.md
index 2f9abf2e5..84092bca3 100644
--- a/Flutter/linear-gauge/widget-marker-pointer.md
+++ b/Flutter/linear-gauge/widget-marker-pointer.md
@@ -42,7 +42,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Change marker alignment
@@ -166,7 +166,7 @@ class LinearGaugeDemo extends StatelessWidget {
{% endhighlight %}
{% endtabs %}
-
+
## Drag behavior
diff --git a/Flutter/maps/data-labels.md b/Flutter/maps/data-labels.md
index d80bb3cab..4e3e4ac9d 100644
--- a/Flutter/maps/data-labels.md
+++ b/Flutter/maps/data-labels.md
@@ -1,379 +1,379 @@
----
-layout: post
-title: Data Labels in Flutter Maps | Syncfusion®
-description: Learn about data labels in Syncfusion® Flutter Maps (SfMaps), including shape labeling, customization options, text styling, and placement.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Data Labels in Flutter Maps (SfMaps)
-
-Data labels provide identification for the shapes by displaying their names. You can trim or hide the labels if they exceed the shape bounds.
-
-## Show data labels
-
-You can show data labels on the map using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. By default, the data labels are rendered based on the value of [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property. The default value of the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property is `false`.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- showDataLabels: true,
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Text customization
-
-You can customize text of the data labels using the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- super.initState();
- data = const [
- Model('Asia', 'Asia'),
- Model('Europe', 'EU'),
- Model('North America', 'NA'),
- Model('South America', 'SA'),
- Model('Australia', 'Australia'),
- Model('Africa', 'Africa')
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].continent,
- dataLabelMapper: (int index) => data[index].code,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- showDataLabels: true,
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.continent, this.code);
-
- final String continent;
- final String code;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Overflow mode
-
-You can trim or remove the data label when it is overflowed from the shape using the [`MapDataLabelSettings.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/overflowMode.html) property. The possible values are [`visible`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#visible), [`ellipsis`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#ellipsis), and [`hide`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#hide). The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/overflowMode.html) property is [`MapLabelOverflow.visible`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#visible).
-
-By default, the data labels will render even if they overflow from the shape.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('New South Wales', 'New South Wales'),
- Model('Queensland', 'Queensland'),
- Model('Northern Territory', 'Northern Territory'),
- Model('Victoria', 'Victoria'),
- Model('South Australia', 'South Australia'),
- Model('Western Australia', 'Western Australia'),
- Model('Tasmania', 'Tasmania'),
- ];
-
- dataSource = MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].state,
- dataLabelMapper: (int index) => data[index].dataLabel,
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- showDataLabels: true,
- dataLabelSettings: MapDataLabelSettings(
- overflowMode: MapLabelOverflow.ellipsis,
- ),
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- Model(this.state, this.dataLabel);
-
- String state;
- String dataLabel;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Appearance customization
-
-You can customize the data labels using the [`MapDataLabelSettings.textStyle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/textStyle.html) property.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('New South Wales', 'New South Wales'),
- Model('Queensland', 'Queensland'),
- Model('Northern Territory', 'Northern Territory'),
- Model('Victoria', 'Victoria'),
- Model('South Australia', 'South Australia'),
- Model('Western Australia', 'Western Australia'),
- Model('Tasmania', 'Tasmania'),
- ];
-
- dataSource = MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].state,
- dataLabelMapper: (int index) => data[index].dataLabel,
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- showDataLabels: true,
- dataLabelSettings: MapDataLabelSettings(
- textStyle: const TextStyle(
- color: Colors.red,
- fontSize: 12,
- fontWeight: FontWeight.bold,
- fontStyle: FontStyle.italic,
- fontFamily: 'Times'),
- ),
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- Model(this.state, this.dataLabel);
-
- String state;
- String dataLabel;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-Using SfMapsTheme
-
-You can also customize the data labels using the [`SfMapsThemeData.dataLabelTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/dataLabelTextStyle.html) property in [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html).
-
-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).
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-import 'package:syncfusion_flutter_core/theme.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('New South Wales', 'New South Wales'),
- Model('Queensland', 'Queensland'),
- Model('Northern Territory', 'Northern Territory'),
- Model('Victoria', 'Victoria'),
- Model('South Australia', 'South Australia'),
- Model('Western Australia', 'Western Australia'),
- Model('Tasmania', 'Tasmania'),
- ];
-
- dataSource = MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].state,
- dataLabelMapper: (int index) => data[index].dataLabel,
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMapsTheme(
- data: SfMapsThemeData(
- dataLabelTextStyle: TextStyle(
- color: Colors.red,
- fontSize: 12,
- fontWeight: FontWeight.bold,
- fontStyle: FontStyle.italic,
- fontFamily: 'Times'),
- ),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- showDataLabels: true,
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- Model(this.state, this.dataLabel);
-
- String state;
- String dataLabel;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
+---
+layout: post
+title: Data Labels in Flutter Maps | Syncfusion®
+description: Learn about data labels in Syncfusion® Flutter Maps (SfMaps), including shape labeling, customization options, text styling, and placement.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Data Labels in Flutter Maps (SfMaps)
+
+Data labels provide identification for the shapes by displaying their names. You can trim or hide the labels if they exceed the shape bounds.
+
+## Show data labels
+
+You can show data labels on the Flutter Maps using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. By default, the data labels are rendered based on the value of [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property. The default value of the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property is `false`.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ showDataLabels: true,
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Text customization
+
+You can customize text of the data labels using the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ super.initState();
+ data = const [
+ Model('Asia', 'Asia'),
+ Model('Europe', 'EU'),
+ Model('North America', 'NA'),
+ Model('South America', 'SA'),
+ Model('Australia', 'Australia'),
+ Model('Africa', 'Africa')
+ ];
+
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].continent,
+ dataLabelMapper: (int index) => data[index].code,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ showDataLabels: true,
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.continent, this.code);
+
+ final String continent;
+ final String code;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Overflow mode
+
+You can trim or remove the data label when it is overflowed from the shape using the [`MapDataLabelSettings.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/overflowMode.html) property. The possible values are [`visible`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#visible), [`ellipsis`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#ellipsis), and [`hide`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#hide). The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/overflowMode.html) property is [`MapLabelOverflow.visible`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#visible).
+
+By default, the data labels will render even if they overflow from the shape.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('New South Wales', 'New South Wales'),
+ Model('Queensland', 'Queensland'),
+ Model('Northern Territory', 'Northern Territory'),
+ Model('Victoria', 'Victoria'),
+ Model('South Australia', 'South Australia'),
+ Model('Western Australia', 'Western Australia'),
+ Model('Tasmania', 'Tasmania'),
+ ];
+
+ dataSource = MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].state,
+ dataLabelMapper: (int index) => data[index].dataLabel,
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ showDataLabels: true,
+ dataLabelSettings: MapDataLabelSettings(
+ overflowMode: MapLabelOverflow.ellipsis,
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ Model(this.state, this.dataLabel);
+
+ String state;
+ String dataLabel;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Appearance customization
+
+You can customize the data labels using the [`MapDataLabelSettings.textStyle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/textStyle.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('New South Wales', 'New South Wales'),
+ Model('Queensland', 'Queensland'),
+ Model('Northern Territory', 'Northern Territory'),
+ Model('Victoria', 'Victoria'),
+ Model('South Australia', 'South Australia'),
+ Model('Western Australia', 'Western Australia'),
+ Model('Tasmania', 'Tasmania'),
+ ];
+
+ dataSource = MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].state,
+ dataLabelMapper: (int index) => data[index].dataLabel,
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ showDataLabels: true,
+ dataLabelSettings: MapDataLabelSettings(
+ textStyle: const TextStyle(
+ color: Colors.red,
+ fontSize: 12,
+ fontWeight: FontWeight.bold,
+ fontStyle: FontStyle.italic,
+ fontFamily: 'Times'),
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ Model(this.state, this.dataLabel);
+
+ String state;
+ String dataLabel;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+Using SfMapsTheme
+
+You can also customize the data labels using the [`SfMapsThemeData.dataLabelTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/dataLabelTextStyle.html) property in [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html).
+
+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).
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('New South Wales', 'New South Wales'),
+ Model('Queensland', 'Queensland'),
+ Model('Northern Territory', 'Northern Territory'),
+ Model('Victoria', 'Victoria'),
+ Model('South Australia', 'South Australia'),
+ Model('Western Australia', 'Western Australia'),
+ Model('Tasmania', 'Tasmania'),
+ ];
+
+ dataSource = MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].state,
+ dataLabelMapper: (int index) => data[index].dataLabel,
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMapsTheme(
+ data: SfMapsThemeData(
+ dataLabelTextStyle: TextStyle(
+ color: Colors.red,
+ fontSize: 12,
+ fontWeight: FontWeight.bold,
+ fontStyle: FontStyle.italic,
+ fontFamily: 'Times'),
+ ),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ showDataLabels: true,
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ Model(this.state, this.dataLabel);
+
+ String state;
+ String dataLabel;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
diff --git a/Flutter/maps/getting-started.md b/Flutter/maps/getting-started.md
index 39ef7c6fb..f9f839a3b 100644
--- a/Flutter/maps/getting-started.md
+++ b/Flutter/maps/getting-started.md
@@ -1,464 +1,464 @@
----
-layout: post
-title: Getting Started with Flutter Maps | Syncfusion®
-description: Learn how to get started with the Syncfusion® Flutter Maps (SfMaps). Explore map visualization, data binding, layers, and customization options.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Getting Started with Flutter Maps (SfMaps)
-
-This section explains the steps required to add the maps widget with shape layer and its elements such as data labels, tooltip, assignable colors based on region, and legends. It also explains about adding tile layer with OpenStreetMap. This section covers only basic features needed to know to get started with Syncfusion® maps.
-
-To get started quickly with our Flutter Maps widget, you can check on this video.
-
-
-
-
-## Add Flutter maps to an application
-
-Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation.
-
-**Add dependency**
-
-Add the Syncfusion® Flutter maps dependency to your pubspec.yaml file.
-
-{% tabs %}
-{% highlight dart %}
-
-dependencies:
-
-syncfusion_flutter_maps: ^xx.x.xx
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Maps`](https://pub.dev/packages/syncfusion_flutter_maps/versions) package. It is recommended to use the latest available version from pub.dev.
-
-**Get packages**
-
-Run the following command to get the required packages.
-
-{% tabs %}
-{% highlight dart %}
-
-$ flutter pub get
-
-{% endhighlight %}
-{% endtabs %}
-
-**Import package**
-
-Import the following package in your Dart code.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-{% endhighlight %}
-{% endtabs %}
-
-## Initialize maps
-
-After importing the package, initialize the maps widget as a child of any widget.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- ),
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Set GeoJSON data for shape layer from various sources
-
-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 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 depending on the source type.
-
-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 to the unique field name in the .json source to identify each shape. 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 the respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
-
-I> The Mercator projection is the default projection in the maps.
-
-### 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 code snippet below. 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 %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _dataSource;
-
- @override
- void initState() {
- _dataSource = MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.all(15),
- child: SfMaps(
- layers: [
- MapShapeLayer(source: _dataSource),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### From network
-
-Load .json data from the network.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late 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(
- body: Padding(
- padding: EdgeInsets.all(15),
- child: SfMaps(
- layers: [
- MapShapeLayer(source: _dataSource),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### From memory
-
-Load .json data as bytes from `Uint8List`.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-import 'dart:typed_data';
-
-class MapsExample extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: FutureBuilder(
- future: _fetchJsonData(),
- builder: (BuildContext context, snapshot) {
- if (snapshot.hasData) {
- Uint8List bytesData = snapshot.data as Uint8List;
- return SfMaps(
- layers: [
- MapShapeLayer(
- source: MapShapeSource.memory(
- bytesData,
- shapeDataField: 'STATE_NAME',
- ),
- ),
- ],
- );
- } else {
- return CircularProgressIndicator();
- }
- },
- ),
- );
- }
-
- Future _fetchJsonData() async {
- return (await rootBundle.load('assets/australia.json')).buffer.asUint8List();
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## 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 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 the respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
-
- @override
- void initState() {
- data = [
- Model('New South Wales',
- ' New\nSouth Wales'),
- Model('Queensland', 'Queensland'),
- Model('Northern Territory', 'Northern\nTerritory'),
- Model('Victoria', 'Victoria'),
- Model('South Australia', 'South Australia'),
- Model('Western Australia', 'Western Australia'),
- Model('Tasmania', 'Tasmania'),
- Model('Australian Capital Territory', 'ACT')
- ];
-
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].state,
- ),
- ),
- ],
- ),
- );
- }
-}
-
-class Model {
- Model(this.state, this.stateCode);
-
- String state;
- String stateCode;
-}
-
-{% endhighlight %}
-{% 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 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 shape colors.
-
-## Add shape layer maps elements
-
-Add the basic maps elements such as data labels, legend, and tooltip as shown in the code snippet below.
-
-* **Data labels** - You can show data labels using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. It is also possible to show data labels only for the particular shapes or show custom text using the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
-
-* **Legend** - You can enable legend using the [`MapShapeLayer.legend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/legend.html) property. The icons color of the legend is applied based on the colors returned in the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) property. It is possible to customize the legend icons color and texts using the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property.
-
-* **Tooltip** - You can enable tooltip for the shapes using the [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html) property. It will be called with the corresponding index every time when you interact with the shapes i.e., while tapping in touch devices and hover enter in mouse enabled devices.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0),
- ' New\nSouth Wales'),
- Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'),
- Model('Northern Territory', Colors.red.withOpacity(0.85),
- 'Northern\nTerritory'),
- Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'),
- Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75),
- 'South Australia'),
- Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7),
- 'Western Australia'),
- Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'),
- Model('Australian Capital Territory', Colors.teal, 'ACT')
- ];
-
- dataSource = MapShapeSource.asset(
- 'assets/australia.json',
- shapeDataField: 'STATE_NAME',
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].state,
- dataLabelMapper: (int index) => data[index].stateCode,
- shapeColorValueMapper: (int index) => data[index].color,
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- final ThemeData themeData = Theme.of(context);
- return Scaffold(
- body: Center(
- child: SizedBox(
- height: MediaQuery.of(context).size.height * 0.55,
- child: SfMaps(
- layers: [
- 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.labelSmall!
- .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.labelSmall!.fontSize)),
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- Model(this.state, this.color, this.stateCode);
-
- String state;
- Color color;
- String stateCode;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Add tile layer
-
-The [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) needs to be added in the [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) collection in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html). The URL of the providers must be set in the [`MapTileLayer.urlTemplate`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/urlTemplate.html) property.
-
-Refer to the [tile layer](https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template) section for more information.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return SfMaps(
- layers: [
- MapTileLayer(
- urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- ),
- ],
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N> You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps example](https://flutter.syncfusion.com/#/maps/shape-layer/range-color-mapping) that shows how to configure a Maps in Flutter.
+---
+layout: post
+title: Getting Started with Flutter Maps | Syncfusion®
+description: Learn how to get started with the Syncfusion® Flutter Maps (SfMaps). Explore map visualization, data binding, layers, and customization options.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Getting Started with Flutter Maps (SfMaps)
+
+This section explains the steps required to add the Flutter Maps widget with shape layer and its elements such as data labels, tooltip, assignable colors based on region, and legends. It also explains about adding tile layer with OpenStreetMap. This section covers only basic features needed to know to get started with Syncfusion® Flutter Maps.
+
+To get started quickly with our Flutter Maps widget, you can check on this video.
+
+
+
+
+## Add Flutter Maps to an application
+
+Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation.
+
+**Add dependency**
+
+Add the Syncfusion® Flutter Maps dependency to your pubspec.yaml file.
+
+{% tabs %}
+{% highlight dart %}
+
+dependencies:
+
+syncfusion_flutter_maps: ^xx.x.xx
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Maps`](https://pub.dev/packages/syncfusion_flutter_maps/versions) package. It is recommended to use the latest available version from pub.dev.
+
+**Get packages**
+
+Run the following command to get the required packages.
+
+{% tabs %}
+{% highlight dart %}
+
+$ flutter pub get
+
+{% endhighlight %}
+{% endtabs %}
+
+**Import package**
+
+Import the following package in your Dart code.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+{% endhighlight %}
+{% endtabs %}
+
+## Initialize Maps
+
+After importing the package, initialize the Flutter Maps widget as a child of any widget.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set GeoJSON data for shape layer from various sources
+
+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 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 depending on the source type.
+
+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 to the unique field name in the .json source to identify each shape. 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 the respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
+
+I> The Mercator projection is the default projection in Maps.
+
+### 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 code snippet below. 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 %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _dataSource;
+
+ @override
+ void initState() {
+ _dataSource = MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.all(15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(source: _dataSource),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### From network
+
+Load .json data from the network.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late 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(
+ body: Padding(
+ padding: EdgeInsets.all(15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(source: _dataSource),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### From memory
+
+Load .json data as bytes from `Uint8List`.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+import 'dart:typed_data';
+
+class MapsExample extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: FutureBuilder(
+ future: _fetchJsonData(),
+ builder: (BuildContext context, snapshot) {
+ if (snapshot.hasData) {
+ Uint8List bytesData = snapshot.data as Uint8List;
+ return SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: MapShapeSource.memory(
+ bytesData,
+ shapeDataField: 'STATE_NAME',
+ ),
+ ),
+ ],
+ );
+ } else {
+ return CircularProgressIndicator();
+ }
+ },
+ ),
+ );
+ }
+
+ Future _fetchJsonData() async {
+ return (await rootBundle.load('assets/australia.json')).buffer.asUint8List();
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## 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 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 the respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+
+ @override
+ void initState() {
+ data = [
+ Model('New South Wales',
+ ' New\nSouth Wales'),
+ Model('Queensland', 'Queensland'),
+ Model('Northern Territory', 'Northern\nTerritory'),
+ Model('Victoria', 'Victoria'),
+ Model('South Australia', 'South Australia'),
+ Model('Western Australia', 'Western Australia'),
+ Model('Tasmania', 'Tasmania'),
+ Model('Australian Capital Territory', 'ACT')
+ ];
+
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].state,
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class Model {
+ Model(this.state, this.stateCode);
+
+ String state;
+ String stateCode;
+}
+
+{% endhighlight %}
+{% 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 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 shape colors.
+
+## Add shape layer Maps elements
+
+Add the basic Maps elements such as data labels, legend, and tooltip as shown in the code snippet below.
+
+* **Data labels** - You can show data labels using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. It is also possible to show data labels only for the particular shapes or show custom text using the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
+
+* **Legend** - You can enable legend using the [`MapShapeLayer.legend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/legend.html) property. The icons color of the legend is applied based on the colors returned in the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) property. It is possible to customize the legend icons color and texts using the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property.
+
+* **Tooltip** - You can enable tooltip for the shapes using the [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html) property. It will be called with the corresponding index every time when you interact with the shapes i.e., while tapping in touch devices and hover enter in mouse enabled devices.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0),
+ ' New\nSouth Wales'),
+ Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'),
+ Model('Northern Territory', Colors.red.withOpacity(0.85),
+ 'Northern\nTerritory'),
+ Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'),
+ Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75),
+ 'South Australia'),
+ Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7),
+ 'Western Australia'),
+ Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'),
+ Model('Australian Capital Territory', Colors.teal, 'ACT')
+ ];
+
+ dataSource = MapShapeSource.asset(
+ 'assets/australia.json',
+ shapeDataField: 'STATE_NAME',
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].state,
+ dataLabelMapper: (int index) => data[index].stateCode,
+ shapeColorValueMapper: (int index) => data[index].color,
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final ThemeData themeData = Theme.of(context);
+ return Scaffold(
+ body: Center(
+ child: SizedBox(
+ height: MediaQuery.of(context).size.height * 0.55,
+ child: SfMaps(
+ layers: [
+ 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.labelSmall!
+ .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.labelSmall!.fontSize)),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ Model(this.state, this.color, this.stateCode);
+
+ String state;
+ Color color;
+ String stateCode;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Add tile layer
+
+The [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) needs to be added in the [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) collection in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html). The URL of the providers must be set in the [`MapTileLayer.urlTemplate`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/urlTemplate.html) property.
+
+Refer to the [tile layer](https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template) section for more information.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return SfMaps(
+ layers: [
+ MapTileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ ),
+ ],
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N> You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps example](https://flutter.syncfusion.com/#/maps/shape-layer/range-color-mapping) that shows how to configure a Maps in Flutter.
diff --git a/Flutter/maps/legend.md b/Flutter/maps/legend.md
index 328f17971..c1aa30395 100644
--- a/Flutter/maps/legend.md
+++ b/Flutter/maps/legend.md
@@ -9,7 +9,7 @@ documentation: ug
# Legend in Flutter Maps (SfMaps)
-You can provide clear information on the data plotted on the map using legend.
+You can provide clear information on the data plotted on the Flutter Maps using legend.
## Shape legend
@@ -633,7 +633,7 @@ N>
You can place the legend in custom position using the [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) property. The default value of the [`offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) property is `null`.
-If the property [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) has been set with the property [`MapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/position.html) as top, then the legend will be placed in top but with absolute position, i.e. legend will not take dedicated position for it and will be drawn at the top of the map.
+If the property [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) has been set with the property [`MapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/position.html) as top, then the legend will be placed in top but with absolute position, i.e. legend will not take dedicated position for it and will be drawn at the top of the Flutter Maps.
{% tabs %}
{% highlight Dart %}
diff --git a/Flutter/maps/markers.md b/Flutter/maps/markers.md
index 5f588c752..f28fa3245 100644
--- a/Flutter/maps/markers.md
+++ b/Flutter/maps/markers.md
@@ -1,1002 +1,1002 @@
----
-layout: post
-title: Markers in Flutter Maps | Syncfusion®
-description: Learn about marker support in Syncfusion® Flutter Maps (SfMaps), including built-in markers, custom widgets, positioning, and customization options.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Markers in Flutter Maps (SfMaps)
-
-Markers can be used to denote specific locations on a map. You can use built-in symbols or display custom widgets at specific latitude and longitude coordinates on the map.
-
-## Adding markers
-
-### Shape layer
-
-You can show markers at any position on the map by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property.
-
-The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property is `null`.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapShapeSource _dataSource;
-
-@override
-void initState() {
- _data = const [
- Model('Brazil', -14.235004, -51.92528),
- Model('Germany', 51.16569, 10.451526),
- Model('Australia', -25.274398, 133.775136),
- Model('India', 20.593684, 78.96288),
- Model('Russia', 61.52401, 105.318756)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- dataCount: _data.length,
- primaryValueMapper: (index) => _data[index].country,
- );
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- iconColor: Colors.blue,
- );
- },
- ),
- ],
- ),
- )),
- );
-}
-
-class Model {
- const Model(this.country, this.latitude, this.longitude);
-
- final String country;
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N>
-* Refer to the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) documentation for returning the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html).
-* Refer to the [`controller`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/controller.html) documentation for dynamically updating the markers.
-
-### Tile layer
-
-You can show markers at any position on the map by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`MapTileLayer.markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property.
-
-The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property is `null`.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-
-@override
-void initState() {
- _data = const [
- Model('Brazil', -14.235004, -51.92528),
- Model('Germany', 51.16569, 10.451526),
- Model('Australia', -25.274398, 133.775136),
- Model('India', 20.593684, 78.96288),
- Model('Russia', 61.52401, 105.318756)
- ];
-
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: SfMaps(
- layers: [
- MapTileLayer(
- urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- iconColor: Colors.blue,
- );
- },
- ),
- ],
- ),
- ),
- );
-}
-
-class Model {
- const Model(this.country, this.latitude, this.longitude);
-
- final String country;
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N>
-* Refer to the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) documentation for returning the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html).
-* Refer to the [`controller`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/controller.html) documentation for dynamically updating the markers.
-
-## Appearance customization
-
-You can customize the built-in markers appearance using the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconType.html), [`iconColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconColor.html), [`iconStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconStrokeColor.html), [`iconStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconStrokeWidth.html), and [`size`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/size.html) properties of the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html).
-
-* **Alignment** - You can change the position of the marker from the given coordinate using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/alignment.html) property. The default value is [`Alignment.center`](https://api.flutter.dev/flutter/painting/Alignment/center-constant.html). The available alignment options are [`topLeft`](https://api.flutter.dev/flutter/painting/Alignment/topLeft-constant.html), [`topRight`](https://api.flutter.dev/flutter/painting/Alignment/topRight-constant.html), [`topCenter`](https://api.flutter.dev/flutter/painting/Alignment/topCenter-constant.html), [`centerLeft`](https://api.flutter.dev/flutter/painting/Alignment/centerLeft-constant.html), [`center`](https://api.flutter.dev/flutter/painting/Alignment/center-constant.html), [`centerRight`](https://api.flutter.dev/flutter/painting/Alignment/centerRight-constant.html), [`bottomLeft`](https://api.flutter.dev/flutter/painting/Alignment/bottomLeft-constant.html), [`bottomCenter`](https://api.flutter.dev/flutter/painting/Alignment/bottomCenter-constant.html), [`bottomRight`](https://api.flutter.dev/flutter/painting/Alignment/bottomRight-constant.html).
-
-* **Offset** - You can adjust the marker position from the given coordinate using the `offset` property. The default value of the `offset` property is `Offset.zero`.
-
-N>
-* The default value of the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconType.html) is `MapIconType.circle`.
-* The default value of the [`iconStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconStrokeWidth.html) is `1.0`.
-* The default value of the [`iconColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconColor.html) is `Colors.blue`.
-* The default value of the [`size`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/size.html) is `Size(14.0, 14.0)`.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapShapeSource _dataSource;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- );
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- iconType: MapIconType.triangle,
- size: Size(18, 18),
- alignment: Alignment.center,
- offset: Offset(0, 9),
- iconColor: Colors.green[200],
- iconStrokeColor: Colors.green[900],
- iconStrokeWidth: 2,
- );
- },
- ),
- ],
- ),
- )),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Adding custom markers
-
-You can show custom markers using the [`child`](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) property of the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html) which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html).
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late List _iconsList;
-late MapShapeSource _dataSource;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
-
- _iconsList = [
- Icon(Icons.add_location),
- Icon(Icons.airplanemode_active),
- Icon(Icons.add_alarm),
- Icon(Icons.accessibility_new),
- Icon(Icons.account_balance)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- );
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- child: _iconsList[index],
- );
- },
- ),
- ],
- ),
- )),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Adding markers dynamically
-
-You can add markers dynamically using the [`insertMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/insertMarker.html) method. The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) will be called for the respective index once the [`insertMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/insertMarker.html) method is called. The [`controller`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/controller.html) property of [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) must be set with a new instance of [`MapShapeLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController-class.html).
-
-A marker will be inserted at the given index if the index value is less than or equal to the current available index. The marker will be added as the last item if the index value is greater than the current available index.
-
-N> You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
-
-### For shape layer
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapShapeLayerController _controller;
-late MapShapeSource _dataSource;
-late Random random;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- );
- _controller = MapShapeLayerController();
- random = Random();
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: Column(
- children: [
- SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- child: Icon(Icons.add_location),
- );
- },
- controller: _controller,
- ),
- ],
- ),
- ElevatedButton(
- child: Text('Add marker'),
- onPressed: () {
- _data.add(Model(-180 + random.nextInt(360).toDouble(),
- -55 + random.nextInt(139).toDouble()));
- _controller.insertMarker(5);
- },
- ),
- ],
- ),
- ),
- )),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### For Tile layer
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapTileLayerController _controller;
-late Random random;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
- _controller = MapTileLayerController();
- random = Random();
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: Column(
- children: [
- SfMaps(
- layers: [
- MapTileLayer(
- urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- child: Icon(Icons.add_location),
- );
- },
- controller: _controller,
- ),
- ],
- ),
- ElevatedButton(
- child: Text('Add marker'),
- onPressed: () {
- _data.add(Model(-180 + random.nextInt(360).toDouble(),
- -55 + random.nextInt(139).toDouble()));
- _controller.insertMarker(5);
- },
- ),
- ],
- ),
- ),
- )),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Updating the existing markers
-
-You can update multiple markers at the same time by passing indices to the [`updateMarkers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/updateMarkers.html) method in the [`MapShapeLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController-class.html). The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) will be called again for the respective indices once the [`updateMarkers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/updateMarkers.html) method is called.
-
-N>
-* You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
-* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapShapeLayerController _controller;
-late Widget _markerWidget;
-late MapShapeSource _dataSource;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- );
-
- _controller = MapShapeLayerController();
- _markerWidget = Icon(Icons.add_location);
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: Column(
- children: [
- SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index){
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- child: _markerWidget,
- );
- },
- controller: _controller,
- ),
- ],
- ),
- ElevatedButton(
- child: Text('Update marker'),
- onPressed: () {
- List updateList = [1, 2];
- _markerWidget = Icon(Icons.people);
- _controller.updateMarkers(updateList);
- },
- ),
- ],
- ),
- ),
- )
- ),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Deleting a marker
-
-You can remove a marker at any index using the [`removeMarkerAt`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/removeMarkerAt.html) method.
-
-N>
-* You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
-* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapShapeLayerController _controller;
-late MapShapeSource _dataSource;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- );
- _controller = MapShapeLayerController();
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: Column(
- children: [
- SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index){
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- child: Icon(Icons.add_location),
- );
- },
- controller: _controller,
- ),
- ],
- ),
- ElevatedButton(
- child: Text('Remove marker'),
- onPressed: () {
- _controller.removeMarkerAt(4);
- },
- ),
- ],
- ),
- ),
- )
- ),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Clearing the markers
-
-You can clear all markers using the [`clearMarkers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/clearMarkers.html) method.
-
-N>
-* You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
-* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List _data;
-late MapShapeLayerController _controller;
-late MapShapeSource _dataSource;
-
-@override
-void initState() {
- _data = [
- Model(-14.235004, -51.92528),
- Model(51.16569, 10.451526),
- Model(-25.274398, 133.775136),
- Model(20.593684, 78.96288),
- Model(61.52401, 105.318756)
- ];
-
- _dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'name',
- );
- _controller = MapShapeLayerController();
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: Column(
- children: [
- SfMaps(
- layers: [
- MapShapeLayer(
- source: _dataSource,
- initialMarkersCount: 5,
- markerBuilder: (BuildContext context, int index){
- return MapMarker(
- latitude: _data[index].latitude,
- longitude: _data[index].longitude,
- child: Icon(Icons.add_location),
- );
- },
- controller: _controller,
- ),
- ],
- ),
- ElevatedButton(
- child: Text('Clear marker'),
- onPressed: () {
- _controller.clearMarkers();
- },
- ),
- ],
- ),
- ),
- )
- ),
- );
-}
-
-class Model {
- Model(this.latitude, this.longitude);
-
- final double latitude;
- final double longitude;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Marker controller
-
-You can position a marker at the tapped position by converting the touch pixel point into coordinates using the [`pixelToLatLng`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayerController/pixelToLatLng.html) method of [`MapTileLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayerController-class.html) in the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) and the [`MapShapeLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController-class.html) in the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html).
-
-N> This is applicable for both tile layer and shape layer.
-
-### Shape layer
-
-{% tabs %}
-{% highlight Dart %}
-
-late MapLatLng _markerPosition;
-late _CustomZoomPanBehavior _mapZoomPanBehavior;
-late MapShapeLayerController _controller;
-late MapShapeSource _mapSource;
-
-@override
-void initState() {
- _controller = MapShapeLayerController();
- _mapZoomPanBehavior = _CustomZoomPanBehavior()
- ..zoomLevel = 1
- ..onTap = updateMarkerChange;
- _mapSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'continent',
- );
- super.initState();
-}
-
-void updateMarkerChange(Offset position) {
- _markerPosition = _controller.pixelToLatLng(position);
-
- /// Removed [MapShapeLayer.initialMarkersCount] property and updated
- /// markers only when the user taps.
- if (_controller.markersCount > 0) {
- _controller.clearMarkers();
- }
- _controller.insertMarker(0);
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 400,
- width: 400,
- child: MapShapeLayer(
- source: _mapSource,
- zoomPanBehavior: _mapZoomPanBehavior,
- controller: _controller,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _markerPosition.latitude,
- longitude: _markerPosition.longitude,
- child: Icon(
- Icons.location_on,
- color: Colors.red,
- size: 20,
- ),
- );
- },
- ),
- ),
- ),
- );
-}
-
-class _CustomZoomPanBehavior extends MapZoomPanBehavior {
- _CustomZoomPanBehavior();
- late MapTapCallback onTap;
-
- @override
- void handleEvent(PointerEvent event) {
- if (event is PointerUpEvent) {
- onTap(event.localPosition);
- }
- super.handleEvent(event);
- }
-}
-
-typedef MapTapCallback = void Function(Offset position);
-
-{% endhighlight %}
-{% endtabs %}
-
-### Tile layer
-
-{% tabs %}
-{% highlight Dart %}
-
-late MapLatLng _markerPosition;
-late _CustomZoomPanBehavior _mapZoomPanBehavior;
-late MapTileLayerController _controller;
-
-@override
-void initState() {
- _controller = MapTileLayerController();
- _mapZoomPanBehavior = _CustomZoomPanBehavior()
- ..onTap = updateMarkerChange;
- super.initState();
-}
-
-void updateMarkerChange(Offset position) {
- _markerPosition = _controller.pixelToLatLng(position);
-
- /// Removed [MapTileLayer.initialMarkersCount] property and updated
- /// markers only when the user taps.
- if (_controller.markersCount > 0) {
- _controller.clearMarkers();
- }
- _controller.insertMarker(0);
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 400,
- width: 400,
- child: MapTileLayer(
- urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- zoomPanBehavior: _mapZoomPanBehavior,
- controller: _controller,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _markerPosition.latitude,
- longitude: _markerPosition.longitude,
- child: Icon(
- Icons.location_on,
- color: Colors.red,
- size: 20,
- ));
- },
- ),
- ),
- ),
- );
-}
-
-class _CustomZoomPanBehavior extends MapZoomPanBehavior {
- _CustomZoomPanBehavior();
- late MapTapCallback onTap;
-
- @override
- void handleEvent(PointerEvent event) {
- if (event is PointerUpEvent) {
- onTap(event.localPosition);
- }
- super.handleEvent(event);
- }
-}
-
-typedef MapTapCallback = void Function(Offset position);
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Zoom markers to fit bounds
-
-You can visualize a specific area on the map by specifying the northeast and southwest coordinate points to the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property in the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) and [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). It renders the map by calculating the center coordinate and zoom level depending on the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) value.
-
-The [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property can be set at load time alone. You can use the [`latLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/latLngBounds.html) property of [`MapZoomPanBehavior`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior-class.html) to dynamically update the map bounds.
-
-{% tabs %}
-{% highlight Dart %}
-
-late List<_TouristPlaceDetails> _touristPlaces;
-late MapZoomPanBehavior _zoomPanBehavior;
-bool _canFitMarkers = false;
-
-@override
-void initState() {
- _zoomPanBehavior = MapZoomPanBehavior();
- _touristPlaces = <_TouristPlaceDetails>[
- const _TouristPlaceDetails(
- MapLatLng(-25.6953, -54.4367), 'Iguazu Falls, Argentina'),
- const _TouristPlaceDetails(MapLatLng(-50.9423, -73.4068),
- 'Torres del Paine National Park, Patagonia, Chile'),
- const _TouristPlaceDetails(
- MapLatLng(-15.9254, -69.3354), 'Lake Titicaca, Bolivia'),
- const _TouristPlaceDetails(
- MapLatLng(-13.1631, -72.5450), 'Machu Picchu, Peru'),
- const _TouristPlaceDetails(
- MapLatLng(-0.1862504, -78.5706247), 'The Amazon via Quito, Ecuador'),
- const _TouristPlaceDetails(
- MapLatLng(5.9701, -62.5362), 'Angel Falls, Venezuela'),
- const _TouristPlaceDetails(
- MapLatLng(-14.0875, -75.7626), 'Huacachina, Peru'),
- const _TouristPlaceDetails(
- MapLatLng(-22.7953, -67.8361), 'Laguna Verde, Bolivia'),
- const _TouristPlaceDetails(
- MapLatLng(-50.5025092, -73.1997346), 'Perito Moreno, Venezuela'),
- const _TouristPlaceDetails(
- MapLatLng(-22.9068, -43.1729), 'Rio de Janeiro, Brazil'),
- const _TouristPlaceDetails(
- MapLatLng(5.1765, -59.4808), 'Kaieteur Falls, Guyana'),
- const _TouristPlaceDetails(
- MapLatLng(-33.4489, -70.6693), 'Santiago, Chile'),
- const _TouristPlaceDetails(
- MapLatLng(4.7110, -74.0721), 'Bogota, Colombia'),
- const _TouristPlaceDetails(
- MapLatLng(-1.3928, -78.4269), 'Banos, Ecuador'),
- ];
- super.initState();
-}
-
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: Column(
- children: [
- SfMaps(
- layers: [
- MapTileLayer(
- urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- zoomPanBehavior: _zoomPanBehavior,
- initialMarkersCount: _touristPlaces.length,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _touristPlaces[index].latLng.latitude,
- longitude: _touristPlaces[index].latLng.longitude,
- child: const Icon(
- Icons.location_on,
- color: Colors.red,
- size: 20,
- ),
- );
- },
- ),
- ],
- ),
- SizedBox(height: 10),
- Container(
- width: 300,
- padding: EdgeInsets.zero,
- child: CheckboxListTile(
- activeColor: Colors.blue,
- value: _canFitMarkers,
- title: Text('Zoom marker to fit bounds'),
- onChanged: (bool? value) {
- _canFitMarkers = value!;
- setState(() {
- if (_canFitMarkers) {
- // South America bounds.
- _zoomPanBehavior.latLngBounds = const MapLatLngBounds(
- MapLatLng(12.434375, -34.80546874999999),
- MapLatLng(-55.891699218750006, -91.654150390625));
- } else {
- // World bounds.
- _zoomPanBehavior.latLngBounds = const MapLatLngBounds(
- MapLatLng(-90.0, -180.0), MapLatLng(90.0, 180.0));
- }
- });
- },
- ),
- ),
- ],
- ),
- );
-}
-
-class _TouristPlaceDetails {
- const _TouristPlaceDetails(this.latLng, this.place);
- final MapLatLng latLng;
- final String place;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
+---
+layout: post
+title: Markers in Flutter Maps | Syncfusion®
+description: Learn about marker support in Syncfusion® Flutter Maps (SfMaps), including built-in markers, custom widgets, positioning, and customization options.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Markers in Flutter Maps (SfMaps)
+
+Markers can be used to denote specific locations on a Flutter Maps. You can use built-in symbols or display custom widgets at specific latitude and longitude coordinates on the Flutter Maps.
+
+## Adding markers
+
+### Shape layer
+
+You can show markers at any position on the Flutter Maps by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property.
+
+The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property is `null`.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapShapeSource _dataSource;
+
+@override
+void initState() {
+ _data = const [
+ Model('Brazil', -14.235004, -51.92528),
+ Model('Germany', 51.16569, 10.451526),
+ Model('Australia', -25.274398, 133.775136),
+ Model('India', 20.593684, 78.96288),
+ Model('Russia', 61.52401, 105.318756)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ dataCount: _data.length,
+ primaryValueMapper: (index) => _data[index].country,
+ );
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ iconColor: Colors.blue,
+ );
+ },
+ ),
+ ],
+ ),
+ )),
+ );
+}
+
+class Model {
+ const Model(this.country, this.latitude, this.longitude);
+
+ final String country;
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N>
+* Refer to the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) documentation for returning the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html).
+* Refer to the [`controller`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/controller.html) documentation for dynamically updating the markers.
+
+### Tile layer
+
+You can show markers at any position on the Flutter Maps by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`MapTileLayer.markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property.
+
+The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property is `null`.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+
+@override
+void initState() {
+ _data = const [
+ Model('Brazil', -14.235004, -51.92528),
+ Model('Germany', 51.16569, 10.451526),
+ Model('Australia', -25.274398, 133.775136),
+ Model('India', 20.593684, 78.96288),
+ Model('Russia', 61.52401, 105.318756)
+ ];
+
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: SfMaps(
+ layers: [
+ MapTileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ iconColor: Colors.blue,
+ );
+ },
+ ),
+ ],
+ ),
+ ),
+ );
+}
+
+class Model {
+ const Model(this.country, this.latitude, this.longitude);
+
+ final String country;
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N>
+* Refer to the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) documentation for returning the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html).
+* Refer to the [`controller`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/controller.html) documentation for dynamically updating the markers.
+
+## Appearance customization
+
+You can customize the built-in markers appearance using the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconType.html), [`iconColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconColor.html), [`iconStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconStrokeColor.html), [`iconStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconStrokeWidth.html), and [`size`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/size.html) properties of the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html).
+
+* **Alignment** - You can change the position of the marker from the given coordinate using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/alignment.html) property. The default value is [`Alignment.center`](https://api.flutter.dev/flutter/painting/Alignment/center-constant.html). The available alignment options are [`topLeft`](https://api.flutter.dev/flutter/painting/Alignment/topLeft-constant.html), [`topRight`](https://api.flutter.dev/flutter/painting/Alignment/topRight-constant.html), [`topCenter`](https://api.flutter.dev/flutter/painting/Alignment/topCenter-constant.html), [`centerLeft`](https://api.flutter.dev/flutter/painting/Alignment/centerLeft-constant.html), [`center`](https://api.flutter.dev/flutter/painting/Alignment/center-constant.html), [`centerRight`](https://api.flutter.dev/flutter/painting/Alignment/centerRight-constant.html), [`bottomLeft`](https://api.flutter.dev/flutter/painting/Alignment/bottomLeft-constant.html), [`bottomCenter`](https://api.flutter.dev/flutter/painting/Alignment/bottomCenter-constant.html), [`bottomRight`](https://api.flutter.dev/flutter/painting/Alignment/bottomRight-constant.html).
+
+* **Offset** - You can adjust the marker position from the given coordinate using the `offset` property. The default value of the `offset` property is `Offset.zero`.
+
+N>
+* The default value of the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconType.html) is `MapIconType.circle`.
+* The default value of the [`iconStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconStrokeWidth.html) is `1.0`.
+* The default value of the [`iconColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/iconColor.html) is `Colors.blue`.
+* The default value of the [`size`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker/size.html) is `Size(14.0, 14.0)`.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapShapeSource _dataSource;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ );
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ iconType: MapIconType.triangle,
+ size: Size(18, 18),
+ alignment: Alignment.center,
+ offset: Offset(0, 9),
+ iconColor: Colors.green[200],
+ iconStrokeColor: Colors.green[900],
+ iconStrokeWidth: 2,
+ );
+ },
+ ),
+ ],
+ ),
+ )),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Adding custom markers
+
+You can show custom markers using the [`child`](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) property of the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html) which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html).
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late List _iconsList;
+late MapShapeSource _dataSource;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+
+ _iconsList = [
+ Icon(Icons.add_location),
+ Icon(Icons.airplanemode_active),
+ Icon(Icons.add_alarm),
+ Icon(Icons.accessibility_new),
+ Icon(Icons.account_balance)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ );
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ child: _iconsList[index],
+ );
+ },
+ ),
+ ],
+ ),
+ )),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Adding markers dynamically
+
+You can add markers dynamically using the [`insertMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/insertMarker.html) method. The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) will be called for the respective index once the [`insertMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/insertMarker.html) method is called. The [`controller`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/controller.html) property of [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) must be set with a new instance of [`MapShapeLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController-class.html).
+
+A marker will be inserted at the given index if the index value is less than or equal to the current available index. The marker will be added as the last item if the index value is greater than the current available index.
+
+N> You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
+
+### For shape layer
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapShapeLayerController _controller;
+late MapShapeSource _dataSource;
+late Random random;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ );
+ _controller = MapShapeLayerController();
+ random = Random();
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: Column(
+ children: [
+ SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ child: Icon(Icons.add_location),
+ );
+ },
+ controller: _controller,
+ ),
+ ],
+ ),
+ ElevatedButton(
+ child: Text('Add marker'),
+ onPressed: () {
+ _data.add(Model(-180 + random.nextInt(360).toDouble(),
+ -55 + random.nextInt(139).toDouble()));
+ _controller.insertMarker(5);
+ },
+ ),
+ ],
+ ),
+ ),
+ )),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### For Tile layer
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapTileLayerController _controller;
+late Random random;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+ _controller = MapTileLayerController();
+ random = Random();
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: Column(
+ children: [
+ SfMaps(
+ layers: [
+ MapTileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ child: Icon(Icons.add_location),
+ );
+ },
+ controller: _controller,
+ ),
+ ],
+ ),
+ ElevatedButton(
+ child: Text('Add marker'),
+ onPressed: () {
+ _data.add(Model(-180 + random.nextInt(360).toDouble(),
+ -55 + random.nextInt(139).toDouble()));
+ _controller.insertMarker(5);
+ },
+ ),
+ ],
+ ),
+ ),
+ )),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Updating the existing markers
+
+You can update multiple markers at the same time by passing indices to the [`updateMarkers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/updateMarkers.html) method in the [`MapShapeLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController-class.html). The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) will be called again for the respective indices once the [`updateMarkers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/updateMarkers.html) method is called.
+
+N>
+* You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
+* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapShapeLayerController _controller;
+late Widget _markerWidget;
+late MapShapeSource _dataSource;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ );
+
+ _controller = MapShapeLayerController();
+ _markerWidget = Icon(Icons.add_location);
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: Column(
+ children: [
+ SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index){
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ child: _markerWidget,
+ );
+ },
+ controller: _controller,
+ ),
+ ],
+ ),
+ ElevatedButton(
+ child: Text('Update marker'),
+ onPressed: () {
+ List updateList = [1, 2];
+ _markerWidget = Icon(Icons.people);
+ _controller.updateMarkers(updateList);
+ },
+ ),
+ ],
+ ),
+ ),
+ )
+ ),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Deleting a marker
+
+You can remove a marker at any index using the [`removeMarkerAt`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/removeMarkerAt.html) method.
+
+N>
+* You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
+* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapShapeLayerController _controller;
+late MapShapeSource _dataSource;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ );
+ _controller = MapShapeLayerController();
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: Column(
+ children: [
+ SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index){
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ child: Icon(Icons.add_location),
+ );
+ },
+ controller: _controller,
+ ),
+ ],
+ ),
+ ElevatedButton(
+ child: Text('Remove marker'),
+ onPressed: () {
+ _controller.removeMarkerAt(4);
+ },
+ ),
+ ],
+ ),
+ ),
+ )
+ ),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Clearing the markers
+
+You can clear all markers using the [`clearMarkers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayerController/clearMarkers.html) method.
+
+N>
+* You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html).
+* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List _data;
+late MapShapeLayerController _controller;
+late MapShapeSource _dataSource;
+
+@override
+void initState() {
+ _data = [
+ Model(-14.235004, -51.92528),
+ Model(51.16569, 10.451526),
+ Model(-25.274398, 133.775136),
+ Model(20.593684, 78.96288),
+ Model(61.52401, 105.318756)
+ ];
+
+ _dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'name',
+ );
+ _controller = MapShapeLayerController();
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: Column(
+ children: [
+ SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _dataSource,
+ initialMarkersCount: 5,
+ markerBuilder: (BuildContext context, int index){
+ return MapMarker(
+ latitude: _data[index].latitude,
+ longitude: _data[index].longitude,
+ child: Icon(Icons.add_location),
+ );
+ },
+ controller: _controller,
+ ),
+ ],
+ ),
+ ElevatedButton(
+ child: Text('Clear marker'),
+ onPressed: () {
+ _controller.clearMarkers();
+ },
+ ),
+ ],
+ ),
+ ),
+ )
+ ),
+ );
+}
+
+class Model {
+ Model(this.latitude, this.longitude);
+
+ final double latitude;
+ final double longitude;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Marker controller
+
+You can position a marker at the tapped position by converting the touch pixel point into coordinates using the [`pixelToLatLng`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayerController/pixelToLatLng.html) method of [`MapTileLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayerController-class.html) in the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) and the [`MapShapeLayerController`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController-class.html) in the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html).
+
+N> This is applicable for both tile layer and shape layer.
+
+### Shape layer
+
+{% tabs %}
+{% highlight Dart %}
+
+late MapLatLng _markerPosition;
+late _CustomZoomPanBehavior _mapZoomPanBehavior;
+late MapShapeLayerController _controller;
+late MapShapeSource _mapSource;
+
+@override
+void initState() {
+ _controller = MapShapeLayerController();
+ _mapZoomPanBehavior = _CustomZoomPanBehavior()
+ ..zoomLevel = 1
+ ..onTap = updateMarkerChange;
+ _mapSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'continent',
+ );
+ super.initState();
+}
+
+void updateMarkerChange(Offset position) {
+ _markerPosition = _controller.pixelToLatLng(position);
+
+ /// Removed [MapShapeLayer.initialMarkersCount] property and updated
+ /// markers only when the user taps.
+ if (_controller.markersCount > 0) {
+ _controller.clearMarkers();
+ }
+ _controller.insertMarker(0);
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 400,
+ width: 400,
+ child: MapShapeLayer(
+ source: _mapSource,
+ zoomPanBehavior: _mapZoomPanBehavior,
+ controller: _controller,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _markerPosition.latitude,
+ longitude: _markerPosition.longitude,
+ child: Icon(
+ Icons.location_on,
+ color: Colors.red,
+ size: 20,
+ ),
+ );
+ },
+ ),
+ ),
+ ),
+ );
+}
+
+class _CustomZoomPanBehavior extends MapZoomPanBehavior {
+ _CustomZoomPanBehavior();
+ late MapTapCallback onTap;
+
+ @override
+ void handleEvent(PointerEvent event) {
+ if (event is PointerUpEvent) {
+ onTap(event.localPosition);
+ }
+ super.handleEvent(event);
+ }
+}
+
+typedef MapTapCallback = void Function(Offset position);
+
+{% endhighlight %}
+{% endtabs %}
+
+### Tile layer
+
+{% tabs %}
+{% highlight Dart %}
+
+late MapLatLng _markerPosition;
+late _CustomZoomPanBehavior _mapZoomPanBehavior;
+late MapTileLayerController _controller;
+
+@override
+void initState() {
+ _controller = MapTileLayerController();
+ _mapZoomPanBehavior = _CustomZoomPanBehavior()
+ ..onTap = updateMarkerChange;
+ super.initState();
+}
+
+void updateMarkerChange(Offset position) {
+ _markerPosition = _controller.pixelToLatLng(position);
+
+ /// Removed [MapTileLayer.initialMarkersCount] property and updated
+ /// markers only when the user taps.
+ if (_controller.markersCount > 0) {
+ _controller.clearMarkers();
+ }
+ _controller.insertMarker(0);
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 400,
+ width: 400,
+ child: MapTileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ zoomPanBehavior: _mapZoomPanBehavior,
+ controller: _controller,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _markerPosition.latitude,
+ longitude: _markerPosition.longitude,
+ child: Icon(
+ Icons.location_on,
+ color: Colors.red,
+ size: 20,
+ ));
+ },
+ ),
+ ),
+ ),
+ );
+}
+
+class _CustomZoomPanBehavior extends MapZoomPanBehavior {
+ _CustomZoomPanBehavior();
+ late MapTapCallback onTap;
+
+ @override
+ void handleEvent(PointerEvent event) {
+ if (event is PointerUpEvent) {
+ onTap(event.localPosition);
+ }
+ super.handleEvent(event);
+ }
+}
+
+typedef MapTapCallback = void Function(Offset position);
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Zoom markers to fit bounds
+
+You can visualize a specific area on the Flutter Maps by specifying the northeast and southwest coordinate points to the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property in the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) and [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). It renders the Flutter Maps by calculating the center coordinate and zoom level depending on the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) value.
+
+The [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property can be set at load time alone. You can use the [`latLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/latLngBounds.html) property of [`MapZoomPanBehavior`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior-class.html) to dynamically update the bounds of the Flutter Maps.
+
+{% tabs %}
+{% highlight Dart %}
+
+late List<_TouristPlaceDetails> _touristPlaces;
+late MapZoomPanBehavior _zoomPanBehavior;
+bool _canFitMarkers = false;
+
+@override
+void initState() {
+ _zoomPanBehavior = MapZoomPanBehavior();
+ _touristPlaces = <_TouristPlaceDetails>[
+ const _TouristPlaceDetails(
+ MapLatLng(-25.6953, -54.4367), 'Iguazu Falls, Argentina'),
+ const _TouristPlaceDetails(MapLatLng(-50.9423, -73.4068),
+ 'Torres del Paine National Park, Patagonia, Chile'),
+ const _TouristPlaceDetails(
+ MapLatLng(-15.9254, -69.3354), 'Lake Titicaca, Bolivia'),
+ const _TouristPlaceDetails(
+ MapLatLng(-13.1631, -72.5450), 'Machu Picchu, Peru'),
+ const _TouristPlaceDetails(
+ MapLatLng(-0.1862504, -78.5706247), 'The Amazon via Quito, Ecuador'),
+ const _TouristPlaceDetails(
+ MapLatLng(5.9701, -62.5362), 'Angel Falls, Venezuela'),
+ const _TouristPlaceDetails(
+ MapLatLng(-14.0875, -75.7626), 'Huacachina, Peru'),
+ const _TouristPlaceDetails(
+ MapLatLng(-22.7953, -67.8361), 'Laguna Verde, Bolivia'),
+ const _TouristPlaceDetails(
+ MapLatLng(-50.5025092, -73.1997346), 'Perito Moreno, Venezuela'),
+ const _TouristPlaceDetails(
+ MapLatLng(-22.9068, -43.1729), 'Rio de Janeiro, Brazil'),
+ const _TouristPlaceDetails(
+ MapLatLng(5.1765, -59.4808), 'Kaieteur Falls, Guyana'),
+ const _TouristPlaceDetails(
+ MapLatLng(-33.4489, -70.6693), 'Santiago, Chile'),
+ const _TouristPlaceDetails(
+ MapLatLng(4.7110, -74.0721), 'Bogota, Colombia'),
+ const _TouristPlaceDetails(
+ MapLatLng(-1.3928, -78.4269), 'Banos, Ecuador'),
+ ];
+ super.initState();
+}
+
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: Column(
+ children: [
+ SfMaps(
+ layers: [
+ MapTileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ zoomPanBehavior: _zoomPanBehavior,
+ initialMarkersCount: _touristPlaces.length,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _touristPlaces[index].latLng.latitude,
+ longitude: _touristPlaces[index].latLng.longitude,
+ child: const Icon(
+ Icons.location_on,
+ color: Colors.red,
+ size: 20,
+ ),
+ );
+ },
+ ),
+ ],
+ ),
+ SizedBox(height: 10),
+ Container(
+ width: 300,
+ padding: EdgeInsets.zero,
+ child: CheckboxListTile(
+ activeColor: Colors.blue,
+ value: _canFitMarkers,
+ title: Text('Zoom marker to fit bounds'),
+ onChanged: (bool? value) {
+ _canFitMarkers = value!;
+ setState(() {
+ if (_canFitMarkers) {
+ // South America bounds.
+ _zoomPanBehavior.latLngBounds = const MapLatLngBounds(
+ MapLatLng(12.434375, -34.80546874999999),
+ MapLatLng(-55.891699218750006, -91.654150390625));
+ } else {
+ // World bounds.
+ _zoomPanBehavior.latLngBounds = const MapLatLngBounds(
+ MapLatLng(-90.0, -180.0), MapLatLng(90.0, 180.0));
+ }
+ });
+ },
+ ),
+ ),
+ ],
+ ),
+ );
+}
+
+class _TouristPlaceDetails {
+ const _TouristPlaceDetails(this.latLng, this.place);
+ final MapLatLng latLng;
+ final String place;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
N> You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps Markers example](https://flutter.syncfusion.com/#/maps/shape-layer/marker) that shows how to configure a Maps in Flutter.
\ No newline at end of file
diff --git a/Flutter/maps/overview.md b/Flutter/maps/overview.md
index 8b0f2fc90..659c34740 100644
--- a/Flutter/maps/overview.md
+++ b/Flutter/maps/overview.md
@@ -1,50 +1,50 @@
----
-layout: post
-title: About Flutter Maps Control | Syncfusion®
-description: Learn about the Syncfusion® Flutter Maps (SfMaps), its features, map layers, data visualization capabilities, and customization options.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# About Flutter Maps Control (SfMaps)
-
-[Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) is a powerful data visualization component that displays statistical information for geographical areas. Its rich feature set includes tile rendering from OpenStreetMap, Bing Maps, and other tile providers with marker support, as well as shape layer capabilities such as selection, legends, labels, markers, tooltips, bubbles, color mapping, and much more.
-
-To get started with the Flutter Maps widget, refer to the [Getting Started with Flutter Maps](https://help.syncfusion.com/flutter/maps/getting-started) documentation.
-
-## Shape layer
-
-Render GeoJSON data as geographical shapes or any custom shapes on a shape layer for powerful data visualization. Customize the appearance using built-in options to achieve your desired look. For example, you can render a map of the world or any particular country.
-
-
-
-### Features
-
-* **Data Labels** - Provide identification for shapes by displaying their names. Labels can be trimmed or hidden if they exceed shape boundaries.
-
-* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the map.
-
-* **Bubbles** - Add information to shapes such as population density, number of users, and more. Bubbles can be rendered in different colors and sizes based on the data values of their assigned shapes.
-
-* **Shape Selection** - Select shapes to highlight specific areas on the map. You can use callbacks to perform custom actions during shape selection.
-
-* **Legend** - Provide clear information about the data plotted on the map. The legend toggling feature allows you to visualize only the shapes to which a specific legend applies.
-
-* **Colors** - Categorize shapes by customizing their colors based on underlying values. You can set shape colors for specific values or for ranges of values.
-
-* **Tooltip** - Display additional information about shapes and bubbles using customizable tooltips.
-
-* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on web platforms. Pan the map to navigate across regions. You can also customize the initial zoom level and center point.
-
-## Tile layer
-
-The interactive tile layer allows you to load map tiles from web map tile services such as Bing Maps, OpenStreetMap, Google Maps, TomTom, and others. Use markers to denote specific latitude and longitude coordinates in the tile layer as required. Zoom and pan the tile layer to navigate across regions and take a closer look.
-
-
-
-### Features
-
-* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the map.
-
-* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on web platforms. Pan the map to navigate across regions. You can also customize the initial zoom level and center point.
+---
+layout: post
+title: About Flutter Maps Control | Syncfusion®
+description: Learn about the Syncfusion® Flutter Maps (SfMaps), its features, map layers, data visualization capabilities, and customization options.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# About Flutter Maps Control (SfMaps)
+
+[Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) is a powerful data visualization component that displays statistical information for geographical areas. Its rich feature set includes tile rendering from OpenStreetMap, Bing Maps, and other tile providers with marker support, as well as shape layer capabilities such as selection, legends, labels, markers, tooltips, bubbles, color mapping, and much more.
+
+To get started with the Flutter Maps widget, refer to the [Getting Started with Flutter Maps](https://help.syncfusion.com/flutter/maps/getting-started) documentation.
+
+## Shape layer
+
+Render GeoJSON data as geographical shapes or any custom shapes on a shape layer for powerful data visualization. Customize the appearance using built-in options to achieve your desired look. For example, you can render a map of the world or any particular country.
+
+
+
+### Features
+
+* **Data Labels** - Provide identification for shapes by displaying their names. Labels can be trimmed or hidden if they exceed shape boundaries.
+
+* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the Flutter Maps.
+
+* **Bubbles** - Add information to shapes such as population density, number of users, and more. Bubbles can be rendered in different colors and sizes based on the data values of their assigned shapes.
+
+* **Shape Selection** - Select shapes to highlight specific areas on the Flutter Maps. You can use callbacks to perform custom actions during shape selection.
+
+* **Legend** - Provide clear information about the data plotted on the Flutter Maps. The legend toggling feature allows you to visualize only the shapes to which a specific legend applies.
+
+* **Colors** - Categorize shapes by customizing their colors based on underlying values. You can set shape colors for specific values or for ranges of values.
+
+* **Tooltip** - Display additional information about shapes and bubbles using customizable tooltips.
+
+* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on web platforms. Pan the Flutter Maps to navigate across regions. You can also customize the initial zoom level and center point.
+
+## Tile layer
+
+The interactive tile layer allows you to load map tiles from web map tile services such as Bing Maps, OpenStreetMap, Google Maps, TomTom, and others. Use markers to denote specific latitude and longitude coordinates in the tile layer as required. Zoom and pan the tile layer to navigate across regions and take a closer look.
+
+
+
+### Features
+
+* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the Flutter Maps.
+
+* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on web platforms. Pan the Flutter Maps to navigate across regions. You can also customize the initial zoom level and center point.
diff --git a/Flutter/maps/right-to-left.md b/Flutter/maps/right-to-left.md
index 993715177..a515db80e 100644
--- a/Flutter/maps/right-to-left.md
+++ b/Flutter/maps/right-to-left.md
@@ -1,296 +1,296 @@
----
-layout: post
-title: Right-to-Left (RTL) in Flutter Maps | Syncfusion®
-description: Learn about right-to-left (RTL) support in Syncfusion® Flutter Maps (SfMaps), including map rendering, localization, and layout customization.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Right-to-Left (RTL) in Flutter Maps (SfMaps)
-
-## Enable RTL rendering
-
-Right to left rendering can be achieved in the following ways:
-
-### Wrapping the SfMaps with Directionality widget
-
-The maps can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl`.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: Scaffold(
- body: Directionality(
- textDirection: TextDirection.rtl,
- child: Center(
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: const MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent"),
- ),
- ],
- ),
- )
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Changing the locale to RTL languages
-
-The maps elements will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, or Urdu. This can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
-
-{% tabs %}
-{% highlight Dart %}
-
-dependencies:
- flutter_localizations:
- sdk: flutter
-
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- localizationsDelegates: [
- GlobalMaterialLocalizations.delegate,
- GlobalWidgetsLocalizations.delegate,
- ],
- supportedLocales: [
- Locale("fa", "IR"),
- ],
- locale: Locale("fa", "IR"),
- home: Scaffold(
- backgroundColor: Colors.white,
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: const MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent"),
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## RTL supported maps elements
-
-### Legend
-
-Legend items will be rendered from right to left direction. This is applicable for both shape and bubble legends with solid and bar types.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List _data;
- late MapShapeSource _mapSource;
-
- @override
- void initState() {
- super.initState();
- _data = [
- PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)),
- PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)),
- PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)),
- PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)),
- PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)),
- PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)),
- ];
-
- _mapSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- dataCount: _data.length,
- primaryValueMapper: (int index) => _data[index].continent,
- shapeColorValueMapper: (int index) => _data[index].color,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- padding: const EdgeInsets.only(left: 10, right: 15, top: 30),
- height: 350,
- child: Directionality(
- textDirection: TextDirection.rtl,
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _mapSource,
- legend: MapLegend(MapElement.shape),
- )
- ],
- ),
- ),
- ),
- ),
- );
- }
-}
-
-class PopulationModel {
- const PopulationModel(
- this.continent, this.populationDensityPerSqKm, this.color);
-
- final String continent;
- final double populationDensityPerSqKm;
- final Color color;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### Tooltip
-
-Tooltip text will be rendered from right to left direction. This is applicable for shape tooltip, bubble tooltip, and marker tooltip.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List _data;
- late MapShapeSource _mapSource;
-
- @override
- void initState() {
- super.initState();
- _data = [
- PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)),
- PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)),
- PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)),
- PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)),
- PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)),
- PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)),
- ];
-
- _mapSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- dataCount: _data.length,
- primaryValueMapper: (int index) => _data[index].continent,
- shapeColorValueMapper: (int index) => _data[index].color,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- padding: const EdgeInsets.only(left: 10, right: 15, top: 30),
- height: 350,
- child: Directionality(
- textDirection: TextDirection.rtl,
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _mapSource,
- shapeTooltipBuilder: (BuildContext context, int index) {
- return Container(
- height: 50,
- width: 190,
- child: Column(
- children: [
- Padding(
- padding: EdgeInsets.all(5),
- child: Row(
- children: [
- Text('Continent : '),
- Text(_data[index].continent),
- ],
- ),
- ),
- Padding(
- padding:
- EdgeInsets.only(left: 5, right: 5, bottom: 5),
- child: Row(
- children: [
- Text('Population : '),
- Text(_data[index]
- .populationDensityPerSqKm
- .toStringAsFixed(0) +
- ' per sq/km'),
- ],
- ),
- ),
- ],
- ),
- );
- },
- tooltipSettings: const MapTooltipSettings(
- color: Colors.white,
- strokeColor: Colors.black,
- ),
- )
- ],
- ),
- ),
- ),
- ),
- );
- }
-}
-
-class PopulationModel {
- const PopulationModel(
- this.continent, this.populationDensityPerSqKm, this.color);
-
- final String continent;
- final double populationDensityPerSqKm;
- final Color color;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
+---
+layout: post
+title: Right-to-Left (RTL) in Flutter Maps | Syncfusion®
+description: Learn about right-to-left (RTL) support in Syncfusion® Flutter Maps (SfMaps), including map rendering, localization, and layout customization.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Right-to-Left (RTL) in Flutter Maps (SfMaps)
+
+## Enable RTL rendering
+
+Right to left rendering can be achieved in the following ways:
+
+### Wrapping the SfMaps with Directionality widget
+
+The Flutter Maps can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl`.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ body: Directionality(
+ textDirection: TextDirection.rtl,
+ child: Center(
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: const MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent"),
+ ),
+ ],
+ ),
+ )
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Changing the locale to RTL languages
+
+The elements of the Flutter Maps will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, or Urdu. This can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
+
+{% tabs %}
+{% highlight Dart %}
+
+dependencies:
+ flutter_localizations:
+ sdk: flutter
+
+{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ localizationsDelegates: [
+ GlobalMaterialLocalizations.delegate,
+ GlobalWidgetsLocalizations.delegate,
+ ],
+ supportedLocales: [
+ Locale("fa", "IR"),
+ ],
+ locale: Locale("fa", "IR"),
+ home: Scaffold(
+ backgroundColor: Colors.white,
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: const MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent"),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## RTL supported maps elements
+
+### Legend
+
+Legend items will be rendered from right to left direction. This is applicable for both shape and bubble legends with solid and bar types.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List _data;
+ late MapShapeSource _mapSource;
+
+ @override
+ void initState() {
+ super.initState();
+ _data = [
+ PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)),
+ PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)),
+ PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)),
+ PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)),
+ PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)),
+ PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)),
+ ];
+
+ _mapSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ dataCount: _data.length,
+ primaryValueMapper: (int index) => _data[index].continent,
+ shapeColorValueMapper: (int index) => _data[index].color,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ padding: const EdgeInsets.only(left: 10, right: 15, top: 30),
+ height: 350,
+ child: Directionality(
+ textDirection: TextDirection.rtl,
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _mapSource,
+ legend: MapLegend(MapElement.shape),
+ )
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class PopulationModel {
+ const PopulationModel(
+ this.continent, this.populationDensityPerSqKm, this.color);
+
+ final String continent;
+ final double populationDensityPerSqKm;
+ final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Tooltip
+
+Tooltip text will be rendered from right to left direction. This is applicable for shape tooltip, bubble tooltip, and marker tooltip.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List _data;
+ late MapShapeSource _mapSource;
+
+ @override
+ void initState() {
+ super.initState();
+ _data = [
+ PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)),
+ PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)),
+ PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)),
+ PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)),
+ PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)),
+ PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)),
+ ];
+
+ _mapSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ dataCount: _data.length,
+ primaryValueMapper: (int index) => _data[index].continent,
+ shapeColorValueMapper: (int index) => _data[index].color,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ padding: const EdgeInsets.only(left: 10, right: 15, top: 30),
+ height: 350,
+ child: Directionality(
+ textDirection: TextDirection.rtl,
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _mapSource,
+ shapeTooltipBuilder: (BuildContext context, int index) {
+ return Container(
+ height: 50,
+ width: 190,
+ child: Column(
+ children: [
+ Padding(
+ padding: EdgeInsets.all(5),
+ child: Row(
+ children: [
+ Text('Continent : '),
+ Text(_data[index].continent),
+ ],
+ ),
+ ),
+ Padding(
+ padding:
+ EdgeInsets.only(left: 5, right: 5, bottom: 5),
+ child: Row(
+ children: [
+ Text('Population : '),
+ Text(_data[index]
+ .populationDensityPerSqKm
+ .toStringAsFixed(0) +
+ ' per sq/km'),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ },
+ tooltipSettings: const MapTooltipSettings(
+ color: Colors.white,
+ strokeColor: Colors.black,
+ ),
+ )
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class PopulationModel {
+ const PopulationModel(
+ this.continent, this.populationDensityPerSqKm, this.color);
+
+ final String continent;
+ final double populationDensityPerSqKm;
+ final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
diff --git a/Flutter/maps/selection.md b/Flutter/maps/selection.md
index a97dd8057..8d6e4e62f 100644
--- a/Flutter/maps/selection.md
+++ b/Flutter/maps/selection.md
@@ -1,288 +1,288 @@
----
-layout: post
-title: Shape Selection in Flutter Maps | Syncfusion®
-description: Learn about shape selection in Syncfusion® Flutter Maps (SfMaps), including selection customization, interaction, highlighting, and styling options.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Shape Selection in Flutter Maps (SfMaps)
-
-You can select a shape to highlight a specific area on a map. You can also use callbacks to perform custom actions during shape selection.
-
-## Enable shape selection
-
-You can enable shape selection on a map using the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) property along with setting the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property. The default value of the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property is `-1`.
-
-The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback is triggered when a user selects a shape by tapping or clicking, or when a shape is selected programmatically. It provides the index of the selected shape.
-
-N> You must update the selectedIndex in the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback to reflect the changes in the UI.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
- int selectedIndex = 1;
-
- @override
- void initState() {
- super.initState();
- data = const [
- Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)),
- Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)),
- Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)),
- Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)),
- Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)),
- Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8))
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].continent,
- shapeColorValueMapper: (int index) => data[index].color,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- selectedIndex: selectedIndex,
- onSelectionChanged: (int index) {
- setState(() {
- selectedIndex = index;
- });
- },
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.continent, this.code, this.color);
-
- final String continent;
- final String code;
- final Color color;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N>
-* Refer to the [`MapSelectionSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings-class.html) class for customizing the selected shape's appearance.
-
-## Appearance customization
-
-You can customize the following aspects of the selected shape:
-
-* **Background color** - Change the background color of the selected shape using the [`MapSelectionSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings/color.html) property.
-* **Stroke width** - Change the stroke width of the selected shape using the [`MapSelectionSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings/strokeWidth.html) property.
-* **Stroke color** - Change the stroke color of the selected shape using the [`MapSelectionSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings/strokeColor.html) property.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
- int selectedIndex = 5;
-
- @override
- void initState() {
- super.initState();
- data = const [
- Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)),
- Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)),
- Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)),
- Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)),
- Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)),
- Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8))
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].continent,
- shapeColorValueMapper: (int index) => data[index].color,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- selectedIndex: selectedIndex,
- onSelectionChanged: (int index) {
- setState(() {
- selectedIndex = index;
- });
- },
- selectionSettings: MapSelectionSettings(
- color: Colors.orange,
- strokeColor: Colors.red[900],
- strokeWidth: 3,
- ),
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.continent, this.code, this.color);
-
- final String continent;
- final String code;
- final Color color;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-Using SfMapsTheme
-
-You can also customize the appearance of the selected shape using [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html):
-
-* **Background color** - Change the background color of the selected shape using the [`SfMapsThemeData.selectionColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/selectionColor.html) property.
-* **Stroke width** - Change the stroke width of the selected shape using the [`SfMapsThemeData.selectionStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/selectionStrokeWidth.html) property.
-* **Stroke color** - Change the stroke color of the selected shape using the [`SfMapsThemeData.selectionStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/selectionStrokeColor.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).
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-import 'package:syncfusion_flutter_core/theme.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
- int selectedIndex = 5;
-
- @override
- void initState() {
- super.initState();
- data = const [
- Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)),
- Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)),
- Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)),
- Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)),
- Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)),
- Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8))
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].continent,
- shapeColorValueMapper: (int index) => data[index].color,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMapsTheme(
- data: SfMapsThemeData(
- selectionColor: Colors.orange,
- selectionStrokeWidth: 3,
- selectionStrokeColor: Colors.red[900],
- ),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- selectedIndex: selectedIndex,
- onSelectionChanged: (int index) {
- setState(() {
- selectedIndex = index;
- });
- },
- ),
- ],
- ),
- )
- ),
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.continent, this.code, this.color);
-
- final String continent;
- final String code;
- final Color color;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
+---
+layout: post
+title: Shape Selection in Flutter Maps | Syncfusion®
+description: Learn about shape selection in Syncfusion® Flutter Maps (SfMaps), including selection customization, interaction, highlighting, and styling options.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Shape Selection in Flutter Maps (SfMaps)
+
+You can select a shape to highlight a specific area on a Flutter Maps. You can also use callbacks to perform custom actions during shape selection.
+
+## Enable shape selection
+
+You can enable shape selection on a Flutter Maps using the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) property along with setting the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property. The default value of the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property is `-1`.
+
+The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback is triggered when a user selects a shape by tapping or clicking, or when a shape is selected programmatically. It provides the index of the selected shape.
+
+N> You must update the selectedIndex in the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback to reflect the changes in the UI.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+ int selectedIndex = 1;
+
+ @override
+ void initState() {
+ super.initState();
+ data = const [
+ Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)),
+ Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)),
+ Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)),
+ Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)),
+ Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)),
+ Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8))
+ ];
+
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].continent,
+ shapeColorValueMapper: (int index) => data[index].color,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ selectedIndex: selectedIndex,
+ onSelectionChanged: (int index) {
+ setState(() {
+ selectedIndex = index;
+ });
+ },
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.continent, this.code, this.color);
+
+ final String continent;
+ final String code;
+ final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N>
+* Refer to the [`MapSelectionSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings-class.html) class for customizing the selected shape's appearance.
+
+## Appearance customization
+
+You can customize the following aspects of the selected shape:
+
+* **Background color** - Change the background color of the selected shape using the [`MapSelectionSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings/color.html) property.
+* **Stroke width** - Change the stroke width of the selected shape using the [`MapSelectionSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings/strokeWidth.html) property.
+* **Stroke color** - Change the stroke color of the selected shape using the [`MapSelectionSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSelectionSettings/strokeColor.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+ int selectedIndex = 5;
+
+ @override
+ void initState() {
+ super.initState();
+ data = const [
+ Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)),
+ Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)),
+ Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)),
+ Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)),
+ Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)),
+ Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8))
+ ];
+
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].continent,
+ shapeColorValueMapper: (int index) => data[index].color,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ selectedIndex: selectedIndex,
+ onSelectionChanged: (int index) {
+ setState(() {
+ selectedIndex = index;
+ });
+ },
+ selectionSettings: MapSelectionSettings(
+ color: Colors.orange,
+ strokeColor: Colors.red[900],
+ strokeWidth: 3,
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.continent, this.code, this.color);
+
+ final String continent;
+ final String code;
+ final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+Using SfMapsTheme
+
+You can also customize the appearance of the selected shape using [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html):
+
+* **Background color** - Change the background color of the selected shape using the [`SfMapsThemeData.selectionColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/selectionColor.html) property.
+* **Stroke width** - Change the stroke width of the selected shape using the [`SfMapsThemeData.selectionStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/selectionStrokeWidth.html) property.
+* **Stroke color** - Change the stroke color of the selected shape using the [`SfMapsThemeData.selectionStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/selectionStrokeColor.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).
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+ int selectedIndex = 5;
+
+ @override
+ void initState() {
+ super.initState();
+ data = const [
+ Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)),
+ Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)),
+ Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)),
+ Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)),
+ Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)),
+ Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8))
+ ];
+
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].continent,
+ shapeColorValueMapper: (int index) => data[index].color,
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMapsTheme(
+ data: SfMapsThemeData(
+ selectionColor: Colors.orange,
+ selectionStrokeWidth: 3,
+ selectionStrokeColor: Colors.red[900],
+ ),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ selectedIndex: selectedIndex,
+ onSelectionChanged: (int index) {
+ setState(() {
+ selectedIndex = index;
+ });
+ },
+ ),
+ ],
+ ),
+ )
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.continent, this.code, this.color);
+
+ final String continent;
+ final String code;
+ final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
N> You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps Selection example](https://flutter.syncfusion.com/#/maps/shape-layer/selection) that shows how to configure a Maps in Flutter.
\ No newline at end of file
diff --git a/Flutter/maps/shape-sublayer.md b/Flutter/maps/shape-sublayer.md
index 9e386c14c..428ea35b3 100644
--- a/Flutter/maps/shape-sublayer.md
+++ b/Flutter/maps/shape-sublayer.md
@@ -1,954 +1,954 @@
----
-layout: post
-title: Shape Sublayer in Flutter Maps | Syncfusion®
-description: Learn about shape sublayers in Syncfusion® Flutter Maps (SfMaps), including shape layer customization, data visualization, and map overlays.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Shape Sublayer in Flutter Maps (SfMaps)
-
-The shape sublayer is where geographical rendering happens for the sublayer. This is similar to the main [`shape layer`](https://help.syncfusion.com/flutter/maps/getting-started#add-a-geojson-file-for-shape-layer) rendering. This section explains how to add a shape sublayer on both the shape layer and tile layer.
-
-## Shape sublayer on tile layer
-
-The [`sublayers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/sublayers.html) property in [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) contains a collection of [`MapSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer-class.html). The actual geographical rendering is done in each [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/source.html) property of the [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The path of the .json file which contains the GeoJSON data must be set to the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html).
-
-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 to the unique field name in the .json file to identify each shape.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _sublayerSource;
-
- @override
- void initState() {
- super.initState();
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: const EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapTileLayer(
- urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- ),
- ],
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N>
-* Refer to the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) documentation for adding a tile layer in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html).
-
-## Shape sublayer on shape layer
-
-The [`sublayers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/sublayers.html) property in [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) contains a collection of [`MapSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer-class.html). The actual geographical rendering is done in each [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/source.html) property of the [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The path of the .json file which contains the GeoJSON data must be set to the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html).
-
-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 to the unique field name in the .json file to identify each shape.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: const EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- ),
- ],
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N>
-* Refer the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html), for adding shape layer in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html).
-
-## Color and stroke color
-
-You can change the color, strokeColor, and strokeWidth of the shape sublayer using the [`color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/color.html), [`strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/strokeColor.html), and [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/strokeWidth.html) properties.
-
-N> It is applicable for both tile layer and shape layer.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: const EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- color: Colors.blue[100],
- strokeWidth: 2,
- strokeColor: Colors.blue[800],
- ),
- ],
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Equal color mapping
-
-You can apply color to the sublayer shape by comparing a value that returns from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) with the [`MapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/value.html). For the matched values, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource sublayerDataSource;
- late MapShapeSource shapeDataSource;
-
- @override
- void initState() {
- data = [
- Model('Algeria', "Low"),
- Model('Nigeria', "High"),
- Model('Libya', "High"),
- ];
-
- shapeDataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: 'continent',
- );
-
- sublayerDataSource = MapShapeSource.asset(
- "assets/africa.json",
- shapeDataField: "name",
- dataCount: data.length,
- primaryValueMapper: (int index) {
- return data[index].state;
- },
- shapeColorValueMapper: (int index) {
- return data[index].storage;
- },
- shapeColorMappers: [
- MapColorMapper(value: "Low", color: Colors.red),
- MapColorMapper(value: "High", color: Colors.green)
- ],
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: shapeDataSource,
- sublayers: [
- MapShapeSublayer(
- source: sublayerDataSource,
- )
- ],
- ),
- ],
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.state, this.storage);
-
- final String state;
- final String storage;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Range color mapping
-
-You can apply color to the sublayer shape based on whether the value returned from [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) falls within the [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) range. Then, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource sublayerDataSource;
- late MapShapeSource shapeDataSource;
-
- @override
- void initState() {
- data = [
- Model('Algeria', 196),
- Model('Nigeria', 280),
- Model('Libya', 45),
- ];
-
- shapeDataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: 'continent',
- );
-
- sublayerDataSource = MapShapeSource.asset(
- "assets/africa.json",
- shapeDataField: "name",
- dataCount: data.length,
- primaryValueMapper: (int index) {
- return data[index].state;
- },
- shapeColorValueMapper: (int index) => data[index].count,
- shapeColorMappers: [
- MapColorMapper(from: 0, to: 100, color: Colors.red),
- MapColorMapper(from: 101, to: 300, color: Colors.green)
- ],
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: shapeDataSource,
- sublayers: [
- MapShapeSublayer(
- source: sublayerDataSource,
- )
- ],
- ),
- ],
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.state, this.count);
-
- final String state;
- final double count;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Enable data labels and its customization
-
-You can enable data labels for the shape sublayer using the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/showDataLabels.html) property and customize the data labels text using the [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
-
-N> Refer to the [`DataLabels`](https://help.syncfusion.com/flutter/maps/data-labels) section, for customizing data labels.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
- late List _sublayerData;
- late MapZoomPanBehavior _zoomPanBehavior;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _sublayerData = [
- DataModel('Algeria', Colors.green, 'Algeria'),
- DataModel('Libya', Colors.teal, 'Libya'),
- DataModel('Egypt', Colors.blue, 'Egypt'),
- DataModel('Mali', Colors.purple, 'Mali'),
- DataModel('Niger', Colors.indigo, 'Niger'),
- DataModel('Nigeria', Colors.purpleAccent, 'Nigeria'),
- DataModel('Chad', Colors.lightGreen, 'Chad'),
- DataModel('Sudan', Colors.redAccent, 'Sudan'),
- DataModel('Mauritania', Colors.orange, 'Mauritania'),
- DataModel('South Sudan', Colors.lime, 'South Sudan'),
- DataModel('Ethiopia', Colors.greenAccent, 'Ethiopia')
- ];
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- dataCount: _sublayerData.length,
- primaryValueMapper: (int index) => _sublayerData[index].key,
- dataLabelMapper: (int index) => _sublayerData[index].stateCode,
- );
- _zoomPanBehavior = MapZoomPanBehavior(
- zoomLevel: 3,
- focalLatLng: MapLatLng(38.9637, 35.2433),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- zoomPanBehavior: _zoomPanBehavior,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- showDataLabels: true,
- dataLabelSettings: const MapDataLabelSettings(
- overflowMode: MapLabelOverflow.ellipsis,
- textStyle: const TextStyle(
- color: Colors.red,
- fontSize: 12,
- fontWeight: FontWeight.bold,
- fontStyle: FontStyle.italic,
- fontFamily: 'Times'),
- ),
- ),
- ],
- ),
- ],
- ),
- );
- }
- DataModel(this.key, this.color, this.stateCode);
-
- final String key;
- final Color color;
- final String stateCode;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Add bubbles to the sublayer
-
-You can enable bubbles for the shape sublayer using the [`bubbleSizeMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleSizeMapper.html) property and customize the bubbles appearance using the [`bubbleSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleSettings.html) property. You can also enable tooltips for the shape sublayer bubbles using the [`bubbleTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleTooltipBuilder.html) property.
-
-N> It is applicable for both tile layer and shape layer.
-
-N> Refer to the [`Bubbles`](https://help.syncfusion.com/flutter/maps/bubble#tooltip-for-the-bubbles) section, to know more about the bubbles customization.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
- late List _sublayerData;
- late MapZoomPanBehavior _zoomPanBehavior;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _sublayerData = [
- DataModel('Algeria', Colors.green, 36232),
- DataModel('Libya', Colors.teal, 34121),
- DataModel('Egypt', Colors.blue, 43453),
- DataModel('Mali', Colors.purple, 28123),
- DataModel('Niger', Colors.indigo, 40111),
- DataModel('Nigeria', Colors.purpleAccent, 30232),
- DataModel('Chad', Colors.lightGreen, 48132),
- DataModel('Sudan', Colors.redAccent, 52654),
- DataModel('Mauritania', Colors.orange, 42231),
- DataModel('South Sudan', Colors.lime, 40421),
- DataModel('Ethiopia', Colors.greenAccent, 27198)
- ];
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- dataCount: _sublayerData.length,
- primaryValueMapper: (int index) => _sublayerData[index].key,
- bubbleColorValueMapper: (int index) => _sublayerData[index].color,
- bubbleSizeMapper: (int index) => _sublayerData[index].size,
- );
- _zoomPanBehavior = MapZoomPanBehavior(
- zoomLevel: 3,
- focalLatLng: MapLatLng(38.9637, 35.2433),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- zoomPanBehavior: _zoomPanBehavior,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- bubbleSettings: const MapBubbleSettings(
- minRadius: 5,
- maxRadius: 20,
- ),
- bubbleTooltipBuilder: (BuildContext context, int index) {
- return Container(
- height: 40,
- width: 120,
- padding: const EdgeInsets.all(5),
- child: Column(
- children: [
- Row(
- children: [
- Text('State : ',
- style: TextStyle(color: Colors.white)),
- Text(_sublayerData[index].key,
- style: TextStyle(color: Colors.white)),
- ],
- ),
- Row(
- children: [
- Text('Population : ',
- style: TextStyle(color: Colors.white)),
- Text(_sublayerData[index].size.toStringAsFixed(0),
- style: TextStyle(color: Colors.white)),
- ],
- ),
- ],
- ),
- );
- },
- ),
- ],
- ),
- ],
- ),
- );
- }
-}
-
-class DataModel {
- DataModel(this.key, this.color, this.size);
-
- final String key;
- final Color color;
- final double size;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Enable tooltip for shape sublayer
-
-You can enable tooltips for the shape sublayer using the [`shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/shapeTooltipBuilder.html) property.
-
-N> It is applicable for both tile layer and shape layer.
-
-N> Refer to the [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip) section to know more about the tooltip customization.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
- late List _sublayerData;
- late MapZoomPanBehavior _zoomPanBehavior;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _sublayerData = [
- DataModel('Algeria', Colors.green, 36232),
- DataModel('Libya', Colors.teal, 34121),
- DataModel('Egypt', Colors.blue, 43453),
- DataModel('Mali', Colors.purple, 28123),
- DataModel('Niger', Colors.indigo, 40111),
- DataModel('Nigeria', Colors.purpleAccent, 30232),
- DataModel('Chad', Colors.lightGreen, 48132),
- DataModel('Sudan', Colors.redAccent, 52654),
- DataModel('Mauritania', Colors.orange, 42231),
- DataModel('South Sudan', Colors.lime, 40421),
- DataModel('Ethiopia', Colors.greenAccent, 27198)
- ];
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- dataCount: _sublayerData.length,
- primaryValueMapper: (int index) => _sublayerData[index].key,
- shapeColorValueMapper: (int index) => _sublayerData[index].color,
- );
- _zoomPanBehavior = MapZoomPanBehavior(
- zoomLevel: 3,
- focalLatLng: MapLatLng(38.9637, 35.2433),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- zoomPanBehavior: _zoomPanBehavior,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- shapeTooltipBuilder: (BuildContext context, int index) {
- return Container(
- height: 40,
- width: 120,
- padding: const EdgeInsets.all(5),
- child: Column(
- children: [
- Row(
- children: [
- Text('State : ',
- style: TextStyle(color: Colors.white)),
- Text(_sublayerData[index].key,
- style: TextStyle(color: Colors.white)),
- ],
- ),
- Row(
- children: [
- Text('Population : ',
- style: TextStyle(color: Colors.white)),
- Text(_sublayerData[index].size.toStringAsFixed(0),
- style: TextStyle(color: Colors.white)),
- ],
- ),
- ],
- ),
- );
- },
- ),
- ],
- ),
- ],
- ),
- );
- }
-}
-
-class DataModel {
- DataModel(this.key, this.color, this.size);
-
- final String key;
- final Color color;
- final double size;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Selection
-
-You can enable shape sublayer selection using the [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/onSelectionChanged.html) callback along with setting the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/selectedIndex.html) property.
-
-The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/onSelectionChanged.html) callback is triggered when the user selects a shape by tapping or clicking, or when a shape is selected programmatically. It provides the index of the selected shape.
-
-If the selected shape is tapped or clicked again, the index will be passed as -1, indicating that the shape is unselected.
-
-N> It is applicable for both tile layer and shape layer.
-
-N> Refer the [`Shape selection`](https://help.syncfusion.com/flutter/maps/selection) section to know more about the selection feature.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
- late List _sublayerData;
- late MapZoomPanBehavior _zoomPanBehavior;
- int _selectedIndex = 0;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _sublayerData = [
- DataModel('Algeria', Colors.green, 36232),
- DataModel('Libya', Colors.teal, 34121),
- DataModel('Egypt', Colors.blue, 43453),
- DataModel('Mali', Colors.purple, 28123),
- DataModel('Niger', Colors.indigo, 40111),
- DataModel('Nigeria', Colors.purpleAccent, 30232),
- DataModel('Chad', Colors.lightGreen, 48132),
- DataModel('Sudan', Colors.redAccent, 52654),
- DataModel('Mauritania', Colors.orange, 42231),
- DataModel('South Sudan', Colors.lime, 40421),
- DataModel('Ethiopia', Colors.greenAccent, 27198)
- ];
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- dataCount: _sublayerData.length,
- primaryValueMapper: (int index) => _sublayerData[index].key,
- shapeColorValueMapper: (int index) => _sublayerData[index].color,
- );
- _zoomPanBehavior = MapZoomPanBehavior(
- zoomLevel: 3,
- focalLatLng: MapLatLng(38.9637, 35.2433),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- zoomPanBehavior: _zoomPanBehavior,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- selectedIndex: _selectedIndex,
- onSelectionChanged: (int index) {
- setState(() {
- _selectedIndex = index;
- });
- },
- selectionSettings: const MapSelectionSettings(
- color: Colors.lime,
- strokeWidth: 3,
- strokeColor: Colors.black,
- ),
- ),
- ],
- ),
- ],
- ),
- );
- }
-}
-
-class DataModel {
- DataModel(this.key, this.color, this.size);
-
- final String key;
- final Color color;
- final double size;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Marker
-
-You can show markers at any position on the map by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) property.
-
-The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/initialMarkersCount.html) property is null.
-
-N> It is applicable for both tile layer and shape layer.
-
-N>
-* Refer to the [`Marker`](https://help.syncfusion.com/flutter/maps/markers) section to know more about the marker feature.
-* Refer to the [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip) section to know more about the tooltip feature.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource _shapeSource;
- late MapShapeSource _sublayerSource;
- late List _sublayerData;
- late MapZoomPanBehavior _zoomPanBehavior;
- late List _markerData;
-
- @override
- void initState() {
- super.initState();
- _shapeSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "continent",
- );
-
- _markerData = [
- MapLatLng(28.0339, 1.6596),
- MapLatLng(26.3351, 17.2283),
- MapLatLng(26.8208, 30.8025),
- MapLatLng(17.6078, 8.0817),
- MapLatLng(9.0820, 8.6753),
- MapLatLng(9.1450, 40.4897),
- MapLatLng(15.4542, 18.7322),
- MapLatLng(6.8770, 31.3070),
- MapLatLng(21.0079, -10.9408),
- MapLatLng(12.8628, 30.2176),
- ];
-
- _sublayerData = [
- DataModel('Algeria', Colors.green, 36232),
- DataModel('Libya', Colors.teal, 34121),
- DataModel('Egypt', Colors.blue, 43453),
- DataModel('Mali', Colors.purple, 28123),
- DataModel('Niger', Colors.indigo, 40111),
- DataModel('Nigeria', Colors.purpleAccent, 30232),
- DataModel('Chad', Colors.lightGreen, 48132),
- DataModel('Sudan', Colors.redAccent, 52654),
- DataModel('Mauritania', Colors.orange, 42231),
- DataModel('South Sudan', Colors.lime, 40421),
- DataModel('Ethiopia', Colors.greenAccent, 27198)
- ];
-
- _sublayerSource = MapShapeSource.asset(
- 'assets/africa.json',
- shapeDataField: 'name',
- dataCount: _sublayerData.length,
- primaryValueMapper: (int index) => _sublayerData[index].key,
- shapeColorValueMapper: (int index) => _sublayerData[index].color,
- );
- _zoomPanBehavior = MapZoomPanBehavior(
- zoomLevel: 3,
- focalLatLng: MapLatLng(38.9637, 35.2433),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SfMaps(
- layers: [
- MapShapeLayer(
- source: _shapeSource,
- zoomPanBehavior: _zoomPanBehavior,
- sublayers: [
- MapShapeSublayer(
- source: _sublayerSource,
- initialMarkersCount: _markerData.length,
- markerBuilder: (BuildContext context, int index) {
- return MapMarker(
- latitude: _markerData[index].latitude,
- longitude: _markerData[index].longitude,
- iconColor: Colors.white,
- iconStrokeWidth: 2,
- iconStrokeColor: Colors.black,
- iconType: MapIconType.triangle,
- size: Size(15, 15),
- );
- },
- markerTooltipBuilder: (BuildContext context, int index) {
- return Padding(
- padding: EdgeInsets.all(10),
- child: Text(_sublayerData[index].key,
- style: TextStyle(color: Colors.white)),
- );
- },
- ),
- ],
- ),
- ],
- ),
- );
- }
-}
-
-class DataModel {
- DataModel(this.key, this.color, this.size);
-
- final String key;
- final Color color;
- final double size;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
+---
+layout: post
+title: Shape Sublayer in Flutter Maps | Syncfusion®
+description: Learn about shape sublayers in Syncfusion® Flutter Maps (SfMaps), including shape layer customization, data visualization, and map overlays.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Shape Sublayer in Flutter Maps (SfMaps)
+
+The shape sublayer is where geographical rendering happens for the sublayer. This is similar to the main [`shape layer`](https://help.syncfusion.com/flutter/maps/getting-started#add-a-geojson-file-for-shape-layer) rendering. This section explains how to add a shape sublayer on both the shape layer and tile layer.
+
+## Shape sublayer on tile layer
+
+The [`sublayers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/sublayers.html) property in [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) contains a collection of [`MapSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer-class.html). The actual geographical rendering is done in each [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/source.html) property of the [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The path of the .json file which contains the GeoJSON data must be set to the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html).
+
+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 to the unique field name in the .json file to identify each shape.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _sublayerSource;
+
+ @override
+ void initState() {
+ super.initState();
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: const EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapTileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ ),
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N>
+* Refer to the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) documentation for adding a tile layer in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html).
+
+## Shape sublayer on shape layer
+
+The [`sublayers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/sublayers.html) property in [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) contains a collection of [`MapSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer-class.html). The actual geographical rendering is done in each [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/source.html) property of the [`MapShapeSublayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The path of the .json file which contains the GeoJSON data must be set to the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html).
+
+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 to the unique field name in the .json file to identify each shape.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: const EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ ),
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N>
+* Refer the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html), for adding shape layer in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html).
+
+## Color and stroke color
+
+You can change the color, strokeColor, and strokeWidth of the shape sublayer using the [`color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/color.html), [`strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/strokeColor.html), and [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/strokeWidth.html) properties.
+
+N> It is applicable for both tile layer and shape layer.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: const EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ color: Colors.blue[100],
+ strokeWidth: 2,
+ strokeColor: Colors.blue[800],
+ ),
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Equal color mapping
+
+You can apply color to the sublayer shape by comparing a value that returns from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) with the [`MapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/value.html). For the matched values, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource sublayerDataSource;
+ late MapShapeSource shapeDataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('Algeria', "Low"),
+ Model('Nigeria', "High"),
+ Model('Libya', "High"),
+ ];
+
+ shapeDataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: 'continent',
+ );
+
+ sublayerDataSource = MapShapeSource.asset(
+ "assets/africa.json",
+ shapeDataField: "name",
+ dataCount: data.length,
+ primaryValueMapper: (int index) {
+ return data[index].state;
+ },
+ shapeColorValueMapper: (int index) {
+ return data[index].storage;
+ },
+ shapeColorMappers: [
+ MapColorMapper(value: "Low", color: Colors.red),
+ MapColorMapper(value: "High", color: Colors.green)
+ ],
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: shapeDataSource,
+ sublayers: [
+ MapShapeSublayer(
+ source: sublayerDataSource,
+ )
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.state, this.storage);
+
+ final String state;
+ final String storage;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Range color mapping
+
+You can apply color to the sublayer shape based on whether the value returned from [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) falls within the [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) range. Then, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource sublayerDataSource;
+ late MapShapeSource shapeDataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('Algeria', 196),
+ Model('Nigeria', 280),
+ Model('Libya', 45),
+ ];
+
+ shapeDataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: 'continent',
+ );
+
+ sublayerDataSource = MapShapeSource.asset(
+ "assets/africa.json",
+ shapeDataField: "name",
+ dataCount: data.length,
+ primaryValueMapper: (int index) {
+ return data[index].state;
+ },
+ shapeColorValueMapper: (int index) => data[index].count,
+ shapeColorMappers: [
+ MapColorMapper(from: 0, to: 100, color: Colors.red),
+ MapColorMapper(from: 101, to: 300, color: Colors.green)
+ ],
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: shapeDataSource,
+ sublayers: [
+ MapShapeSublayer(
+ source: sublayerDataSource,
+ )
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.state, this.count);
+
+ final String state;
+ final double count;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Enable data labels and its customization
+
+You can enable data labels for the shape sublayer using the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/showDataLabels.html) property and customize the data labels text using the [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
+
+N> Refer to the [`DataLabels`](https://help.syncfusion.com/flutter/maps/data-labels) section, for customizing data labels.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+ late List _sublayerData;
+ late MapZoomPanBehavior _zoomPanBehavior;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _sublayerData = [
+ DataModel('Algeria', Colors.green, 'Algeria'),
+ DataModel('Libya', Colors.teal, 'Libya'),
+ DataModel('Egypt', Colors.blue, 'Egypt'),
+ DataModel('Mali', Colors.purple, 'Mali'),
+ DataModel('Niger', Colors.indigo, 'Niger'),
+ DataModel('Nigeria', Colors.purpleAccent, 'Nigeria'),
+ DataModel('Chad', Colors.lightGreen, 'Chad'),
+ DataModel('Sudan', Colors.redAccent, 'Sudan'),
+ DataModel('Mauritania', Colors.orange, 'Mauritania'),
+ DataModel('South Sudan', Colors.lime, 'South Sudan'),
+ DataModel('Ethiopia', Colors.greenAccent, 'Ethiopia')
+ ];
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ dataCount: _sublayerData.length,
+ primaryValueMapper: (int index) => _sublayerData[index].key,
+ dataLabelMapper: (int index) => _sublayerData[index].stateCode,
+ );
+ _zoomPanBehavior = MapZoomPanBehavior(
+ zoomLevel: 3,
+ focalLatLng: MapLatLng(38.9637, 35.2433),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ zoomPanBehavior: _zoomPanBehavior,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ showDataLabels: true,
+ dataLabelSettings: const MapDataLabelSettings(
+ overflowMode: MapLabelOverflow.ellipsis,
+ textStyle: const TextStyle(
+ color: Colors.red,
+ fontSize: 12,
+ fontWeight: FontWeight.bold,
+ fontStyle: FontStyle.italic,
+ fontFamily: 'Times'),
+ ),
+ ),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+ DataModel(this.key, this.color, this.stateCode);
+
+ final String key;
+ final Color color;
+ final String stateCode;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Add bubbles to the sublayer
+
+You can enable bubbles for the shape sublayer using the [`bubbleSizeMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleSizeMapper.html) property and customize the bubbles appearance using the [`bubbleSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleSettings.html) property. You can also enable tooltips for the shape sublayer bubbles using the [`bubbleTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleTooltipBuilder.html) property.
+
+N> It is applicable for both tile layer and shape layer.
+
+N> Refer to the [`Bubbles`](https://help.syncfusion.com/flutter/maps/bubble#tooltip-for-the-bubbles) section, to know more about the bubbles customization.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+ late List _sublayerData;
+ late MapZoomPanBehavior _zoomPanBehavior;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _sublayerData = [
+ DataModel('Algeria', Colors.green, 36232),
+ DataModel('Libya', Colors.teal, 34121),
+ DataModel('Egypt', Colors.blue, 43453),
+ DataModel('Mali', Colors.purple, 28123),
+ DataModel('Niger', Colors.indigo, 40111),
+ DataModel('Nigeria', Colors.purpleAccent, 30232),
+ DataModel('Chad', Colors.lightGreen, 48132),
+ DataModel('Sudan', Colors.redAccent, 52654),
+ DataModel('Mauritania', Colors.orange, 42231),
+ DataModel('South Sudan', Colors.lime, 40421),
+ DataModel('Ethiopia', Colors.greenAccent, 27198)
+ ];
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ dataCount: _sublayerData.length,
+ primaryValueMapper: (int index) => _sublayerData[index].key,
+ bubbleColorValueMapper: (int index) => _sublayerData[index].color,
+ bubbleSizeMapper: (int index) => _sublayerData[index].size,
+ );
+ _zoomPanBehavior = MapZoomPanBehavior(
+ zoomLevel: 3,
+ focalLatLng: MapLatLng(38.9637, 35.2433),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ zoomPanBehavior: _zoomPanBehavior,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ bubbleSettings: const MapBubbleSettings(
+ minRadius: 5,
+ maxRadius: 20,
+ ),
+ bubbleTooltipBuilder: (BuildContext context, int index) {
+ return Container(
+ height: 40,
+ width: 120,
+ padding: const EdgeInsets.all(5),
+ child: Column(
+ children: [
+ Row(
+ children: [
+ Text('State : ',
+ style: TextStyle(color: Colors.white)),
+ Text(_sublayerData[index].key,
+ style: TextStyle(color: Colors.white)),
+ ],
+ ),
+ Row(
+ children: [
+ Text('Population : ',
+ style: TextStyle(color: Colors.white)),
+ Text(_sublayerData[index].size.toStringAsFixed(0),
+ style: TextStyle(color: Colors.white)),
+ ],
+ ),
+ ],
+ ),
+ );
+ },
+ ),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class DataModel {
+ DataModel(this.key, this.color, this.size);
+
+ final String key;
+ final Color color;
+ final double size;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Enable tooltip for shape sublayer
+
+You can enable tooltips for the shape sublayer using the [`shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/shapeTooltipBuilder.html) property.
+
+N> It is applicable for both tile layer and shape layer.
+
+N> Refer to the [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip) section to know more about the tooltip customization.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+ late List _sublayerData;
+ late MapZoomPanBehavior _zoomPanBehavior;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _sublayerData = [
+ DataModel('Algeria', Colors.green, 36232),
+ DataModel('Libya', Colors.teal, 34121),
+ DataModel('Egypt', Colors.blue, 43453),
+ DataModel('Mali', Colors.purple, 28123),
+ DataModel('Niger', Colors.indigo, 40111),
+ DataModel('Nigeria', Colors.purpleAccent, 30232),
+ DataModel('Chad', Colors.lightGreen, 48132),
+ DataModel('Sudan', Colors.redAccent, 52654),
+ DataModel('Mauritania', Colors.orange, 42231),
+ DataModel('South Sudan', Colors.lime, 40421),
+ DataModel('Ethiopia', Colors.greenAccent, 27198)
+ ];
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ dataCount: _sublayerData.length,
+ primaryValueMapper: (int index) => _sublayerData[index].key,
+ shapeColorValueMapper: (int index) => _sublayerData[index].color,
+ );
+ _zoomPanBehavior = MapZoomPanBehavior(
+ zoomLevel: 3,
+ focalLatLng: MapLatLng(38.9637, 35.2433),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ zoomPanBehavior: _zoomPanBehavior,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ shapeTooltipBuilder: (BuildContext context, int index) {
+ return Container(
+ height: 40,
+ width: 120,
+ padding: const EdgeInsets.all(5),
+ child: Column(
+ children: [
+ Row(
+ children: [
+ Text('State : ',
+ style: TextStyle(color: Colors.white)),
+ Text(_sublayerData[index].key,
+ style: TextStyle(color: Colors.white)),
+ ],
+ ),
+ Row(
+ children: [
+ Text('Population : ',
+ style: TextStyle(color: Colors.white)),
+ Text(_sublayerData[index].size.toStringAsFixed(0),
+ style: TextStyle(color: Colors.white)),
+ ],
+ ),
+ ],
+ ),
+ );
+ },
+ ),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class DataModel {
+ DataModel(this.key, this.color, this.size);
+
+ final String key;
+ final Color color;
+ final double size;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Selection
+
+You can enable shape sublayer selection using the [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/onSelectionChanged.html) callback along with setting the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/selectedIndex.html) property.
+
+The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/onSelectionChanged.html) callback is triggered when the user selects a shape by tapping or clicking, or when a shape is selected programmatically. It provides the index of the selected shape.
+
+If the selected shape is tapped or clicked again, the index will be passed as -1, indicating that the shape is unselected.
+
+N> It is applicable for both tile layer and shape layer.
+
+N> Refer the [`Shape selection`](https://help.syncfusion.com/flutter/maps/selection) section to know more about the selection feature.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+ late List _sublayerData;
+ late MapZoomPanBehavior _zoomPanBehavior;
+ int _selectedIndex = 0;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _sublayerData = [
+ DataModel('Algeria', Colors.green, 36232),
+ DataModel('Libya', Colors.teal, 34121),
+ DataModel('Egypt', Colors.blue, 43453),
+ DataModel('Mali', Colors.purple, 28123),
+ DataModel('Niger', Colors.indigo, 40111),
+ DataModel('Nigeria', Colors.purpleAccent, 30232),
+ DataModel('Chad', Colors.lightGreen, 48132),
+ DataModel('Sudan', Colors.redAccent, 52654),
+ DataModel('Mauritania', Colors.orange, 42231),
+ DataModel('South Sudan', Colors.lime, 40421),
+ DataModel('Ethiopia', Colors.greenAccent, 27198)
+ ];
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ dataCount: _sublayerData.length,
+ primaryValueMapper: (int index) => _sublayerData[index].key,
+ shapeColorValueMapper: (int index) => _sublayerData[index].color,
+ );
+ _zoomPanBehavior = MapZoomPanBehavior(
+ zoomLevel: 3,
+ focalLatLng: MapLatLng(38.9637, 35.2433),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ zoomPanBehavior: _zoomPanBehavior,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ selectedIndex: _selectedIndex,
+ onSelectionChanged: (int index) {
+ setState(() {
+ _selectedIndex = index;
+ });
+ },
+ selectionSettings: const MapSelectionSettings(
+ color: Colors.lime,
+ strokeWidth: 3,
+ strokeColor: Colors.black,
+ ),
+ ),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class DataModel {
+ DataModel(this.key, this.color, this.size);
+
+ final String key;
+ final Color color;
+ final double size;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Marker
+
+You can show markers at any position on the Flutter Maps by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) property.
+
+The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/initialMarkersCount.html) property is null.
+
+N> It is applicable for both tile layer and shape layer.
+
+N>
+* Refer to the [`Marker`](https://help.syncfusion.com/flutter/maps/markers) section to know more about the marker feature.
+* Refer to the [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip) section to know more about the tooltip feature.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource _shapeSource;
+ late MapShapeSource _sublayerSource;
+ late List _sublayerData;
+ late MapZoomPanBehavior _zoomPanBehavior;
+ late List _markerData;
+
+ @override
+ void initState() {
+ super.initState();
+ _shapeSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "continent",
+ );
+
+ _markerData = [
+ MapLatLng(28.0339, 1.6596),
+ MapLatLng(26.3351, 17.2283),
+ MapLatLng(26.8208, 30.8025),
+ MapLatLng(17.6078, 8.0817),
+ MapLatLng(9.0820, 8.6753),
+ MapLatLng(9.1450, 40.4897),
+ MapLatLng(15.4542, 18.7322),
+ MapLatLng(6.8770, 31.3070),
+ MapLatLng(21.0079, -10.9408),
+ MapLatLng(12.8628, 30.2176),
+ ];
+
+ _sublayerData = [
+ DataModel('Algeria', Colors.green, 36232),
+ DataModel('Libya', Colors.teal, 34121),
+ DataModel('Egypt', Colors.blue, 43453),
+ DataModel('Mali', Colors.purple, 28123),
+ DataModel('Niger', Colors.indigo, 40111),
+ DataModel('Nigeria', Colors.purpleAccent, 30232),
+ DataModel('Chad', Colors.lightGreen, 48132),
+ DataModel('Sudan', Colors.redAccent, 52654),
+ DataModel('Mauritania', Colors.orange, 42231),
+ DataModel('South Sudan', Colors.lime, 40421),
+ DataModel('Ethiopia', Colors.greenAccent, 27198)
+ ];
+
+ _sublayerSource = MapShapeSource.asset(
+ 'assets/africa.json',
+ shapeDataField: 'name',
+ dataCount: _sublayerData.length,
+ primaryValueMapper: (int index) => _sublayerData[index].key,
+ shapeColorValueMapper: (int index) => _sublayerData[index].color,
+ );
+ _zoomPanBehavior = MapZoomPanBehavior(
+ zoomLevel: 3,
+ focalLatLng: MapLatLng(38.9637, 35.2433),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: _shapeSource,
+ zoomPanBehavior: _zoomPanBehavior,
+ sublayers: [
+ MapShapeSublayer(
+ source: _sublayerSource,
+ initialMarkersCount: _markerData.length,
+ markerBuilder: (BuildContext context, int index) {
+ return MapMarker(
+ latitude: _markerData[index].latitude,
+ longitude: _markerData[index].longitude,
+ iconColor: Colors.white,
+ iconStrokeWidth: 2,
+ iconStrokeColor: Colors.black,
+ iconType: MapIconType.triangle,
+ size: Size(15, 15),
+ );
+ },
+ markerTooltipBuilder: (BuildContext context, int index) {
+ return Padding(
+ padding: EdgeInsets.all(10),
+ child: Text(_sublayerData[index].key,
+ style: TextStyle(color: Colors.white)),
+ );
+ },
+ ),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class DataModel {
+ DataModel(this.key, this.color, this.size);
+
+ final String key;
+ final Color color;
+ final double size;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
N> You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps Sublayer example](https://flutter.syncfusion.com/#/maps/shape-layer/sublayer) that shows how to configure a Maps in Flutter.
\ No newline at end of file
diff --git a/Flutter/maps/shape.md b/Flutter/maps/shape.md
index a935dc313..234bf4b66 100644
--- a/Flutter/maps/shape.md
+++ b/Flutter/maps/shape.md
@@ -1,547 +1,547 @@
----
-layout: post
-title: Shape Colors in Flutter Maps | Syncfusion®
-description: Learn about shape color customization in Syncfusion® Flutter Maps (SfMaps), including fill colors, color mapping, selection colors, and styling options.
-platform: flutter
-control: SfMaps
-documentation: ug
----
-
-# Shape Colors in Flutter Maps (SfMaps)
-
-This section explains about shapes and how to apply colors to the shapes based on specific values in the Flutter maps.
-
-## Loading progress indicator
-
-You can notify the user that the map is being loaded using the [`MapShapeLayer.loadingBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/loadingBuilder.html). It returns the widget which will be visible until the map is loaded.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'continent',
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.all(15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- loadingBuilder: (BuildContext context) {
- return Container(
- height: 25,
- width: 25,
- child: const CircularProgressIndicator(
- strokeWidth: 3,
- ),
- );
- },
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Shape color
-
-You can apply color, stroke color and stroke width to the shapes using the [`MapShapeLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/color.html), [`MapShapeLayer.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/strokeColor.html) and [`MapShapeLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/strokeWidth.html) properties respectively.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'continent',
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.all(15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- color: Colors.blue[100],
- strokeColor: Colors.blue,
- strokeWidth: 2,
- ),
- ],
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-Using SfMapsTheme
-
-You can also customize the appearance of the shape using [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html):
-
-* **Color** - Change the color of the shapes using the [`SfMapsThemeData.layerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/layerColor.html) property.
-* **Stroke color** - Change the stroke color of the shapes using the [`SfMapsThemeData.layerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/layerStrokeColor.html) property.
-* **Stroke width** - Change the stroke width of the shapes using the [`SfMapsThemeData.layerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/layerStrokeWidth.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).
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-import 'package:syncfusion_flutter_core/theme.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'continent',
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.all(15),
- child: SfMapsTheme(
- data: SfMapsThemeData(
- layerColor: Colors.blue[100],
- layerStrokeColor: Colors.blue,
- layerStrokeWidth: 2,
- ),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Hover color
-
-You can apply hover color, stroke color and stroke width to the shapes in the web platform using the [`SfMapsThemeData.shapeHoverColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/shapeHoverColor.html), [`SfMapsThemeData.shapeHoverStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/shapeHoverStrokeColor.html) and [`SfMapsThemeData.shapeHoverStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/shapeHoverStrokeWidth.html) properties respectively.
-
-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).
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-import 'package:syncfusion_flutter_core/theme.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'continent',
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.all(15),
- child: SfMapsTheme(
- data: SfMapsThemeData(
- shapeHoverColor: Colors.red[800],
- shapeHoverStrokeColor: Colors.black,
- shapeHoverStrokeWidth: 2,
- ),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- ),
- ],
- ),
- ),
- ),
- );
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Applying colors based on the data
-
-To learn more about how to customize the colors in Flutter Maps, you can watch this video.
-
-
-
-
-If you return a color from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), then the color will be applied to the respective shape straightaway.
-
-If you return a value of different type other than the color from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), then you must set the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property which is a collection of [`MapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper-class.html) to apply colors for the respective shapes.
-
-N> You can show legend using the [`MapShapeLayer.legend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/legend.html) property. The icons color of the legend is applied based on the colors returned in the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) property and the text will be taken from the [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html). It is possible to customize the legend icons color and text using the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = const [
- Model('Asia', Color.fromRGBO(60, 120, 255, 0.8)),
- Model('Africa', Color.fromRGBO(51, 102, 255, 0.8)),
- Model('Europe', Color.fromRGBO(0, 57, 230, 0.8)),
- Model('South America', Color.fromRGBO(0, 51, 204, 0.8)),
- Model('Australia', Color.fromRGBO(0, 45, 179, 0.8)),
- Model('North America', Color.fromRGBO(0, 38, 153, 0.8))
- ];
-
- dataSource = MapShapeSource.asset(
- 'assets/world_map.json',
- shapeDataField: 'continent',
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].country,
- shapeColorValueMapper: (int index) => data[index].color,
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Center(
- child: Container(
- height: 350,
- child: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(
- source: dataSource,
- ),
- ],
- ),
- ),
- )),
- );
- }
-}
-
-class Model {
- const Model(this.country, this.color);
-
- final String country;
- final Color color;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Equal color mapping
-
-You can apply color to the shape by comparing a value that returns from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) with the [`MapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/value.html). For the matched values, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('India', "Low"),
- Model('United States of America', "High"),
- Model('Pakistan', "Low"),
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "name",
- dataCount: data.length,
- primaryValueMapper: (int index) {
- return data[index].country;
- },
- shapeColorValueMapper: (int index) {
- return data[index].storage;
- },
- shapeColorMappers: [
- MapColorMapper(value: "Low", color: Colors.red),
- MapColorMapper(value: "High", color: Colors.green)
- ],
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(source: dataSource),
- ],
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.country, this.storage);
-
- final String country;
- final String storage;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Range color mapping
-
-You can apply color to the shape based on whether the value returned from [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) falls within the [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) range. Then, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('India', 280),
- Model('United States of America', 190),
- Model('Kazakhstan', 37),
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "name",
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].country,
- shapeColorValueMapper: (int index) => data[index].count,
- shapeColorMappers: [
- MapColorMapper(from: 0, to: 100, color: Colors.red),
- MapColorMapper(from: 101, to: 300, color: Colors.green)
- ],
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(source: dataSource),
- ],
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.country, this.count);
-
- final String country;
- final double count;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Opacity
-
-You can apply the maximum and minimum opacity to the shape or [`bubbles`](https://help.syncfusion.com/flutter/maps/bubble) while using [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) properties.
-
-The shapes or bubbles with the lowest value (from) will be applied [`minOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/minOpacity.html) and the shapes or bubbles with the highest value (to) will be applied [`maxOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/maxOpacity.html). The shapes or bubbles with values in-between the range will get an opacity based on their respective value.
-
-{% tabs %}
-{% highlight Dart %}
-
-import 'package:flutter/material.dart';
-import 'package:syncfusion_flutter_maps/maps.dart';
-
-class MapsExample extends StatefulWidget {
- @override
- _MapsExampleState createState() => _MapsExampleState();
-}
-
-class _MapsExampleState extends State {
- late List data;
- late MapShapeSource dataSource;
-
- @override
- void initState() {
- data = [
- Model('India', 280),
- Model('United States of America', 190),
- Model('Kazakhstan', 37),
- ];
-
- dataSource = MapShapeSource.asset(
- "assets/world_map.json",
- shapeDataField: "name",
- dataCount: data.length,
- primaryValueMapper: (int index) => data[index].country,
- shapeColorValueMapper: (int index) => data[index].count,
- shapeColorMappers: [
- MapColorMapper(
- from: 0,
- to: 100,
- color: Colors.red,
- minOpacity: 0.2,
- maxOpacity: 0.4,
- ),
- MapColorMapper(
- from: 101,
- to: 300,
- color: Colors.green,
- minOpacity: 0.4,
- maxOpacity: 0.6,
- ),
- ],
- );
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Padding(
- padding: EdgeInsets.only(left: 15, right: 15),
- child: SfMaps(
- layers: [
- MapShapeLayer(source: dataSource),
- ],
- ),
- ),
- );
- }
-}
-
-class Model {
- const Model(this.country, this.count);
-
- final String country;
- final double count;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-N>
-* Refer to the [`MapShapeSource.bubbleColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleColorMappers.html) property for setting the bubble colors based on specific values. You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps Shapes example](https://flutter.syncfusion.com/#/maps/shape-layer/range-color-mapping) that shows how to configure a Maps in Flutter.
+---
+layout: post
+title: Shape Colors in Flutter Maps | Syncfusion®
+description: Learn about shape color customization in Syncfusion® Flutter Maps (SfMaps), including fill colors, color mapping, selection colors, and styling options.
+platform: flutter
+control: SfMaps
+documentation: ug
+---
+
+# Shape Colors in Flutter Maps (SfMaps)
+
+This section explains about shapes and how to apply colors to the shapes based on specific values in the Flutter Maps.
+
+## Loading progress indicator
+
+You can notify the user that the Flutter Maps is being loaded using the [`MapShapeLayer.loadingBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/loadingBuilder.html). It returns the widget which will be visible until the map is loaded.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'continent',
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.all(15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ loadingBuilder: (BuildContext context) {
+ return Container(
+ height: 25,
+ width: 25,
+ child: const CircularProgressIndicator(
+ strokeWidth: 3,
+ ),
+ );
+ },
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Shape color
+
+You can apply color, stroke color and stroke width to the shapes using the [`MapShapeLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/color.html), [`MapShapeLayer.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/strokeColor.html) and [`MapShapeLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/strokeWidth.html) properties respectively.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'continent',
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.all(15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ color: Colors.blue[100],
+ strokeColor: Colors.blue,
+ strokeWidth: 2,
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+Using SfMapsTheme
+
+You can also customize the appearance of the shape using [`SfMapsTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsTheme-class.html):
+
+* **Color** - Change the color of the shapes using the [`SfMapsThemeData.layerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/layerColor.html) property.
+* **Stroke color** - Change the stroke color of the shapes using the [`SfMapsThemeData.layerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/layerStrokeColor.html) property.
+* **Stroke width** - Change the stroke width of the shapes using the [`SfMapsThemeData.layerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/layerStrokeWidth.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).
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'continent',
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.all(15),
+ child: SfMapsTheme(
+ data: SfMapsThemeData(
+ layerColor: Colors.blue[100],
+ layerStrokeColor: Colors.blue,
+ layerStrokeWidth: 2,
+ ),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Hover color
+
+You can apply hover color, stroke color and stroke width to the shapes in the web platform using the [`SfMapsThemeData.shapeHoverColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/shapeHoverColor.html), [`SfMapsThemeData.shapeHoverStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/shapeHoverStrokeColor.html) and [`SfMapsThemeData.shapeHoverStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfMapsThemeData/shapeHoverStrokeWidth.html) properties respectively.
+
+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).
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'continent',
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.all(15),
+ child: SfMapsTheme(
+ data: SfMapsThemeData(
+ shapeHoverColor: Colors.red[800],
+ shapeHoverStrokeColor: Colors.black,
+ shapeHoverStrokeWidth: 2,
+ ),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Applying colors based on the data
+
+To learn more about how to customize the colors in Flutter Maps, you can watch this video.
+
+
+
+
+If you return a color from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), then the color will be applied to the respective shape straightaway.
+
+If you return a value of different type other than the color from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), then you must set the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property which is a collection of [`MapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper-class.html) to apply colors for the respective shapes.
+
+N> You can show legend using the [`MapShapeLayer.legend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/legend.html) property. The icons color of the legend is applied based on the colors returned in the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) property and the text will be taken from the [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html). It is possible to customize the legend icons color and text using the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = const [
+ Model('Asia', Color.fromRGBO(60, 120, 255, 0.8)),
+ Model('Africa', Color.fromRGBO(51, 102, 255, 0.8)),
+ Model('Europe', Color.fromRGBO(0, 57, 230, 0.8)),
+ Model('South America', Color.fromRGBO(0, 51, 204, 0.8)),
+ Model('Australia', Color.fromRGBO(0, 45, 179, 0.8)),
+ Model('North America', Color.fromRGBO(0, 38, 153, 0.8))
+ ];
+
+ dataSource = MapShapeSource.asset(
+ 'assets/world_map.json',
+ shapeDataField: 'continent',
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].country,
+ shapeColorValueMapper: (int index) => data[index].color,
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Container(
+ height: 350,
+ child: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(
+ source: dataSource,
+ ),
+ ],
+ ),
+ ),
+ )),
+ );
+ }
+}
+
+class Model {
+ const Model(this.country, this.color);
+
+ final String country;
+ final Color color;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Equal color mapping
+
+You can apply color to the shape by comparing a value that returns from the [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) with the [`MapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/value.html). For the matched values, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('India', "Low"),
+ Model('United States of America', "High"),
+ Model('Pakistan', "Low"),
+ ];
+
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "name",
+ dataCount: data.length,
+ primaryValueMapper: (int index) {
+ return data[index].country;
+ },
+ shapeColorValueMapper: (int index) {
+ return data[index].storage;
+ },
+ shapeColorMappers: [
+ MapColorMapper(value: "Low", color: Colors.red),
+ MapColorMapper(value: "High", color: Colors.green)
+ ],
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(source: dataSource),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.country, this.storage);
+
+ final String country;
+ final String storage;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Range color mapping
+
+You can apply color to the shape based on whether the value returned from [`shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) falls within the [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) range. Then, the [`MapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/color.html) will be applied to the respective shapes.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State {
+ late List data;
+ late MapShapeSource dataSource;
+
+ @override
+ void initState() {
+ data = [
+ Model('India', 280),
+ Model('United States of America', 190),
+ Model('Kazakhstan', 37),
+ ];
+
+ dataSource = MapShapeSource.asset(
+ "assets/world_map.json",
+ shapeDataField: "name",
+ dataCount: data.length,
+ primaryValueMapper: (int index) => data[index].country,
+ shapeColorValueMapper: (int index) => data[index].count,
+ shapeColorMappers: [
+ MapColorMapper(from: 0, to: 100, color: Colors.red),
+ MapColorMapper(from: 101, to: 300, color: Colors.green)
+ ],
+ );
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Padding(
+ padding: EdgeInsets.only(left: 15, right: 15),
+ child: SfMaps(
+ layers: [
+ MapShapeLayer(source: dataSource),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+class Model {
+ const Model(this.country, this.count);
+
+ final String country;
+ final double count;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Opacity
+
+You can apply the maximum and minimum opacity to the shape or [`bubbles`](https://help.syncfusion.com/flutter/maps/bubble) while using [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) properties.
+
+The shapes or bubbles with the lowest value (from) will be applied [`minOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/minOpacity.html) and the shapes or bubbles with the highest value (to) will be applied [`maxOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/maxOpacity.html). The shapes or bubbles with values in-between the range will get an opacity based on their respective value.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_maps/maps.dart';
+
+class MapsExample extends StatefulWidget {
+ @override
+ _MapsExampleState createState() => _MapsExampleState();
+}
+
+class _MapsExampleState extends State