r/HMSCore - Intermediate: Integration of Location and Map Kit in taxi booking application (Flutter)
Driver on

Integration of Location and Map Kit in taxi booking application (Flutter) : HMSCore

r/HMSCore - Intermediate: Integration of Location and Map Kit in taxi booking application (Flutter)

On this article, you guys can learn how we tracked my buddy utilizing Location and Map equipment integration within the Flutter.

Maria: Hey, The place are you?

Me: I’m in residence.

Maria: Can we meet now?

Me: Oy, it’s already 9.00 pm.

Maria: Sure I do know, however I don’t know something. I ought to meet you.

Me: Something pressing?

Maria: Yeah, it’s very pressing.

Me: Okay, let’s meet in common espresso store. (@Reader what you guys are pondering? about what she is going to discuss to me)

Me: We met 30 minutes later within the espresso store. Under dialog you could find what we mentioned.

Me: Is every thing okay?

Maria: No!

Me: What occurred???

Maria: Rita is lacking since previous 2 days?

Me: Hey, cease joking.

Maria: No, I’m not joking, I’m actually critical.

Me: Are you certain that she is lacking.

Maria: Since previous Three days, I’m calling however it’s switched off.

Me: She is likely to be someplace within the journey or battery useless, could also be energy challenge or she my misplaced her telephone.

Maria: No, if one thing goes mistaken like energy challenge or journey or lack of telephone, she use to tell by different quantity.

Me: u/Reader any guesses the place is Rita?

Maria: I’m actually scared. I don’t know what occurred to her. In what scenario she is now

Me: Let’s name as soon as once more, then will see.

Maria: Tried to name, however once more similar switched off.

Maria: I’m actually scared. I’m not getting find out how to monitor her location.

Me: Be cool, we are going to discover a approach.

Maria: Actually, I’m tensed.

Me: Hey wait… wait… No I remembered we are able to monitor her so simply.

Maria: Actually? How is it attainable?

Me: I’ve already injected Location and Map equipment in her telephone.

Maria: Hey, I’m already in lot of rigidity, you don’t add little extra to that.

Me: No, I’m not including.

Maria: Did you put in any {hardware} machine which has GPS?

Me: No!

Maria: Then?

Maria: Then what’s Location and Map equipment? What you injected? The way you injected?

Me: Okay, Let’s give introduction about each the kits.

Introduction

Location Package

Huawei Location Package assists builders in enabling their apps to get fast and correct person places and increase international positioning capabilities utilizing GPS, Wi-Fi, and base station places.

Fused location: Gives a set of straightforward and easy-to-use APIs so that you can shortly acquire the machine location based mostly on the GPS, Wi-Fi, and base station location information.

Exercise identification: Identifies person movement standing by means of the acceleration sensor, mobile community info, and magnetometer, serving to you modify your app based mostly on person conduct.

Geofence: Lets you set an space by means of an API, in order that your app can obtain a notification when a specified motion (reminiscent of leaving, coming into, or lingering within the space) happens.

Map Package

Huawei Map Package is a growth equipment and map service developed by Huawei. Simple to combine map-based features into your purposes. The Huawei Map presently covers map information of greater than 200 international locations and areas, helps 40+ languages, offers UI components reminiscent of markers, shapes, and layers to customise your map, and in addition allows customers to interplay with the map in your utility by means of gestures and buttons in numerous situations.

At present supported Huawei map functionalities are as follows:

1. Map Show

2. Map Interplay

3. Map Drawing

Map Show: Huawei map shows the constructing, roads, water programs, and level of pursuits (POI).

Map Interplay: Controls the interplay gestures and buttons on the map.

Map Drawing: Provides location markers and numerous shapes.

Maria: Good

Me: Thanks!

Maria: You simply defined what it’s, thanks for that. However find out how to combine it in utility.

Me: Comply with the steps.

Combine service on AGC

Step 1: Register as a Huawei Developer. If already registered ignore this step.

Step 2: Create App in AGC

Step 3: Allow required companies.

Step 4: Combine the HMS core SDK

Step 5: Apply for SDK permission

Step 6: Carry out App growth

Step 7: Carry out pre-release verify

Consumer growth course of

Step 1: Open android studio or any growth IDE.

Step 2: Create flutter utility

Step 3: Add app stage gradle dependencies. Select Android > app > construct.gradle

apply plugin: 'com.huawei.agconnect'

Gradle dependencies

