Intermediate: Integration of Huawei map kit and Location kit in DeliveryApp in Flutter (Cross platform) - Huawei Developers

Introduction​In this article, we will be integrating Huawei Map kit and Location kit in Food Delivery application. Huawei Map kit currently allows developer to create map, interactions with map and drawing on a map.
We will be covering all three aspects as the delivery application we need to create map and we need to draw polyline from delivery agent location to user location and on interaction also we are providing i.e. on click the marker we are show popup on the map with details as shown in the result section below.
Development Overview​You need to install Flutter and Dart plugin in IDE and I assume that you have prior knowledge about the Flutter and Dart.
Hardware Requirements​
A computer (desktop or laptop) running Windows 10.
A Huawei phone (with the USB cable), which is used for debugging.
Software Requirements​
Java JDK 1.7 or later.
Android studio software or Visual Studio or Code installed.
HMS Core (APK) 4.X or later.
Integration process​Step 1. Create flutter project
{
"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"
}
Step 2. Add the App level gradle dependencies. Choose inside project Android > app > build.gradle.​
Code:
apply plugin:'com.huawei.agconnect'
Add root level gradle dependencies.
Code:
maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
Add app level gradle dependencies.
Code:
implementation 'com.huawei.hms:maps:5.0.3.302'
implementation 'com.huawei.hms:location:5.0.0.301'
Step 3: Add the below permissions in Android Manifest file.
Code:
<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_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="com.huawei.hms.permission.ACTIVITY_RECOGNITION"/>
Step 4: Add below path in pubspec.yaml file under dependencies.
Step 5 : Create a project in AppGallery Connect.​pubspec.yaml​
Code:
name: sample_one
description: A new Flutter application.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
huawei_map:
path: ../huawei_map/
huawei_location:
path: ../huawei_location/
http: ^0.12.2
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
How to check required permissions are granted or not?​
Code:
void hasPermission() async {
try {
bool status = await permissionHandler.hasLocationPermission();
setState(() {
message = "Has permission: $status";
if (status) {
getLastLocationWithAddress();
//requestLocationUpdatesByCallback();
} else {
requestPermission();
}
});
} catch (e) {
setState(() {
message = e.toString();
});
}
}
How do I request permission?​
Code:
void requestPermission() async {
try {
bool status = await permissionHandler.requestLocationPermission();
setState(() {
message = "Is permission granted $status";
});
} catch (e) {
setState(() {
message = e.toString();
});
}
}
How do I get location data?​
Code:
void getLastLocationWithAddress() async {
try {
HWLocation location =
await locationService.getLastLocationWithAddress(locationRequest);
setState(() {
message = location.street +
" " +
location.city +
" " +
location.state +
" " +
location.countryName +
" " +
location.postalCode;
print("Location: " + message);
});
} catch (e) {
setState(() {
message = e.toString();
print(message);
});
}
}
main.dart​
Code:
import 'package:flutter/material.dart';
import 'package:huawei_map/map.dart';
import 'package:sample_one/mapscreen2.dart';
import 'package:sample_one/order.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Orders'),
),
body: MyApp(),
),
debugShowCheckedModeBanner: false,
);
}
}
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List orders = [
Order(
imageUrl:
"https://www.namesnack.com/images/namesnack-pizza-business-names-5184x3456-20200915.jpeg",
name: "Veg Pizza Special",
username: "Naresh K",
location: new LatLng(12.9698, 77.7500)),
Order(
imageUrl:
"https://www.pizzahutcouponcode.com/wp-content/uploads/2020/12/10.jpg",
name: "Pretzel Rolls ",
username: "Ramesh",
location: new LatLng(12.9698, 77.7500)),
Order(
imageUrl:
"https://www.manusmenu.com/wp-content/uploads/2015/01/1-Chicken-Spring-Rolls-9-1-of-1.jpg",
name: "Special Veg Rolls",
username: "Mahesh N",
location: new LatLng(12.9598, 77.7540)),
Order(
imageUrl:
"https://www.thespruceeats.com/thmb/axBJnjZ_30_-iHgjGzP1tS4ssGA=/4494x2528/smart/filters:no_upscale()/thai-fresh-rolls-with-vegetarian-option-3217706_form-rolls-step-07-f2d1c96942b04dd0830026702e697f17.jpg",
name: "The Great Wall of China",
username: "Chinmay M",
location: new LatLng(12.9098, 77.7550)),
Order(
imageUrl:
"https://cdn.leitesculinaria.com/wp-content/uploads/2021/02/pretzel-rolls-fp.jpg.optimal.jpg",
name: "Pretzel Rolls",
username: "Ramesh",
location: new LatLng(12.9658, 77.7400)),
Order(
imageUrl:
"https://dinnerthendessert.com/wp-content/uploads/2019/01/Egg-Rolls-3.jpg",
name: "Egg Rolls",
username: "Preeti",
location: new LatLng(12.9618, 77.7700)),
Order(
imageUrl:
"https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-1081476_12-9367fea.jpg",
name: "Easy Spring Rolls",
username: "Nithin ",
location: new LatLng(12.9218, 77.7100)),
];
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white60,
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 1),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
itemCount: orders.length,
itemBuilder: (context, index) {
return ListTile(
leading: Image.network(orders[index].imageUrl),
title: Text(orders[index].name),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => MapPage(
orders[index].name, orders[index].location)));
},
subtitle: Text(orders[index].username),
);
},
),
),
],
),
),
),
);
}
}
mapscreen.dart​
Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huawei_map/map.dart';
import 'package:sample_one/directionapiutil.dart';
import 'package:sample_one/routerequest.dart';
import 'package:sample_one/routeresponse.dart';
class MapPage extends StatefulWidget {
String name;
LatLng location;
MapPage(this.name, this.location);
@override
_MapPageState createState() => _MapPageState(name, location);
}
class _MapPageState extends State<MapPage> {
String name, dist = '';
LatLng location, dest_location = new LatLng(12.9709, 77.7257);
_MapPageState(this.name, this.location);
HuaweiMapController _mapController;
final Set<Marker> _markers = {};
final Set<Polyline> _polyLines = {};
final List<LatLng> _points = [];
BitmapDescriptor _markerIcon;
List<LatLng> polyList = [
LatLng(12.9970, 77.6690),
LatLng(12.9569, 77.7011),
LatLng(12.9177, 77.6238)
];
@override
void initState() {
super.initState();
_loadMarkers(location);
showDirection();
}
@override
Widget build(BuildContext context) {
//_customMarker(context);
return new Scaffold(
appBar: null,
body: Stack(
children: [
_buildMap(),
Positioned(
top: 10,
right: 40,
left: 40,
child: ButtonBar(
buttonPadding: EdgeInsets.all(15),
alignment: MainAxisAlignment.center,
children: <Widget>[
/* new RaisedButton(
onPressed: showDirection,
child: new Text("Show direction",
style: TextStyle(fontSize: 20.0)),
color: Colors.green,
),*/
Center(
child: new Text(
"$dist",
style:
TextStyle(fontSize: 20.0, backgroundColor: Colors.cyan),
),
),
/* new RaisedButton(
onPressed: _showPolygone,
child: new Text("Polygon",
style: TextStyle(fontSize: 20.0, color: Colors.white)),
color: Colors.lightBlueAccent,
),*/
],
),
)
],
),
);
}
_buildMap() {
return HuaweiMap(
initialCameraPosition: CameraPosition(
target: location,
zoom: 12.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,
markers: _markers,
polylines: _polyLines,
onClick: (LatLng latlong) {
setState(() {
//createMarker(latlong);
});
},
);
}
void showRouteBetweenSourceAndDestination(
LatLng sourceLocation, LatLng destinationLocation) async {
RouteRequest request = RouteRequest(
origin: LocationModel(
lat: sourceLocation.lat,
lng: sourceLocation.lng,
),
destination: LocationModel(
lat: destinationLocation.lat,
lng: destinationLocation.lng,
),
);
try {
RouteResponse response = await DirectionUtils.getDirections(request);
setState(() {
drawRoute(response);
dist = response.routes[0].paths[0].distanceText;
});
} catch (Exception) {
print('Exception: Failed to load direction response');
}
}
drawRoute(RouteResponse response) {
if (_polyLines.isNotEmpty) _polyLines.clear();
if (_points.isNotEmpty) _points.clear();
var steps = response.routes[0].paths[0].steps;
for (int i = 0; i < steps.length; i++) {
for (int j = 0; j < steps[i].polyline.length; j++) {
_points.add(steps[i].polyline[j].toLatLng());
}
}
setState(() {
_polyLines.add(
Polyline(
width: 2,
polylineId: PolylineId("route"),
points: _points,
color: Colors.blueGrey),
);
/*for (int i = 0; i < _points.length - 1; i++) {
totalDistance = totalDistance +
calculateDistance(
_points[i].lat,
_points[i].lng,
_points[i + 1].lat,
_points[i + 1].lng,
);
}*/
});
}
void _loadMarkers(LatLng location) {
if (_markers.length > 0) {
setState(() {
_markers.clear();
});
} else {
setState(() {
_markers.add(Marker(
markerId: MarkerId('marker_id_1'),
position: location,
icon: _markerIcon,
infoWindow: InfoWindow(
title: 'Delivery agent',
snippet: 'location',
),
rotation: 5));
_markers.add(Marker(
markerId: MarkerId('marker_id_2'),
position: dest_location,
draggable: true,
icon: _markerIcon,
clickable: true,
infoWindow: InfoWindow(
title: 'User',
snippet: 'location',
),
rotation: 5));
});
}
}
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;
});
}
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);
});
}
void remove() {
setState(() {
_markers.clear();
});
}
showDirection() {
Future.delayed(const Duration(seconds: 1), () {
//setState(() {
showRouteBetweenSourceAndDestination(location, dest_location);
//});
});
}
}
Result​
Tips and Tricks
Make sure you have downloaded latest plugin.
Make sure that updated plugin path in yaml.
Make sure that plugin unzipped in parent directory of project.
Makes sure that agconnect-services.json file added.
Make sure dependencies are added build file.
Run flutter pug get after adding dependencies.
Generating SHA-256 certificate fingerprint in android studio and configure in Ag-connect.
Conclusion​In this article, we have learnt how to integrate Huawei Map kit and Location kit in Flutter for the DeliveryApp, where application gets the list of orders and delivery agent click on the order to navigate to map. Similar way you can use Huawei Map kit as per user requirement in your application.
Thank you so much for reading, I hope this article helps you to understand the Huawei Map kit and Location kit in flutter.
References​Flutter map
Flutter plugin
Location Kit
Original Source

---

What are all the different types of maps it will supports?

---

can we implement start navigation feature like google map feature?