How to Integrate Maps in Flutter — Part 1 (UPDATED 2024)
FLUTTER AND PACKAGES HAVE BEEN UPGRADED TO THE LATEST VERSION (MAY 29, 2024)
Introduction
Hello everyone. Nowadays, many mobile applications feature various map components, both large and small. In this regard, there are paid map providers like Google, Yandex, Here, and Mapbox, as well as ongoing open-source projects. In this article, I will talk about the ‘flutter_map’ package, which I frequently use in projects developed with Flutter.
flutter_map is the Dart integration of Leaflet, an open-source JavaScript library for mobile-friendly interactive maps. Layers can be added to the map in the traditional way, and with recent updates, they can also be added as widgets. This allows for a broader customization of the map and its layers. In this article, I will explain, in a simple manner without going too deep, how to create a map component and add layers to it.
Adding the Packages
1- Editing the pubspec.yaml File
We add the desired version of the flutter_map and latlong2 libraries to our project from the pub.dev page as follows:
2- Granting Internet Permission for Android Devices
We need internet access to display the map. Therefore, we add the necessary permission information to the manifest file of our project ( <project root>/android/app/src/main/AndroidManifest.xml ):
After adding the package to our project and making the necessary adjustments, we are now ready to create our map component.
Creating the Map Component
1- Map Options
Before adding layers to a map component, we need to define the map options (MapOptions). In the options below, the latitude, longitude, and zoom level for the map’s starting point (center) are defined:
2- Adding a Baselayer
First, we need to add a baselayer to make the map more comprehensible. For this, we will use “Open Street Map,” an open-source map base:
3- Adding a Marker Layer
The marker layer allows you to display points with specified latitudes and longitudes on the map. Since we will be using the widget approach to display our points, we can define every object, from a floating action button to an icon, from text to a widget we add from another package. As this article is at the introductory level, I have chosen to define the FlutterLogo widget.
First, we need to define our points as a list of markers and add them under MarkerLayer within the layers of our FlutterMap widget:
Conclusion
Nowadays, location information appears in many areas, and the technologies that facilitate the display of this information are increasing day by day. Although there are many paid components (dependent on tokens or API keys), there are also open-source components. flutter_map is a completely free package that allows us to display simple or complex maps. In the upcoming articles, we will explore different and advanced features of this package. For this article, that’s all. You can access the sample project on GitHub. Have a great day full of ‘widgets’!