//Location Package
 implementation 'com.huawei.hms:location:5.0.0.301'
 //Map Package
 implementation 'com.huawei.hms:maps:5.0.3.302'

Root stage dependencies

maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'

Add the under permission within the manifest.xml

 
 
 
 
 

Step 4: Obtain agconnect-services.json. Add it within the app listing

Step 5: Obtain HMS Location equipment plugin and HMS Map Package Plugin

r/HMSCore - Intermediate: Integration of Location and Map Kit in taxi booking application (Flutter)
r/HMSCore - Intermediate: Integration of Location and Map Kit in taxi booking application (Flutter)

Step 6: Add downloaded file into exterior venture listing. Declare plugin path in pubspec.yaml file beneath dependencies.

 surroundings:
   sdk: ">=2.7.0 <3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
   huawei_account:
     path: ../huawei_account/
   huawei_ads:
     path: ../huawei_ads/
   huawei_location:
     path: ../huawei_location/
   huawei_map:
     path: ../huawei_map/

Step 7: After including all required plugins click on Pub get, routinely it should set up newest dependencies.

Step 8: We will verify the plugins beneath Exterior Libraries listing.

Maria: Thanks man. Actually integration is really easy.

Me: Yeah.

Maria: Hey, to get location we want location permission proper?

Me: Sure.

Maria: Does Rita has given permission?

Me: Sure.

Maria: When she has given permission?

Me: Oh, I forgot to elucidate about background scene proper.

Maria: What's background scene?

Me: Truly, I’m constructing an app for taxi reserving whereas chatting I defined her find out how to combine Account and Advertisements Package in flutter. She acquired curiosity and we each sat collectively and began engaged on taxi reserving app.

Me: Final we really labored on Location equipment and Map equipment. Since we have been engaged on the taxi reserving utility, we would have liked drivers round us to indicate on the map. Then I made her quantity as automobile driver in backend, after which I began getting her location and I displaying it on the map.

Maria: Oh, now I acquired clear Thought.

Maria: How did you ask location permission in flutter?

Me: I used under code to verify permission.

void hasPermission() async {
   strive {
     bool standing = await permissionHandler.hasLocationPermission();
     setState(() {
       message = "Has permission: $standing";
       if (standing) {
         getLastLocationWithAddress();
         requestLocationUpdatesByCallback();
       } else {
         requestPermission();
       }
     });
   } catch (e) {
     setState(() {
       message = e.toString();
     });
   }
 }

Maria: Easy methods to request location permission within the flutter?

Me: you possibly can request permission utilizing under code.

void requestPermission() async {
   strive {
     bool standing = await permissionHandler.requestLocationPermission();
     setState(() {
       message = "Is permission granted $standing";
     });
   } catch (e) {
     setState(() {
       message = e.toString();
     });
   }
 }

Maria: Easy methods to verify whether or not GPS service is enabled or not within the cell phone?

Me: you possibly can verify utilizing under code.

void checkLocationSettings() {
   strive {
     Future states =
         locationService.checkLocationSettings(locationSettingsRequest);
     states.whenComplete(() => () {
           Validator().showToast("On full");
           setState(() {
             print("On full");
           });
         });
     states.then((worth) => () {
           hasPermission();
           print("On then");
           Validator().showToast("On then");
         });
   } catch (e) {
     print("Exception: ${e.toString()}");
     Validator().showToast("Exception within the verify location setting");
     setState(() {
       message = e.toString();
     });
   }
 }

Maria: Now checking GPS enabled or not, checking utility has location permission or not and requesting permission can also be finished.

Maria: Now find out how to get the person location?

Me: utilizing under code you will get person location.

void getLastLocation() async {
   setState(() {
     message = "";
   });
   strive {
     Location location = await locationService.getLastLocation();
     setState(() {
       sourceAddress = location.toString();
     });
   } catch (e) {
     setState(() {
       message = e.toString();
     });
   }
 }

Maria: Can we get tackle from the getLastLocation()

Me: No, you can't get tackle

Maria: Then find out how to get final know location tackle?

Me: utilizing getLastLocationWithAdress()

void getLastLocationWithAddress() async {
   setState(() {
     message = "";
   });
   strive {
     HWLocation location =
         await locationService.getLastLocationWithAddress(locationRequest);
     setState(() {
       sourceAddress = location.road+" "+location.metropolis+" "+location.state+" "+location.countryName+" "+location.postalCode;
       print("Location: " + sourceAddress);
     });
   } catch (e) {
     setState(() {
       message = e.toString();
     });
   }
 }

