In Maps, markers are a primary tool used to denote locations with precise latitude and longitude coordinates. The Syncfusion  Flutter Maps widget has built-in support to add markers on the  MapShapeLayer or  MapTileLayer. You can use any type of custom widget as a marker, or built-in shapes such as circles, diamonds, squares, and triangles.

In this blog, I am going to explain how to add markers and animate them. If you are new to our Flutter Maps widget, please refer to the following blog posts before proceeding:

• Introducing Flutter Maps Widget [Blog]
• Easily Visualize OpenStreetMaps and Bing Maps in Flutter [Blog]

Add an animated marker at load time

To add an animated marker at load time, we have to add an animated widget as a child of  MapMarker and start the animation in the  initState.

In the following example, I’ve animated the fourth index marker at load time.

class _LoadAnimatableMarkerAtLoadtime extends StatefulWidget {

@override

_LoadAnimatableMarkerAtLoadtimeState createState() =>

_LoadAnimatableMarkerAtLoadtimeState();

}

class _LoadAnimatableMarkerAtLoadtimeState

extends State<_LoadAnimatableMarkerAtLoadtime>

with SingleTickerProviderStateMixin {

late AnimationController _controller;

late CurvedAnimation _animation;

late Map<String, MapLatLng> _markers;

int _selectedMarkerIndex = 4;

@override

void initState() {

_controller = AnimationController(

vsync: this, duration: const Duration(milliseconds: 750));

_animation =

CurvedAnimation(parent: _controller, curve: Curves.easeOutBack);

_markers = <String, MapLatLng>{

'Chad'``: MapLatLng(15.454166, 18.732206),

'Nigeria'``: MapLatLng(9.081999, 8.675277),

'DRC'``: MapLatLng(-4.038333, 21.758663),

'CAR'``: MapLatLng(6.600281, 20.480205),

'Sudan'``: MapLatLng(12.862807, 30.217636),

'Kenya'``: MapLatLng(0.0236, 37.9062),

'Zambia'``: MapLatLng(-10.974129, 30.861397),

'Egypt'``: MapLatLng(25.174109, 28.776359),

'Algeria'``: MapLatLng(24.276672, 7.308186),

};

#flutter #mobile #desktop #maps