Latest source merged from Syncfusion

Flutter/datagrid/load-more.md

@@ -11,11 +11,11 @@ documentation: ug
 
 The datagrid provides support to display an interactive view when the grid reaches its maximum offset while scrolling down. You can use [loadMoreViewBuilder](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/loadMoreViewBuilder.html) builder to display the view at bottom of datagrid. 
 
-You should override the [DataGridSource.handleLoadMoreRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handleLoadMoreRows.html) method to load more rows and then notify the datagrid about the changes. The `DataGridSource.handleLoadMoreRows` can be called to load more rows from this builder by using the [loadMoreRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/LoadMoreRows.html) function which is passed as a parameter to this builder.
+You should override the [DataGridSource.handleLoadMoreRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handleLoadMoreRows.html) method to load more rows and then notify the datagrid about the changes. The `DataGridSource.handleLoadMoreRows` can be called to load more rows from this builder by using the [loadMoreRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/LoadMoreRows.html) function which is passed as a parameter to `loadMoreViewBuilder`.
 
 ## Infinite scrolling
 
-Infinite Scrolling is an approach that can be used to load more rows to the datagrid whenever the datagrid reaches the bottom without user interaction.
+Infinite Scrolling is an approach that can be used to load more rows to the datagrid whenever the datagrid reaches the bottom.
 
 The following example demonstrates infinite scrolling by showing the circular progress indicator until the rows are loaded when the datagrid reaches the bottom,
 
