“Find My Car” app with Flutter using HMS Kits and Directions API
Hello everyone,
Are you one of those people who can’t remember where they have parked their cars? If so, this app is just for you.
I am going to use;
- HMS Map Kit to mark the location of the car and show the route on HuaweiMap.
- HMS Location Kit to get the user’s current location.
- Shared Preferences to store the location data where the car has been parked.
- Directions API to plan a walking route to your car’s location.
HMS Integration
Firstly, you need a Huawei Developer account and add an app in Projects in AppGallery Connect console. Activate Map and Location kits to use them in your app. If you don’t have an Huawei Developer account and don’t know the steps please follow the links below.
- Register Huawei developer website
- Configuring app information in AppGallery Connect
- Integrating Map Kit Flutter Plugin
- Integrating Location Kit Flutter Plugin
Important: While adding app, the package name you enter should be the same as your Flutter project’s package name.
Note: Before you download agconnect-services.json file, make sure the required kits are enabled.
Creating Flutter Application
Permissions
In order to make your kits work perfectly, you need to add the permissions below in AndroidManifest.xml file.
Add Dependencies to ‘pubspec.yaml’
After completing all the steps above, you need to add the required kits’ Flutter plugins as dependencies to pubspec.yaml file. You can find all the plugins in pub.dev with the latest versions. You can follow the steps in installing section of the following links.
- Map Kit Plugin for Flutter
- Location Kit Plugin for Flutter
- Shared Preferences for Flutter
- HTTP for Fluttter
After adding them, run flutter pub get command.
All the plugins are ready to use!
Request Location Permission and Get Location
Location data type comes with the Location Kit, LatLng data type comes with the Map Kit. When we call getLastLocation method, we get a Location value; but we need to convert it to a LatLng value to use in HuaweiMap widget.
Add HuaweiMap Widget and Buttons
If the _myLocation variable is not null, it means that we have got the user’s location and the app is ready to launch with this location assigned to the target property of HuaweiMap widget.
Wrap the HuaweiMap widget with a Stack and add a button. The button’s name and functionality will change according to the car status.
Park Your Car and Set Location
To set the location; we get the user’s last location, update _myLocation and _center, set location in Prefs class which uses SharedPreferences for storing data and add a marker to show the location of the car.
I have created a helper class named “Prefs” and seperated the methods using SharedPreferences.
After you clicked “Set Location” button, your location will be set and stored in your app memory with SharedPreferences, also the button will change its name and functionality to get you to your car on the way back.
Find Your Car On the Way Back
On the way back, click “Go to My Car” button and the Directions API will find a way to get you to your car, the app will show you the route on the HuaweiMap with polylines.
An important thing you should pay attention while using Directions API is that, you should put your API key encoded at the end of the URL before http post-ing. You can do it with encodeComponent method as shown below.
For example, if the original API key is ABC/DFG+, the conversion result is ABC%2FDFG%2B.
That’s all for storing the location and going back to it. Also I added a floatingActionButton to reset the location data and clear screen.
You can find full code in my github page. Here is the link for you
Conclusion
This app was developed to inform you about usage of the HMS Kits and Directions API. You can download this demo app and add more features according to your own requirements.
Thank you for reading this article, I hope it was useful and you enjoyed it!