Maria: Hey, I've doubt.

Me: Doubt?

Maria: getLastLocation() or getLastLocationWithAddress() provides you location solely as soon as proper?

Me: Sure. However I’m utilizing location replace each 5 seconds.

Maria: How you're getting location replace?

Me: Under code provide you with location replace and take away location replace.

void _onLocationResult(LocationResult res) {
   setState(() {
     Validator().showToast("Latitude: ${res.lastHWLocation.latitude} Longitude: ${res.lastHWLocation.longitude}");
   });
 }
 
 void _onLocationAvailability(LocationAvailability availability) {
   setState(() {
     print("LocationAvailability : " + availability.toString());
   });
 }
 
 
 void requestLocationUpdatesByCallback() async {
   if (callbackId == null) {
     strive {
       int _callbackId = await locationService.requestLocationUpdatesCb(
           locationRequest, locationCallback);
       callbackId = _callbackId;
       setState(() {
         message = "Location updates requested efficiently";
         print("Message: $message");
       });
     } catch (e) {
       setState(() {
         message = e.toString();
         print("Message: $message");
       });
     }
   } else {
     setState(() {
       message = "Already requested location updates. Strive eradicating location updates";
       print("Message: $message");
     });
   }
 }
 
 void removeLocationUpdatesByCallback() async {
   if (callbackId != null) {
     strive {
       await locationService.removeLocationUpdatesCb(callbackId);
       callbackId = null;
       setState(() {
         message = "Location updates are eliminated efficiently";
         print("Message: $message");
       });
     } catch (e) {
       setState(() {
         message = e.toString();
         print("Message: $message");
       });
     }
   } else {
     setState(() {
       message = "callbackId doesn't exist. Request location updates first";
       print("Message: $message");
     });
   }
 }
 
 void removeLocationUpdatesOnDispose() async {
   if (callbackId != null) {
     strive {
       await locationService.removeLocationUpdatesCb(callbackId);
       callbackId = null;
     } catch (e) {
       print(e.toString());
     }
   }
 }

Maria: Even if you happen to get location each 5 seconds. The way you get location in your telephone?

Me: You want all the time logic proper? You don’t do something with out logic.

Maria: Not like that.

Me: Anyway since I made her quantity as automobile driver within the backend (Registered her quantity as driver for testing objective), so I used to be getting her location each 5 seconds after which I used to be sending it server. So I can see her location within the backend.

Maria: Are you able to present me within the map the place are we now.

Me: Let’s see

Maria: How did you add maker and Circle on the map?

Me: utilizing under code.

void addSourceMarker(HWLocation location) {
   _markers.add(Marker(
     markerId: MarkerId('marker_id_1'),
     place: LatLng(location.latitude, location.longitude),
     infoWindow: InfoWindow(
         title: 'Present Location',
         snippet: 'Now we're right here',
         onClick: () {
           log("information Window clicked");
         }),
     onClick: () {
       log('marker #1 clicked');
     },
     icon: _markerIcon,
   ));
 }
 
 void addCircle(HWLocation sourceLocation) {
   if (_circles.size > 0) {
     setState(() {
       _circles.clear();
     });
   } else {
     LatLng dot1 = LatLng(sourceLocation.latitude, sourceLocation.longitude);
     setState(() {
       _circles.add(Circle(
           circleId: CircleId('circle_id_0'),
           middle: dot1,
           radius: 500,
           fillColor: Coloration.fromARGB(100, 100, 100, 0),
           strokeColor: Colours.crimson,
           strokeWidth: 5,
           zIndex: 2,
           clickable: true,
           onClick: () {
             log("Circle clicked");
           }));
     });
   }
 }

Maria: Are you able to verify the place she is now?

Me: By seeing her coordinates, I can present her on the map.

Maria: Are you able to draw polyline between our present location and Rita’s place.

Me: Sure, we are able to.

Maria: How to attract polyline on map?

void addPolyLines(HWLocation location) {
  if (_polyLines.size > 0) {
    setState(() {
      _polyLines.clear();
    });
  } else {
    Checklist dots1 = [
      LatLng(location.latitude, location.longitude),
      LatLng(12.9756, 77.5354),
    ];

    setState(() {
      _polyLines.add(Polyline(
          polylineId: PolylineId('polyline_id_0'),
          factors: dots1,
          colour: Colours.inexperienced[900],
          zIndex: 2,
          clickable: true,
          onClick: () {
            log("Clicked on Polyline");
          }));
    });
  }
}

