HMS Map Kit in Flutter

Today’s article I am going to discuss about HMS Map Kit integration in Flutter. To integrate HMS Map Kit in Flutter we need Flutter Map Plugin.

Let’s know about Flutter Map Plugin.

The Flutter Map Plugin enables communication between the HMS Core Map SDK and Flutter platform. The Map SDK covers map data of more than 200 countries and regions, and supports hundreds of languages. With this SDK, you can easily integrate map-based functions into your apps.

Integration process

Let’s discuss integration steps here.

1. Create project in App Gallery Connect and provide relevant information such as app name, Data Storage, SHA 256 Key, package name etc. Enable Map Kit in Manage API Section. Download agconnect-services.json file.
2. Add “agconnect-services.json” file under “app” directory.
3. Open project level “build.gradle” file.

Add the maven repositories under “buildscript” and “allprojects” section. Add the classpath in dependency section.

4. Open the build.gradle file in the android/app directory of your Flutter project.

Add the AppGallery Connect plugin configuration

5. Download the Flutter Map Plugin and decompress it.

Add downloaded file into parent directory of the project.

6. Open the pubspec.yaml.

Declare plugin path in pubspec.yaml file under dependencies.

Click pub get to pull the dependency.

7. Open the dart file under lib folder.

Let’s start the coding

That’s it.

Result

Conclusion

Map Kit continuously optimizes and enriches the map detail display capability. For example, Map Kit can clearly show green fields and vegetation information when the map is zoomed out. It can also display most suitable POIs and road network information in different scales based on the POI attributes and regional road network differences. Map Kit supports gestures including zoom, rotation, moving, and tilt gestures to ensure smooth interaction experience.

Reference

Map Kit

Thank You.