Implement HMS Map Kit with Flutter

Map Kit with Flutter

Introduction

Map Kit provide developers an SDK to map development. With Map Kit, you can easily integrate map functions into your project. It’s available more than 200 countries and regions.

HUAWEI Map Kit uses the WGS 84 GPS coordinate system. You can display buildings, roads, control user intaction (rotate, zoom in out etc.), add markers, polylines, polygons, circles to your map using Map Kit.

In this article, I would like to show you how to integrate the Map kit with Flutter. Map Kit has Flutter plugin, we can use it in our project.

Create a project in AppGallery Connect

If you don’t have a project in AppGallery Connect. Click “Add Project” button on my projects section and create new project.

Create a project in AppGallery Connect

Add an app to your project in Appgallery Connect

Click the “Add Application” button in your project and fill in the fields. Make sure your package name you filled should be same your project package name.

Add an app to your project in Appgallery Connect

Setting Data Storage Location

You should set data storage location before using Map kit.

Setting Data Storage Location

Enable Map Kit

Make sure you Map Kit is enabled in Manage APIs section. By default, it’s already enabled.

Enable Map Kit

Generate SHA-256 Key and add it on AppGallery Connect

1. Open your android project in Flutter project into the Android studio.
2. Click on the Gradle section on the right panel.
3. Double click to APP_MODULE -> Tasks -> Android -> signingReport

Generate SHA Fingerprint

SHA-256 fingerprint will be generate. Copy and paste into SHA-256 fingerprint on the project settings in the AppGallery Connect.

Project settings screen on AppGallery Console

Integrate HMS SDK

Step 1: Download agconnect-services.json file and copy into the

your_project ->android->app

Project settings screen on AppGallery Console

Your project structure should seem like below after the copied file.

Copy agconnect-services.json into your project

Step 2: Add dependencies to your gradle file

• build.gradle (Project Level)

• build.gradle (App Level)

Step 3: That’s all. Build gradle again. HMS will be implemented on your project.

Note: Your app’s minSdkVersion should be minumum 19. Map kit Map Kit minumum SDK support is 19.

Add permissions in the AndroidManifest.xml file

Add Map Kit plugin into your project

As we know, normally we download Flutter plugins from pubdev but HMS plugins aren’t available in pubdev. They will publish in pubdev later. You can find them here.

Step 1: Download Map Kit plugin. Click here to download.

Download Map Kit plugin

Step 2: Create a folder that called “hms” on root directory and extract the rar file you downloaded into the folder.

Step 3: Add dependencies in the pubspecy.yaml file and click “Pub get“ button.

Add dependencies in the pubspecy.yaml file and click “Pub get“ button

Everythings is ready. Now we can start coding. Import classes you will use.

Define variables. We will use the mapController for move camera on the map.

HuaweiMap widget has many features. You can easily customize it as you want. onMapCreated function is triggered after the map is created. You can listen camera moves, clicks on the map or modify visibility of gestures, trafics, or location and zoom buttons.

Move Camera

You can move or animate camera using _mapController.

You can create markers, polylines, polygons and circles as below and add it into your map. Basically all map widgets similar to each other. You need give them location and id. After that call setState and add into your map.

Add Marker

Draw Polygon

Draw Polyline

Draw circle

Full code

Run

That’s all. You implemented Map Kit to your Flutter project.

Huawei Map

Conclusion

In this article, you learned how implement Map Kit with Flutter.

You can find more information about Map Kit below the links.

Guide

Plugin

ekrmh/flutter_hms_map_sample

That is all.

Thanks.