Maria: What else could be finished on map?

Me: You possibly can draw polygon and transfer digicam place. I imply marker place.

Maria: How to attract polygon? And find out how to transfer digicam place?

Me: Under code on each.

void moveCamera(HWLocation location) {
   if (!_cameraPosChanged) {
     mapController.animateCamera(
       CameraUpdate.newCameraPosition(
         CameraPosition(
           bearing: location.bearing,
           goal: LatLng(location.latitude, location.longitude),
           tilt: 0.0,
           zoom: 14.0,
         ),
       ),
     );
     _cameraPosChanged = !_cameraPosChanged;
   } else {
     mapController.animateCamera(
       CameraUpdate.newCameraPosition(
         CameraPosition(
           bearing: 0.0,
           goal: LatLng(location.latitude, location.longitude),
           tilt: 0.0,
           zoom: 12.0,
         ),
       ),
     );
     _cameraPosChanged = !_cameraPosChanged;
   }
 } void drawPolygon() {
   if (_polygons.size > 0) {
     setState(() {
       _polygons.clear();
     });
   } else {
     Checklist dots1 = [
       LatLng(12.9716, 77.5146),
       LatLng(12.5716, 77.6246),
       LatLng(12.716, 77.6946)
     ];
     Checklist dots2 = [
       LatLng(12.9916, 77.4946),
       LatLng(12.9716, 77.8946),
       LatLng(12.9516, 77.2946)
     ];
 
     setState(() {
       _polygons.add(Polygon(
           polygonId: PolygonId('polygon_id_0'),
           factors: dots1,
           fillColor: Colours.inexperienced[300],
           strokeColor: Colours.inexperienced[900],
           strokeWidth: 5,
           zIndex: 2,
           clickable: true,
           onClick: () {
             log("Polygon #Zero clicked");
           }));
       _polygons.add(Polygon(
           polygonId: PolygonId('polygon_id_1'),
           factors: dots2,
           fillColor: Colours.yellow[300],
           strokeColor: Colours.yellow[900],
           zIndex: 1,
           clickable: true,
           onClick: () {
             log("Polygon #1 clicked");
           }));
     });
   }
 }

Maria: Can we get route on the map?

Me: Sure, we are able to get however app remains to be beneath growth stage. So it's essential to wait to get that function.

Maria: Okay. How precisely this utility seems to be?

Me: Comply with the consequence part.

End result

r/HMSCore - Intermediate: Integration of Location and Map Kit in taxi booking application (Flutter)
r/HMSCore - Intermediate: Integration of Location and Map Kit in taxi booking application (Flutter)

Maria: Trying good!

Maria: Hey, ought to I keep in mind any key factors?

Me: Sure, let me provide you with some ideas and tips.

Suggestions and Methods

  • Be sure you are already registered as Huawei Developer.

  • Make sure that your HMS Core is newest model.

  • Be sure you added the agconnect-services.json file to android/app listing.

  • Make sure that click on on Pub get.

  • Make sure that all of the dependencies are downloaded correctly.

Maria: Actually, thanks a lot to your rationalization.

Me: Than can I conclude on this Location and Map equipment?

Maria: Sure, please….

Conclusion

On this chat dialog, now we have learnt to combine Location & Map equipment in Flutter. Following matters are coated on this article.

Location Package

  1. Checking location permission

  2. Requesting location permission

  3. Checking location service enabled/disabled in cell

  4. Getting Final recognized tackle.

  5. Getting tackle with callback

  6. Take away callback

Map Package

  1. Including map to UI.

  2. Including marker with present location.

  3. Including circles on the map.

  4. Including the Polyline on the Map.

  5. Transferring digicam place.

  6. Drawing the polygon.

  7. Learnt about Enabling/Disabling site visitors, My Location Button, My Location.

Maria: Hey, share me reference hyperlink even I can even examine it.

Me: Comply with the reference.

Reference

Maria: Now I’m relaxed.

Me: Why?

Maria: As a result of you might have helped to search out Rita

Me: Okay

Model info

  • Android Studio: 4.1.1

  • Location Package: 5.0.3.301

  • Map-kit: 5.0.3.302

Maria: Thanks, very nice rationalization (@Readers its self-compliment. Anticipating query/feedback/compliments out of your aspect in remark part)

Glad coding

Leave a Reply

Your email address will not be published. Required fields are marked *