@@ -30,6 +30,9 @@ Widget build(BuildContext context) {
     source: employeeDataSource,
     loadMoreViewBuilder: (BuildContext context, LoadMoreRows loadMoreRows) {
       Future<String> loadRows() async {
+        // Call the loadMoreRows function to call the
+        // DataGridSource.handleLoadMoreRows method. So, additional
+        // rows can be added from handleLoadMoreRows method.
         await loadMoreRows();
         return Future<String>.value('Completed');
       }
@@ -198,6 +201,10 @@ Widget build(BuildContext context) {
                 child:
                     Text('LOAD MORE', style: TextStyle(color: Colors.white)),
                 onPressed: () async {
+                  // To avoid the "Error: setState() called after dispose():"
+                  // while scrolling the datagrid vertically and displaying the
+                  // load more view, current load more view is checked whether
+                  // loaded widget is mounted or not.
                   if (context is StatefulElement &&
                       context.state != null &&
                       context.state.mounted) {
@@ -205,7 +212,14 @@ Widget build(BuildContext context) {
                       showIndicator = true;
                     });
                   }
+                  // Call the loadMoreRows function to call the
+                  // DataGridSource.handleLoadMoreRows method. So, additional
+                  // rows can be added from handleLoadMoreRows method.
                   await loadMoreRows();
+                  // To avoid the "Error: setState() called after dispose():"
+                  // while scrolling the datagrid vertically and displaying the
+                  // load more view, current load more view is checked whether
+                  // loaded widget is mounted or not.
                   if (context is StatefulElement &&
                       context.state != null &&
                       context.state.mounted) {

Flutter/maps/bubble.md

@@ -104,6 +104,7 @@ void initState() {
 
 @override
 Widget build(BuildContext context) {
+  final ThemeData themeData = Theme.of(context);
   return Scaffold(
     body: Padding(
       padding: EdgeInsets.only(left: 15, right: 15),
@@ -117,7 +118,9 @@ Widget build(BuildContext context) {
                   child: Text('Continent : ' +
                      data[index].continent +
                      '\nTotal Countries : ' +
-                     data[index].countriesCount.toStringAsFixed(0)),
+                     data[index].countriesCount.toStringAsFixed(0),
+                     style: themeData.textTheme.caption
+                        .copyWith(color: themeData.colorScheme.surface)),
                );
             },
           ),

Flutter/maps/legend.md

@@ -174,6 +174,8 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
+![Bar shape legend](images/legend/bar-shape-legend.png)
+
 N>
 * Refer the [`MapLegend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html), for showing default legend.
 
@@ -242,6 +244,8 @@ class Model {
 {% endhighlight %}
 {% endtabs %}
 
+![Bar bubble legend](images/legend/bar-bubble-legend.png)
+
 N>
 * Refer the [`MapLegend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html), for showing default legend.
 
@@ -644,7 +648,8 @@ Widget build(BuildContext context) {
                   legend: MapLegend.bar(
                     MapElement.shape,
                     position: MapLegendPosition.bottom,
-                    overflowMode: MapLegendOverflowMode.wrap,
+                    edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center,
+                    overflowMode: MapLegendOverflowMode.scroll,
                   ),
                 )
               ],
@@ -665,6 +670,8 @@ class Model {
 {% endhighlight %}
 {% endtabs %}
 
+![Bar legend overflow mode](images/legend/bar-legend-overflow-mode.gif)
+
 N>
 * Refer the [`iconSize`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html), for setting the size of the icon.
 
@@ -672,12 +679,12 @@ N>
 
 N> Legend toggling is not applicable for bar type legend.
 
-You can enable toggling the legend items and the corresponding shapes or bubbles using the [`enableToggleInteraction`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html). The default value of the [`enableToggleInteraction`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `false`. You can customize the toggled shapes or bubbles using the following properties:
+You can enable toggling the legend items and the corresponding shapes or bubbles using the [`enableToggleInteraction`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html). The default value of the [`enableToggleInteraction`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `false`. You can customize the toggled shapes or bubbles using the following properties:
 
-* **Toggled item color** - Change the color for the toggled legend item's icon and it's shape or bubble using the [`toggledItemColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
-* **Toggled item stroke color** - Change the stroke color which applies to the toggled legend item's shape or bubble using the [`toggledItemStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
-* **Toggled item stroke width** - Change the stroke width which applies to the toggled legend item's shape or bubble using the [`toggledItemStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
-* **Toggled item opacity** - Change the opacity of the toggled legend item's shape or bubble using the [`toggledItemOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
+* **Toggled item color** - Change the color for the toggled legend item's icon and it's shape or bubble using the [`toggledItemColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
+* **Toggled item stroke color** - Change the stroke color which applies to the toggled legend item's shape or bubble using the [`toggledItemStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
+* **Toggled item stroke width** - Change the stroke width which applies to the toggled legend item's shape or bubble using the [`toggledItemStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
+* **Toggled item opacity** - Change the opacity of the toggled legend item's shape or bubble using the [`toggledItemOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html).
 
 {% tabs %}
 {% highlight Dart %}
@@ -1044,9 +1051,9 @@ class Model {
 
 You can customize the legend items using the following properties.
 
-* **iconType** - Used to change the icon shape. The default value of the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `MapIconType.circle`. The possible values are `circle`, `rectangle`, `triangle`, and `diamond`.
-* **iconSize** - Used to change the size of the icon. The default value of [`iconSize`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `Size(12.0, 12.0)`.
-* **spacing** - Used to provide space between the each legend items. The default value of the [`spacing`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `10.0`.
+* **iconType** - Used to change the icon shape. The default value of the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `MapIconType.circle`. The possible values are `circle`, `rectangle`, `triangle`, and `diamond`.
+* **iconSize** - Used to change the size of the icon. The default value of [`iconSize`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `Size(12.0, 12.0)`.
+* **spacing** - Used to provide space between the each legend items. The default value of the [`spacing`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) is `10.0`.
 * **direction** - Used to arrange the legend items in either horizontal or vertical direction. The default value of [`direction`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) property is `horizontal`, if the value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) property is `top`, `bottom` and defaults to `vertical`, if the value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) property is `left` or `right`.
 * **padding** - Used to set padding around the legend. The default value of the [`padding`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.html) property is `EdgeInsets.all(10.0)`.
 
@@ -1221,6 +1228,8 @@ class Model {
 {% endhighlight %}
 {% endtabs %}
 
+![Bar legend solid type](images/legend/bar-legend-solid-type.png)
+
 ### Gradient
 
 You can set gradient color for the bar by using the [MapLegendPaintingStyle.gradient](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegendPaintingStyle-class.html).
@@ -1245,27 +1254,23 @@ void initState() {
       Model('China', 148)
    ];
 
-   _shapeSource = MapShapeSource.asset("assets/world_map.json",
-        shapeDataField: "name",
-        dataCount: _data.length,
-        primaryValueMapper: (int index) => _data[index].country,
-        shapeColorValueMapper: (int index) => _data[index].density,
-        shapeColorMappers: [
-          MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'),
-          MapColorMapper(
-              from: 101, to: 200, color: Colors.green, text: '100 - 200/km'),
-          MapColorMapper(
-              from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'),
-          MapColorMapper(
-              from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'),
-          MapColorMapper(
-              from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'),
-          MapColorMapper(
-              from: 501,
-              to: 600,
-              color: Colors.deepPurple,
-              text: '500 - 600/km'),
-        ]);
+    _shapeSource = MapShapeSource.asset("assets/world_map.json",
+           shapeDataField: "name",
+           dataCount: _data.length,
+           primaryValueMapper: (int index) => _data[index].country,
+           shapeColorValueMapper: (int index) => _data[index].density,
+           shapeColorMappers: [
+             MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'),
+             MapColorMapper(
+                 from: 101, to: 200, color: Colors.green, text: '100 - 200/km'),
+             MapColorMapper(
+                 from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'),
+             MapColorMapper(
+                 from: 301,
+                 to: 600,
+                 color: Colors.deepPurple,
+                 text: '300 - 600/km'),
+    ]);
 }
 
 @override
@@ -1282,6 +1287,8 @@ Widget build(BuildContext context) {
                   source: _shapeSource,
                   legend: MapLegend.bar(
                     MapElement.shape,
+                    labelsPlacement: MapLegendLabelsPlacement.betweenItems,
+                    edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center,
                     segmentPaintingStyle: MapLegendPaintingStyle.gradient,
                   ),
                 )
@@ -1303,14 +1310,16 @@ class Model {
 {% endhighlight %}
 {% endtabs %}
 
+![Bar legend gradient type](images/legend/bar-legend-gradient-type.png)
+
 ## Bar legend appearance customization
 
 You can customize the legend items using the following properties.
 
-* **segmentSize** - Used to change the size of individual bar segments. When gradient paint style is applied, [`segmentSize`] argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will update the whole bar.
-* **labelsPlacement** - Used to place the labels either between the segments or on the segments. The default value of the [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will be `MapLegendLabelsPlacement.betweenItems` when setting range color mapper without setting color mapper text property. Otherwise, it will be `MapLegendLabelsPlacement.onItem`.
-* **labelOverflow** - Used to remove or trim the legend labels based on the bar legend size.The default value of the [`labelOverflow`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will be `MapLabelOverflow.hide`. 
-* **edgeLabelsPlacement** - Used to place the edge labels either inside or outside of the bar legend. The default value of the [`edgeLabelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) argument in the constructor(https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will be `MapLegendEdgeLabelsPlacement.inside`.
+* **segmentSize** - Used to change the size of individual bar segments. When gradient paint style is applied, `segmentSize` argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will update the whole bar.
+* **labelsPlacement** - Used to place the labels either between the segments or on the segments. The default value of the [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will be `MapLegendLabelsPlacement.betweenItems` when setting range color mapper without setting color mapper text property. Otherwise, it will be `MapLegendLabelsPlacement.onItem`.
+* **labelOverflow** - Used to remove or trim the legend labels based on the bar legend size.The default value of the [`labelOverflow`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will be `MapLabelOverflow.hide`.
+* **edgeLabelsPlacement** - Used to place the edge labels either inside or outside of the bar legend. The default value of the [`edgeLabelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) argument in the [`constructor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/MapLegend.bar.html) will be `MapLegendEdgeLabelsPlacement.inside`.
 * **spacing** - Used to provide space between the each legend items. The default value of the [`spacing`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/spacing.html) is `2.0`. This is not applicable for gradient legend.
 * **direction** - Used to arrange the legend items in either horizontal or vertical direction. The default value of [`direction`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/direction.html) property is `horizontal`, if the value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/position.html) property is `top`, `bottom` and defaults to `vertical`, if the value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/position.html) property is `left` or `right`.
 * **padding** - Used to set padding around the legend. The default value of the [`padding`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/padding.html) property is `EdgeInsets.all(10.0)`.
@@ -1335,27 +1344,23 @@ void initState() {
       Model('China', 148)
    ];
 
-   _shapeSource = MapShapeSource.asset("assets/world_map.json",
-        shapeDataField: "name",
-        dataCount: _data.length,
-        primaryValueMapper: (int index) => _data[index].country,
-        shapeColorValueMapper: (int index) => _data[index].density,
-        shapeColorMappers: [
-          MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'),
-          MapColorMapper(
-              from: 101, to: 200, color: Colors.green, text: '100 - 200/km'),
-          MapColorMapper(
-              from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'),
-          MapColorMapper(
-              from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'),
-          MapColorMapper(
-              from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'),
-          MapColorMapper(
-              from: 501,
-              to: 600,
-              color: Colors.deepPurple,
-              text: '500 - 600/km'),
-        ]);
+    _shapeSource = MapShapeSource.asset("assets/world_map.json",
+           shapeDataField: "name",
+           dataCount: _data.length,
+           primaryValueMapper: (int index) => _data[index].country,
+           shapeColorValueMapper: (int index) => _data[index].density,
+           shapeColorMappers: [
+             MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'),
+             MapColorMapper(
+                 from: 101, to: 200, color: Colors.green, text: '100 - 200/km'),
+             MapColorMapper(
+                 from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'),
+             MapColorMapper(
+                 from: 301,
+                 to: 600,
+                 color: Colors.deepPurple,
+                 text: '300 - 600/km'),
+    ]);
 }
 
 @override
@@ -1372,7 +1377,6 @@ Widget build(BuildContext context) {
                   source: _shapeSource,
                   legend: MapLegend.bar(
                     MapElement.shape,
-                    segmentSize: Size(20, 5),
                     labelsPlacement: MapLegendLabelsPlacement.betweenItems,
                     edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center,
                     segmentPaintingStyle: MapLegendPaintingStyle.gradient,
@@ -1395,4 +1399,6 @@ class Model {
 }
 
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
+
+![Bar legend customization](images/legend/bar-legend-customization.png)

Flutter/maps/shape-sublayer.md

@@ -27,7 +27,7 @@ void initState() {
   super.initState();
 
   _sublayerSource = MapShapeSource.asset(
-      'assets/australia.json',
+      'assets/africa.json',
       shapeDataField: 'name',
   );
 }
@@ -56,6 +56,8 @@ return Scaffold(
 {% endhighlight %}
 {% endtabs %}
 
+![Tile sublayer support](images/shape-sublayer/tile-sublayer.png)
+
 N>
 * Refer the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html), for adding tile layer in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html).
 
@@ -109,5 +111,7 @@ return Scaffold(
 {% endhighlight %}
 {% endtabs %}
 
+![Shape sublayer support](images/shape-sublayer/shape-sublayer.png)
+
 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).