Flutter Live Order Tracking Using Google Maps - Full Tutorial

uh in this video we will discuss how we can Implement uh realtime tracking for our application like food delivery app or e-commerce app for any your application uh if the if it want uh Real Time Track tracking for our orders uh we can Implement like this uh I will show the first demo uh this one is our uh main app or client app we will publish it in Play store or App Store and this one for delivery boys so we will give this application to delivery boys and if he enter the order ID and submit uh the user can track the real time tracking of their orders first I will show just okay I just enter some address I just select the cash delivery uh uh this is our main thing uh uh just select the location of the user uh if the user want to real time tracking user should select the location you can see for live tracking uh order please select the location if I select the location pickup it will show one Google Map alert you can see it will open with uh Mark with our current location if you want to change the location you can just click in the Google Map it will pick that location okay you can select which location you want the delivery now I'm just selecting the same current location and I click this uh tick button then now the location is saved and I just click the complete purchase can see order create uh in my case I'm using Firebase uh for uh saving the data uh in your case you can use your own API or your own uh backend server and database like mango DB SQL nodejs no issue you can just replace the posting or creating order uh I will show and I discuss the code you will understand uh okay now I'm going to my Firebase database you can see the order is created uh with the address and items and the main thing uh we need to send the latitude and longitude it will get from the location we pick up picked the location uh you can get the latitude and longitude I will show okay these are the two thing uh mainly we need to for L tracking okay now our order is created successfully now we can uh return back to our application uh you can see our order ID is 1 2 3 4 5 now you delivery boy should enter the order ID 2 3 4 5 and submit then he will able to see the uh delivery address user phone number and amount payment type if you click this he can call the uh customer and if you click the show location button it will redirect to the Google Map with Direction then with this direction he can uh travel to the delivery and before he start uh he should click this start delivery okay now when he click the start delivery uh user can uh uh live tracking uh in the order section uh in the you can see the 1 2 3 4 5 is on the way before that I will show how we can the location and make a route or traveling with the emulator if you already know no issue maybe beginners or first time they're dealing with the uh location uh for that people I will just show uh if you are using the Android Studio you can use the emulator and here you can see the this three button uh extended controller just click that then it will open one window with Native features like you can see the microphone fingerprint camera and the first one is location here you can see the single point uh in this single point mean you can select the location in this map now I just select the location uh this is uh in my city called Madam uh you are not heard because in Kerala it's one city in Kerala named as Madam now I just select that location and I just uh make one location with the named M you can make different location and you can can see if I select the arum it will redirect to the and if I set the location our device our this phone uh the current location it will become that selected location okay for the testing uh the map and map related thing uh this will very helpful okay now I'm just setting uh my the user that mean our client uh location is madam now I just set the location now the user is send the order uh with that named location Madam okay now in our deliver application I just click the same thing and uh in the you can see in the near the single point there is a another tab route uh this route is used to you can make the virtual traveling if you are working with the Google Map you need to move the device so it is very difficult to when with working with the real device you need to move with your device but if you are using the Android Studio emulator you can make the route and just click the play route it will move the device and we will get the same uh scenario when we will travel to that location okay you can see now here I you need to select the starting location and ending location you can see here I just select the starting location as kurur uh uh I just make assume the Kure is the our hotel and the end location is madam the same location I select the user is selected okay to make the virtual traveling okay then I just uh select the route and just click play route uh play route you can see if I after clicking play out uh the my device will going to moving okay now in the our client application I'm just clicking this uh order tracking you can see uh my order or the delivery boy is moving to the location the final location you can see this is our uh destination you can see the uh delivery boys moving uh in the client application he can live track this one and also you can see the remaining distance it will show the remaining distance uh I'll just make the fastest video okay you can see our delivery boy is near to the final location this is our destination okay you can see uh our delivery is finished here the delivery boy reached the final location here we can see the remaining distance is 0.02 km uh that mean our tracking is successfully done let's move to our coding part first we will discuss the uh client side code uh and then we will discuss the delivery boy application uh actually this is the part of our upcoming video complete food delivery app tutorial uh but in this video I'll only discuss the uh tracking related code only the pick location and order tracking page and I will explain it like customizable you can easily Implement in your application I will show where you need to change and you must watch our upcoming video I will give the video uh description video link in the description when the tutoral is completed because it's a awesome video or tutorial it will completed uh like uh client application uh delivery boy application and control panel for hotel man Hotel managers to add and remove the items and manage orders okay uh you should watch that video when it publish I will give the description in our Channel we only discuss the and publish the production level application mainly for Freelancers uh okay so so please subscribe our channel to get more like this video okay in this video we will uh discuss the thing I will just explain this page the purchase page uh how you can uh set this uh pickup location alert and uh the code and also I'll uh discuss uh this uh uh real time tracking uh this page also I'll explain with e to how you can implement it in your application and after that we will discuss the uh uh deliver voice section uh we need to add some dependency and some uh permission in our application uh first one is uh Google Map flutter uh you need to just add this in our application uh pop spe yl can see I already added the Google Map letter also we need one more other uh uh dependency GE location GE locator this one geolocator can see it's also flutter favorite uh just copy this one also and you need to paste this two dependency we need for our uh live tracking also this uh uh for I'm using Firebase that's why I'm using the fir store uh cloud and Fir store core if you are not using uh Firebase you can do go as with your uh back but for the tracking related thing you need to just add these two dependency also we need to uh add the permission uh to get the location uh for that uh uh for the Android you need to just go the Android folder and app folder and uh inside the main you can see the Android manifestor uh you need to add these two permission Android uh permission to access F location and access uh course location you need to add this two permission and also if you are using the Google Map you need to add the Google Map APA key okay uh you can see uh in the Google Map uh dependency uh it will show uh we need to do the first step we need to make the minimum SDK version 20 in the android. default config do file so for that you need to just go to the build. gradal file inside the app folder and here I just make the minimum SDK version as 20 and the Second Step you need to add the uh your APA key of Google Map P key inside the Android manifest file okay these are the two step you need to for the Android uh for the iOS uh you can uh check the okay uh for the Android you if you want to use the uh Google Map you need to add this two lane uh in your iOS Runner SL appdelegate.m you can find it inside the iOS folder Runner and you can see app delegate shft here I just add this Lane and also uh here uh you need to add this line also this two Lan uh with your uh APA key uh these are the uh uh step we need to add add to use the Google Map API in your uh application also for the iOS for the permission just open the iOS Runner and info. pist you need to just add this Lane to get the permission location uh NS location when use uh description and you need to just pass the reason need location for better app functionality and don't forget to add this uh line uh because it's the same same uh like what we do in the Android for the permission the same step is in the info. p p list you need to add this one for the location permission in iOS and uh you can get the API key for the uh uh Google Map API key you can find it in the this link console. cloud.google.com then here you can find the uh API key in the credential section first you need to create one account and you can copy paste this API key for that you need to go the library and in the library you can see uh a lot of API in this we need to add the map SDK for Android and iOS you need to just uh by default when you are first time it will disabled you just click and uh make it enabled in my case it's enabled already uh for the IOS and Android uh uh uh uh when we create we will get the free credit around $200 so we can you can use that one okay uh if you have any doubt that there's a lot of tutorial in the YouTube you can check that how we can uh get the API it's free you can just do that step and in the uh uh API service in the credential you can find the API key just copy paste that API key in the Android manifest and uh app delegate Ro shift with this L okay uh let's move to our code uh first uh can see the purchase page okay in your purchase page uh if you want to add the live tracking you should uh add one button to select the current location uh when user click this button it will open one uh alert uh to select the location of current location of the user with this uh uh alert you user can uh select the location you can see if I click here uh the marker will uh set that direction and you can user can select the location where he want the delivery okay uh by default it will open with the current location of our device okay for that in your check out page or purchase page you need to add this code uh here I just make one elevated button you can see uh in the on t uh on press I just put one uh show dialogue and you can see the Loc location alert it's one stateful widget uh uh okay you can see this is the location alert uh we will discuss this it's a simple stateful widget uh just wrap it with show dialogue or you can directly navigate but if you directly navigate it will open as a new page uh if you wrap it with show dialogue it will open like this uh I think it is uh more uh comfortable for user okay just uh create one location alert uh and just uh wrap it with uh show dialogue then it will open like this okay uh in your uh purchase page okay uh now we can discuss the uh show pickup alert okay this is our uh location pickup alert uh you can see uh uh it's a stateful uh widget uh here uh we create two uh thing uh one Google Map controller instant and one latitude longitude it's from it's coming from uh flutter Google Map uh to store the latitude and longitude uh we create one instance for selected location uh when user will select any location we will store the latitude and longitude in the selected location okay and in the on init uh method we will pass one request location permission uh this is that method uh when the first time uh the user will open this uh alert uh it will check uh location permission it's coming from the geol locator uh we already told uh we will add one uh package gec uh to get the real time location uh or the location of our device okay in that package there's option to request the permission of location so we will create the location permission uh await Google uh geolocator do request permission and it will ask the permission and we will check if the permission is denied the user is not give the permission and it will uh nothing will do will just print location permission is Den or you can again request to the location permission otherwise uh if the uh location permission is delayed forever uh it will print that also in this both case uh we will uh do not get the current location okay uh otherwise if the user is Grant the permission uh we will uh call the method get current location uh this is the current uh uh method get current location you can see here we make position this position is coming from the geolocator package uh it will give the current location position wa geolocator do get current location this is one method inside the geolocator to get the current location and we can pass the accuracy we will use the location accuracy as high and we will get the position uh with the latitude and longitude we just print the current latitude and longitude and we will store the our selected location we already create one uh inant of lat long uh and we will uh store the uh latitude and longitude getting from the current location can see in the lat length we can pass the latitude and longitude we will pass the current location latitude and longitude now when user open this uh uh popup uh it will automatically store the current location as the device current location okay now these are the first part then we can go to the uh UI part in the UI part you can see it's just alert dialogue uh in the alert dialog we'll uh split the the alert dialog board as column in the column uh the first widget is uh uh Google Map uh I wrap the Google Map with expanded to make the full height and after that we'll put one uh Floating Action button I wrap it with padding to make padding okay this is our allert dialog body uh now you can as the Google Map uh first I pass the map type uh map type I pass as terrain you can use any you can see there is different type of map type you can use the satellite I'll just show it will give the map type uh but better to use the terrain or normal okay and the second thing is on on map created uh it will uh give One controller we need to pass the controller to our uh Google Map controller okay and uh the next thing is on Tab uh in the on Tab uh when I click uh anywhere in the map it will uh select that location and we will get the select location latitude and longitude you can see in the on to it will give the latitude and longitude okay uh if user uh open uh the application it automatically select the current location and you can see we will store in the selected location as the current device location and if user uh no need to deliver the item in the current location he need to select some other location then you can select the location in the Google Map and it will give the latitude and longitude of that selected location uh I'll just show I just print okay now I just click here you can see uh it print the uh longitude that means uh when we anywhere we click it will uh we will get the uh that location latitude and longitude okay uh so we will uh when user will click any other location we will re rewrite the uh latitude and longitude to our selected location and this is one important thing uh to user to select the different location for delivery and uh the third one is markers uh markers mean this one is the marker uh we can put different markers uh 1 2 3 no issue uh the marker means it will Mark in the Google Map uh in the marker we first check the current location is not null uh then we will pass the marker uh the marker need to pass like this the marker will uh need to write inside this 2 kly bracket uh we can uh pass the marker this is the markers you can see in the markers you can uh write the marker ID I just marker ID as selected location and position uh where the marker uh I just uh pass the position as selected location uh because you can see if I select here the selected location will get the mark so we need to set the position as selected location and window window mean when we click here it it is the window here you can write the thing title as selected location and in the snippet snippet means the like description uh snippet we passess latitude the selected location latitude and longitude okay this is the marker you can give the different markers uh in one one or two three markers no we'll uh discuss it in the delivery boy application in the delivery boy application we will use three markers uh there will uh you understand more about the markers in basically marker is the this icon uh that we can show in the map okay the next thing is initial camera position initial camera position means uh when we open the uh Google Map uh where it will focus the camera you can see here I just set a camera position uh the target as 0 0 uh or you can pass your current location or the location if you are in the uh focusing on one city like uh Bombay or Chennai you can give the center of that latitude and longitude and it will open there or the zoom means how much Zoom the camera we need to focus to the Google Map okay and just my location enabled should make it true to show the user location button to show this button so it will help to user to focus to the current location okay this is the Google Map and uh the final part is uh one Floating Action button uh in The Floating Action button in the on Tab you can see uh in the on tap we will check if the selected location is not equal to null uh we will uh store into the Callback uh here uh in the purchase page I'll show in the purchase page when user is open this alert and select one location and click this button uh it will return to the purchase page uh because uh we will uh uh add the add order logic to our database in this uh purchase page not in the alert so we need to get the selected location in this page okay right uh because uh this alert is only for selecting the current location uh when we select the location and click this button uh we need to return uh or get the selected location latitude and longitude in this page so that's why we will uh in the pickup location alert uh we will uh create one function uh callback function uh on location selected uh here you can see in that home location select alert we will pass the uh call as selected location we will pass to that uh on selected location and and we will uh get it here uh when this uh button is Click uh we will receive here it show this is our purchase page okay this is that button uh this button you can see uh in the location alert uh here we will get the own location selected in this function we we can receive the user location now I'll show now we'll receive in the purchase page and we'll just print selected location now I select this location and click you can see the selected location it is printed from here that means uh we need to just copy paste this this uh uh pickup location alert and we we can receive the selected location in our uh parchase page or the checkout page so no need to worry about this uh just uh create this pickup alert and just paste this file in your application and just call this show alert and you can receive the user selected location okay and you can see here I create one method to create order this is in my case uh I sending the uh address uh payment type item user selected item email phone number and also I'll send the selected location latitude and longitude in your case in your uh create order or add order uh logic you need to just send this latitude and longitude to your database uh this is the first part of the selected location you can see our order is successfully added uh with the order details address email and the main thing we need to save the latitude and longitude okay uh these are the main thing we need to store in the our database to get the realtime tracking this is the user location okay now we can return to our delivery boy application uh delivery boy application is a single page application you can see only one page homepage and when here we will enter the order ID in in our case our order ID is 123 4 5 okay now I'm just enter 1 2 3 4 5 it will fetch the details and there is two button one is show location when I click this show location button it will open the location uh in gole Google Map okay and uh delivery by can travel with this location that is one one feature and the next button start delivery uh before uh start the travel the delivery boy should click the start delivery then only user will get the live tracking okay uh let's discuss the uh code okay here uh I am using uh uh main package Firebase uh Cloud store and Firebase for storing uh my data in my database and the main package is location I'm using this location package uh it is same as the GE location uh that we used in the uh our uh client application uh here you can see for getting the real time location we are using the GE locator uh this location package also same for but the main benefit it can work with the background even our application in background uh it will send the location to the server because uh when the delivery boy start the traveling he need to check the Google Map so he need to use the other application and put this application in background so that's why I'm using the location uh dependency for uh fetching the current location of the user okay location dependency uh you need to add these two lane uh permission uh foreground service and access background location in your uh Android folder inside the app inside the SRC you can find the Android manifest here you need to add this uh two or linee uh two permission also you need to add the location permission to get the user location to use the GPS so in the delivery boy application you need to add these for uh permission in your Android manifest file also in the iOS section uh you need to add this uh permission inside your info. pist file uh this is one uh stateful widget uh here I create the instance of location uh coming from the location package and one text editing controller uh to get the uh uh uh order ID that we entered from the text field and uh some empty string for delivery address phone number uh amount to collect payment type that we need to show here uh after the entering the order ID uh it will show here like this and the customer latitude and longitude we need to store this latitude and longitude of our customer that we will store in this customer latitude and longitude and to Boolean short delivery info to hide the button and show this uh uh delivery address and delivery details we will discuss it and the instance for the Firebase collection uh uh one order collection we need to fetch the order from this uh our order collection and another for order tracking I have two collection collection mean in Firebase it's same like if you're are using in the uh MySQL it's like a table uh so in my case I save the orders in the order collection like a table and I have also one order tracking uh I will uh send the uh current location of the moving delivery boy in the order tracking okay so I have two collection uh I just initialize that collection and uh one uh method get location we will discuss later now we can discuss the UI part now you can see one image uh to show this delivery boy image and after that I put one text field uh to enter the uh order ID and the next I wrap it inside the button I'll show inside the visibility okay because uh when uh this button click you can see uh get order by ID this one method I created below you can see get order by ID it is the method to fetch the order uh that we saved in our uh Firebase database we will fetch the order can see AIT order collection where and I will pass the ID and it will give the order you can see now I create one model for order here I just create one model for order uh to make the um store the order data so it from Json I'll just uh convert it to our model object and it will return the order this is the get order by ID okay you can see uh uh if the Tex texing controller is not empty it will try to fetch the order with the entered order ID and we will check if the order is not null uh we will pass the uh order address pH payment and amount to collect and customer latitude and longitude all we uh uh assign that value from the order that we get from the server okay uh you can see now I enter the order ID and I click the submit button it will fetch the data and store this value and this value is showing here okay you can see the visibility before it the visibility was uh uh fail so I'll pass the short delivery info you can see when the button is Click uh the short delivery info become true that's why uh when the button is click and if successfully fetch only this area will show okay uh then uh when user click the short delivery info will become true and uh this visibility will become true and this column for this showing the delivery address will show these are the basic things that's why I didn't more explaining and we have two button one is show location and start delivery show location for uh open the Google Map you can see in the on T I'm using the URL launcher for use you need to add this package URL launcher okay you can see in the URL launcher uh we can uh uh redirect to the Google Map uh with this link https www.google.com/mapmaker in our phone you can just try it within your Chrome just uh add this URL and after you can uh enter any location latitude and longitude by comma then it will open the Google Map app okay that's a simple thing I'm using to open the Google Map this is the first button and the second button is the start delivery uh this button uh user uh delivery boy should click Before He travel or starting the delivery okay we can check what is inside this uh there's a method start delivery we can find the start delivery okay you can see the start delivery uh in the start delivery when we click this button uh it will first it will do is delivery started uh we already create one uh Boolean can see uh uh by default it is f when I click this button it will become true and it will check if the is delivery started is true then it will call the subscribe to location change can go to that method subscribe to location change this this method is used to get the current location of the delivery boy uh you can see we already create the one location instance from the uh location uh uh Library okay uh with the instance we will get on location change uh we will get the current location data so we will just print the latitude and longitude to confirm or we will get the uh moving location uh and after we will uh update the current location I before I will show no okay uh we just return to our stat delivery you can see first it will subscribe to change the the location when I call this method it will start to get the current location and it will store in the uh current location and I have one more method add order tracking okay when I click this button you can see first it will start to subscribe the location you can see location changed location changed and it will print the uh latitude and longitude uh that is from this uh subscriber uh location change method so when I call this method it will start to continuously you can see uh it's printing continuously with each second the location of the device and after that I have one more uh method add order tracking can see this is the add order tracking this is a simple method to add the uh one uh item to our order tracking collection I already told I have two collection this is order tracking collection I just open you can see uh it will uh create one uh new collection with ID 1 2 3 4 5 can see uh the collection uh order ID uh I'm creating the order tracking collection with the order ID that we enter here 1 2 3 4 5 and it will store three thing one is order ID and the initial latitude and initial longitude uh we can make it uh current latitude and longitude to make more clear okay then it will send to the current uh uh latitude and longitude to our database okay then after uh when the subscriber change location we can return to this method uh when it will get the new location it will update the same uh collection you can see I create one more method update order location this is that method update order uh location you can see the order tracking uh I'm updating order tracking collection do uh order ID it will first it will get the uh collection and it will check if the order tracking is exist in our case uh it's 1 2 355 uh is the collection is available so so it will update uh the latitude and longitude otherwise if it is not created it will again uh uh call the add uh order tracking method then it will add and after that it will update it's a simple thing uh when I explain you may be feel it too complicated just simple thing uh if when I click the start button first it will send the current location latitude and longitude and with this order ID if you are using uh SQL or mongod you can need to just save these three value latitude longitude and your order ID okay just try to move our my virtual device I just click the route and I play the route okay now my device is start to moving you can see it updating the latitude and longitude so our uh delivery boy application is successfully okay now with each moving time it will update in the order now our next uh Target is we will just fetch this latitude and longitude in our client application and just update in the Google Map a simple thing and it will show the uh live tracking also one more thing uh don't forget to add the location do enable background mode and pass the enable values equal to true if you don't don't uh write this code uh it our application will not work in background also we need to uh create one method get location and it will call in the init state of our application uh it's mainly for um getting the enabling the uh location service and permission you can see uh the we can request the permission and enable uh by the same package location uh we'll create one Boolean service enabled and we will check location do service enabled if it is not enabled we will requested the service and also uh we will uh check the permission is granted uh permission status uh in the same uh location do has permission it will uh return the permission status we will check uh permission granted is equal to permission do delay that means user delay the uh location permission and we will request the permission permission granted is equal to await location do request permission okay and if it is granted uh not granted uh we will return return and stop the uh program uh then user cannot uh track the application uh so user must uh uh accept the uh location permission and just call this method inser the on init State okay now our uh delivery boy application is completed now we can uh return to our uh uh client application okay now we can go to the order and tracking page uh this is our order tracking page uh it's just a Google map page and uh uh you can implement it in your uh tracking page uh as your application did uh just copy paste the order tracking page now I will explain it is just a stateful widget uh first we need to create two uh uh latitude longitude uh uh one for Destination uh uh the destination is the uh the current location of the uh user uh because this is a client application so the destination is the current location where the user is standing and the delivery boy location it is the uh location uh coordinate that we fetch from the uh our database because when the delivery boy moving it will update uh each second and we will uh uh get the or retrieve the location and we will assign to the delivery boy location okay uh these are the two latitude longitude coordinate we need to implement and also we create one Google Map controller to control the Google Map and here you can see I create one uh marker icon uh I'll will explain it uh what is this uh you can see in our map uh our location of the delivery boy is not the default uh marker of the Google Map uh we use one uh asset or image you can see I'm using this uh uh asset Set uh it's a like a PNG image uh you can use any image like delivery boy scooter or car uh now I'm just using this symbol and uh instead of the Native or the default uh marker uh we will uh use this one uh because it's uh making more Beauty okay uh for that uh we need to create one custom marker uh I will show or I will explain exp uh uh what is that okay and uh I'll already create one Firebase fire store instance for order tracking collection uh this is our order tracking collection can see the uh latitude and longitude uh we update from the delivery boy application uh we need to retrieve the uh updated latitude and longitude so we create one order tracking collection okay now we can uh go to the uh UI part okay in the UI part you can see uh only one Google Map and one uh container with a text uh so I need to show it in the above Google Map so I use the stack widget in the stack widget we can uh put our widget in one by one above so in the stack widget uh the first uh widget is Google Map you can see and I put one uh another widget with the container with the background color yellow and here I just using the text to show the remaining distance here it will show the remaining distance and I make the position uh from the top 16 and left right zero so it will show here okay this is our UI it is just one container with the text and here we will show the remaining distance we will calculate it by one method okay in the Google Map uh first we use the map type I'm using the map type as normal and in the own map created we will just pass the uh controller that we received to our map controller that we already created here and the next thing is initial camera position uh I'm targeting the initial camera position to the delivery boy location uh because when the delivery boy moving uh the Google Map camera will focus to the delivery boy location and put the zoom as 15 you can use uh 15 16 or 70 if you want to make more closer and the next thing is marker uh I already told marker means the icon or the Mark we need to put it in the uh Google Map here I'm using two marker first marker is the destination uh you can see the destination is the uh this one you can see this blue color sorry it's not going okay you can see that blue one uh this one is one marker and this one is another marker the destination is we already told the destination is the current location of this user okay this user current location is here so uh the I put the position position as destination uh the destination we will uh assign the current location from the geoc coordinate uh Library I will show that and the icon uh you can see I'm using bit map created default marker with uh Hue blue uh this color [Music] sorry okay that color you can see that marker and in the window we just uh title as destination and we'll show the destination latitude and longitude we already discussed the marker this is the first marker similarly we have the one other market for the delivery boy you can see this is the delivery boy marker uh the position we will pass the delivery boy location we will retrieve it from the database and we use the marker icon uh I will show because here you can see it is not the default icon like the uh uh destination icon uh this is the destination icon uh but in you can see in our delivery boy is a uh icon from the our image uh now we will show the mark ion okay you can see uh I create one uh method add custom marker and I call it inside the own init method uh here this is the code to make the custom marker image configuration uh and we pass the image configuration size and device device pixel ratio you can pass five or six no issue and we will create the mid uh bitmap descriptor from the image asset we will pass the uh path of this image I'm using this image so I just copy the path of that image and we will pass it here and we will set to the marker icon here uh for the initially I just uh create marker icon with uh violet color and after uh when I call this add custom marker on the init state it will rewrite with the this image marker okay so just uh create One initial marker with uh blue or any color and after that we will uh reassign the value with the we created the uh custom icon and we will assign that and we will just call in the init state so when the on init state of the map it will rewrite with our custom map okay these are the two marker and uh we can now discuss the uh our uh methods that we using uh first one we already told add custom marker to make the marker as a custom and second one is uh update the current location uh we already told that destination uh we put it as the user location uh this is the user location uh it is the current location uh we need to pass the destination latitude and longitude to the current location uh so we can check where we call this method you can see in the on init method that mean when the uh page is loaded uh we will take the current location from the geolocator uh we already told we add one uh package geolocator uh from this geator uh we we can get the current location of the D device so geolocator do get position stream and we will pass the accuracy high and distance filter 10 and it will give the position so we will just pass that position then it will update to the uh our destination we already create one latitude longitude with destination with some uh Demi latitude and longitude you can use your city latitude and longitude or your District latitude and longitude okay and the third method is update delivery boy location uh this one is used to moving this our delivery boy we can check uh it's also it will uh need to pass the position and it will assign to the delivery Bo location also this method do the map controller do animate camera that means when the delivery boy is moving uh the map should go with it uh I will show that one here you can see when the delivery boy is moving the camera also moving that the camera position of the map also moving uh that's we using the animate camera and passing the delivery boy location okay in the same uh method uh on the moving time we will also calculate the remaining distance and show here I will just show this is the calculate remaining distance uh in the same package geolocator we can calculate the remaining distance we need to pass the uh uh you can see when I just put the cursor is here you can see start latitude start longitude end latitude and end longitude we need to pass this for uh starting point of longitude and ending Point same like this so I just pass all uh in my case my starting uh location is deliverable location and my destination is the user current destination so I pass this two and it will give the uh uh distance in the in uh meter so I divide by th000 and I will get the remaining distance in kilometer okay uh now we discuss these three method add custom marker uh to make the custom marking and update delivery location and calculate the distance and uh inside the init method we call the uh order tracking collection we just initialize the Firebase collection if you are using the Firebase uh you may know how we can uh initialize this or if you are using another API you can use that one no isue and also we call the add custom marker uh to make the marker as uh our custom marker and also we call the uh geolocator doget position uh to get the uh location of the user and we will pass the update current location okay and also we call one more thing uh start tracking and I pass the order ID just hard code the order ID this is my uh start tracking uh here uh I'll need to pass the parameter uh argument uh order ID uh in in our case you can see uh the our order ID is 1 2 3 4 5 so it will pass the order ID and we make one timer periodic timer with 1 second that means uh this method will call each time each one second it will uh again and again call uh and in the each one second we will uh fetch the order tracking order tracking uh that means this collection from the order tracking we will fetch this all latitude longitude latitude and longitude you can see it uh updating because our device is moving delivery voice moving so we will uh uh get the uh order track uh order tracking with this order ID and I will check the uh tracking is not n uh and we will pass the latitude longitude and update it with UA I'll show the this method get order tracking uh get order tracking is a just uh Firebase uh method to get the uh order order tracking uh we will pass the Firebase collection Dot and we will pass the ID and we will get and we will get this collection and from that collection uh you can see uh we will convert it as to uh Json and we will uh return it as a map uh this is the get order tracking uh and the next method uh we'll uh assign the uh latitude and longitude uh from the uh tracking data and we will pass this latitude and longitude to the update UI with location I will show the method update UI with location you can see this is the simple method in this method we will receive the latitude and longitude uh s like this and we will just uh assign uh inside the set State me me because we need to rebuild the UI so we'll assign the uh delivery boy location uh with the lat length uh we'll pass the latitude and longitude also we will uh pass the same uh delivery location to the map controller uh with animated camera as uh before we said uh to uh update the camera position uh to go with the Del delivery Bo okay now we discuss all about all uh method and UI these are the uh steps to create the uh real time tracking uh in your application you can easily do it uh you need to just uh uh copy paste the this page and in where any application you can reuse it uh I for the conclusion I will just say one more more time [Music] uh in your uh uh purchase page you need to just put this uh uh one button and when the button is Click you need to call the uh this alert uh order tracking alert I'll show the alert pick up location alert so you need to make this uh file and just call uh this uh uh pickup location alert when this uh button is clicking okay and just uh the all code is already we discuss when we click uh we will get the location and uh we need to submit with uh your database uh when you post to the order details you need to just add this uh latitude and longitude also to your uh orders to in your database uh that is the first step and the Second Step uh in your uh client application uh you need [Music] to in your order tracking page you can uh just copy paste this uh order tracking page and all thing is here you need to just change this uh get order t tracking uh here I using the Firebase database that's why I'm using the order tracking collection. do if you are using any APA you need to just pass the order ready and you need we need to pass the uh live tracking uh latitude and longitude that uh in this section only you need to change in your code maybe you are using another database or another backend code you need to just change this section only and when we come with the delivery boy app uh uh it's just a single page application you need to just change the uh in delivery boy application you need to just change the add order tracking and update order tracking okay uh here uh I'm using the Firebase database and just posting uh this data order ID current latitude and longitude uh you need to just change S your uh backend database code you need to just change this two method add order tracking and update order tracking all other uh s so you need to just uh one time you just make this files then you can copy paste this file in your all application where you need the live tracking

Channel: rapid flutter

Views: 10,145

Keywords:

Id: QPdYvVq-tzI

Length: 67min 47sec (4067 seconds)

Published: Sun Jan 28 2024