Integrating Huawei Map kit using Flutter (Cross Platform) - Huawei Developers

Introduction
This article shows you to add a Huawei map to your application. We will learn how to implement Markers, Calculate distance, Show Path.

{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Map Kit Services
Huawei Map Kit provides easily to integrate map based functions into your apps, map kit currently supports more than 200 countries and 40+ languages. It supports UI elements such as markers, shapes, layers etc..! The plugin automatically handles access to adding markers and response to user gestures such as markers drag, clicks and allow user to interact with the map.
Currently HMS Map Kit supports below capabilities.
1. Map Display
2. Map Interaction
3. Map Drawing
Flutter setup
Refer this URL to setup Flutter.
Software Requirements
1. Android Studio 3.X
2. JDK 1.8 and later
3. SDK Platform 19 and later
4. Gradle 4.6 and later
Steps to integrate service
1. We need to register as a developer account in AppGallery Connect
2. Create an app by referring to Creating a Project and Creating an App in the Project
3. Set the data storage location based on current location.
4. Enabling Required Services: Map Kit.
5. Generating a Signing Certificate Fingerprint.
6. Configuring the Signing Certificate Fingerprint.
7. Get your agconnect-services.json file to the app root directory.

Development Process
Create Application in Android Studio.
1. Create Flutter project.
2. App level gradle dependencies. Choose inside project Android > app > build.gradle
Code:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
Root level gradle dependencies.
Code:
maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
Add the below permissions in Android Manifest file.
Code:
<manifest xlmns:android...>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application>
</manifest>
3. Add HMS Map kit plugin download using below URL.
https://developer.huawei.com/consum...y-V1/flutter-sdk-download-0000001050190693-V1
4. The first step is to add HMS Map flutter plugin as a dependency in the pubspec.yaml file.
Code:
name: hms_kits
description: A new Flutter application.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
huawei_map:
path: ../huawei_map/
cupertino_icons: ^1.0.0
dev_dependencies:
flutter_test:
sdk: flutter
5. Once we added plugins you need to run flutter packages get pub get.
6. Open main.dart file to create UI and business logics.
Create MAP Widget
Code:
class MapPage extends StatefulWidget {
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
HuaweiMapController _mapController;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Map"),
centerTitle: true,
backgroundColor: Colors.blueAccent,
),
body: Stack(
children: [
_buildMap(),
],
),
);
}
_buildMap() {
return HuaweiMap(
initialCameraPosition: CameraPosition(
target: LatLng(12.9569, 77.7011),
zoom: 10.0,
bearing: 30,
),
onMapCreated: (HuaweiMapController controller) {
_mapController = controller;
},
mapType: MapType.normal,
tiltGesturesEnabled: true,
buildingsEnabled: true,
compassEnabled: true,
zoomControlsEnabled: true,
rotateGesturesEnabled: true,
myLocationButtonEnabled: true,
myLocationEnabled: true,
trafficEnabled: true,
);
}
}
onMapCreated: method that is called on map creation and takes a HuaweiMapController as a parameter.
initialCameraPosition: required parameter that sets the starting camera position.
mapController: manages camera function (position, animation, zoom).
Marker single location on the map, Huawei maps provides markers. These markers use a standard icon we can also customize icon.
Code:
void createMarker(LatLng latLng) {
Marker marker;
marker = new Marker(
markerId: MarkerId('Welcome'),
position: LatLng(latLng.lat, latLng.lng),
icon: BitmapDescriptor.defaultMarker);
setState(() {
_markers.add(marker);
});
}
//Custom Icon
void _customMarker(BuildContext context) async {
if (_markerIcon == null) {
final ImageConfiguration imageConfiguration =
createLocalImageConfiguration(context);
BitmapDescriptor.fromAssetImage(
imageConfiguration, 'assets/images/icon.png')
.then(_updateBitmap);
}
}
void _updateBitmap(BitmapDescriptor bitmap) {
setState(() {
_markerIcon = bitmap;
});
}
Circle are great when you need to make mark on the map from certain radius, such as bounded area.
Code:
void _createCircle() {
_circles.add(Circle(
circleId: CircleId('Circle'),
center: latLng,
radius: 5000,
fillColor: Colors.redAccent.withOpacity(0.5),
strokeColor: Colors.redAccent,
strokeWidth: 3,
));
}
Polygon defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region.
Code:
void _showPolygone() {
if (_polygon.length > 0) {
setState(() {
_polygon.clear();
});
} else {
_polygon.add(Polygon(
polygonId: PolygonId('Path'),
points: polyList,
strokeWidth: 5,
fillColor: Colors.yellow.withOpacity(0.15),
strokeColor: Colors.red));
}
}
For more, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204447867116350085