Merge pull request #300 from syncfusion-content/FLUT-6532-Map-changes

JayavigneshwaranG · web-flow · commit e54a39b7dfe0 · 2022-06-02T11:59:43.000+05:30
FLUT-6532 - [Others] Fixed the map animation sample issue
diff --git a/Flutter/maps/vector-layers/arc-layer.md b/Flutter/maps/vector-layers/arc-layer.md
@@ -529,77 +529,85 @@ By default, there will not be any animation.
 {% tabs %}
 {% highlight Dart %}
 
-late MapZoomPanBehavior zoomPanBehavior;
-late MapShapeSource dataSource;
-late List<DataModel> data;
-late AnimationController animationController;
-late Animation animation;
-
-@override
-void initState() {
-  data = <DataModel>[
-    DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
-    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
-    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)),
-    DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
-    DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
-    DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
-  ];
-
-  dataSource = MapShapeSource.asset(
-    'assets/world_map.json',
-    shapeDataField: 'continent',
-  );
-  zoomPanBehavior = MapZoomPanBehavior(
-    zoomLevel: 4,
-    focalLatLng: MapLatLng(22.9734, 90.6569),
-  );
-
-  animationController = AnimationController(
-    duration: Duration(seconds: 3),
-    vsync: this,
-  );
-  animation = CurvedAnimation(
-    parent: animationController,
-    curve: Curves.easeInOut,
-  );
-  animationController.forward(from: 0);
-  super.initState();
-}
-
-@override
-void dispose() {
-  animationController.dispose();
-  super.dispose();
-}
-
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-    body: SfMaps(
-      layers: [
-        MapShapeLayer(
-          source: dataSource,
-          sublayers: [
-            MapArcLayer(
-              arcs: List<MapArc>.generate(
-                data.length,
-                (int index) {
-                  return MapArc(
-                    from: data[index].from,
-                    to: data[index].to,
-                  );
-                },
-              ).toSet(),
-              color: Colors.blue,
-              animation: animation,
-            ),
-          ],
-          zoomPanBehavior: zoomPanBehavior,
-        ),
-      ],
-    ),
-  );
+class AnimationSample extends StatefulWidget {
+  const AnimationSample({Key? key}) : super(key: key;
+  @override
+  State<AnimationSample> createState() => _AnimationSampleState();
+}
+
+class _AnimationSampleState extends State<AnimationSample> with TickerProviderStateMixin {
+  late MapZoomPanBehavior zoomPanBehavior;
+  late MapShapeSource dataSource;
+  late List<DataModel> data;
+  late AnimationController animationController;
+  late Animation<double> animation;
+
+  @override
+  void initState() {
+    data = <DataModel>[
+      DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)),
+      DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)),
+      DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)),
+      DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)),
+      DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)),
+      DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)),
+    ];
+
+    dataSource = MapShapeSource.asset(
+      'assets/world_map.json',
+      shapeDataField: 'continent',
+    );
+    zoomPanBehavior = MapZoomPanBehavior(
+      zoomLevel: 4,
+      focalLatLng: MapLatLng(22.9734, 90.6569),
+    );
+
+    animationController = AnimationController(
+      duration: Duration(seconds: 3),
+      vsync: this,
+    );
+    animation = CurvedAnimation(
+      parent: animationController,
+      curve: Curves.easeInOut,
+    );
+    animationController.forward(from: 0);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SfMaps(
+        layers: [
+          MapShapeLayer(
+            source: dataSource,
+            sublayers: [
+              MapArcLayer(
+                arcs: List<MapArc>.generate(
+                  data.length,
+                  (int index) {
+                    return MapArc(
+                      from: data[index].from,
+                      to: data[index].to,
+                    );
+                  },
+                ).toSet(),
+                color: Colors.blue,
+                animation: animation,
+              ),
+            ],
+            zoomPanBehavior: zoomPanBehavior,
+          ),
+        ],
+      ),
+    );
+  }
 }
 
 class DataModel {
