[Huawei Developers] Freemind R:
Learn how to create a earthquake app that includes the Huawei Map Kit and Location Kit using the Flutter SDK.

Introduction

Hello everyone, In this article, I will make an earthquake application with Flutter. We will make an some APIs provided by the Huawei Map and Location Kit and learn how to use them in an earthquake project.

Huawei Map Kit, provides standard maps as well as UI elements such as markers, shapes, and layers for you to customize maps that better meet service scenarios.

Huawei Location Kit combines the GPS, Wi-Fi, and base station locations to help you quickly obtain precise user locations, build up global positioning capabilities, and reach a wide range of users around the globe.

Configuring The Project

Before you get started, you must register as a HUAWEI developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.

Create an app in your project is required in App Gallery Connect in order to communicate with Huawei services.

★ Integrating Your Apps With Huawei HMS Core

Permissions

In order to make your kits work perfectly, you need to add the permissions below in AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<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" />

HMS Integration

Check whether the agconnect-services.json file and signature file are successfully added to the android/app directory of the Flutter project.

Add the Maven repository address and AppGallery Connect service dependencies into the android/build.gradle file.

buildscript {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}

dependencies {
/*
* <Other dependencies>
*/
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}

Configure the Maven repository address for the HMS Core SDK in allprojects.

allprojects {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
}

Add the apply plugin: ‘com.huawei.agconnect’ line after the apply from: “$flutterRoot/packages/flutter_tools/gradle/flutter.gradle” line.

apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.huawei.agconnect'

Open your app level build.gradle (android/app/build.gradle) file and set minSdkVersion to 19 or higher in defaultConfig. (applicationId must match the package_name entry in the agconnect-services.json file)

defaultConfig {
applicationId "<package_name>"
minSdkVersion 19
/*
* <Other configurations>
*/
}

Creating Flutter Application

Find your Flutter project’s pubspec.yaml file directory open it and add Huawei Map and Huawei Location Plugins as a dependency. Run the flutter pub get command to integrate the Map & Location Plugins into your project.

There are all plugins in pub.dev with the latest versions. If you have downloaded the package from pub.dev, specify the package in your pubspec.yaml file. Then, run flutter pub get command.

Map Kit Plugin for Flutter

Location Kit Plugin for Flutter

dependencies:
flutter:
sdk: flutter
http: ^0.12.2
huawei_map: ^4.0.4+300
huawei_location: ^5.0.0+301

We’re done with the integration part! Now, we are ready to make our earthquake application ✓

Make an Earthquake App with Flutter

Create Earthquake Response Data

First of all, we will create an EartquakeResponseData class to access the latest earthquake data. Later, we will call this class with the getData() function.

Additionally, we will use the http package to access the data, so we need to import import ‘package: http / http.dart’ as http; into the detail page.dart class.

More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204423826967890020