Flutter Live Location Tracker - Google map and Firebase + Source Code

hey guys welcome back to another flutter tutorial in this video i will show you how to implement live location tracker in flutter using google map package and location so this video will show you the step by step to implement this live location tracker from a new project till the end be sure to watch it till the end and you will learn a lot of things and if you don't have time the source code for this is available in the description you can always refer to that as your reference you can also save that give it a star and if you're leaving don't forget to like the video and subscribe to the channel so you won't miss such videos in the future and for that let's see the demo how it works and then we will proceed how to implement that okay i have two devices here running one will enable the location live and the other one will track that into google map live so this one has added the location into the firebase and the location for this will be stored in the firebase live you can see here we will add it like this and it will be shown live in here by pressing this enable live location it will update the current location of this device and will be available to any device that you want so this device can track it live by pressing this button and it will load out the google map and will show the location of this user live in the google map if we test that how it works here i have the google map of this device i will play a root here and we will see that location will update in this device live you have to have internet connection and you have to also test it in a faster device since i have run both device you can see that this device is moving on the map and its location is being updated in here as well and we can track it in any other device that we want we can also stop the live location using this button and it will not be updated anymore and without talking too much let's get started with the project and see all right let's get started first you have to configure firebase with your project as i already did and i have this google dash services then you have to come to the pub speak yaml and add these packages that we are going to use google map location cloud firestore and permission handler and then inside the android manifest we have these permissions which is to be added and this api key which again has to be added from the cloud.google which i will link it in the description so you can get it you have to create and the link your virus project in here and choose your project then after choosing your project from here you can come to the apis and then here select your maps sdk for android or for ios you can also search this here and it will show it after that you come to the credentials after clicking the credentials you will see your api key in here you can simply copy the key from here and come to the android manifest pasting this two lines and change your value with your key then you have to come to the build.gradle add this line for firebase and also change the kotlin version to 1.5.30 because it will not be compatible with the current cloud firestore and firebase core version you will get some errors so changing this one to this and build.gradle of app level you have to come and add this one for firebase change the minimum sdk to 20 for using the location and adding this one and these two for firebase there's nothing else we have to do here we just collapse this open the library here i have two files i will have one main page and one the map detail which where we will show the map and the live location of the user which is going anywhere so inside the main i will add three buttons where the first one will add our current location in firebase second one will enable live location tracking which consistently every second will add our location into firebase and the third one will stop that live location tracking so let's get start our work first i will import then down here i will declare some variables these are the two variables that we require now i will inside the body inside here as i said i will have three buttons and after that i will build a list builder using the stream builder and get all the information on locations which is available in the firebase here i've checked if there's no data then i will show circular progress bar otherwise i will return listview.builder i'll make a list tile and inside here i will give a title of the subtitle will be and one trailing icon so this is our interface and now let's handle the on place of these ones first one which is at my location i will add a function which is get location i'll create it then i will have listen location the last one will be stop first one let's create it down here so this gate location function is provided by location package then i will get that current location and add it into firebase firebase firestore so by pressing this button we will get our location and add it into firebase by this collection and this document id next function is less listen to location let me fix this lesson to location we'll create it down here it will be future same thing i will copy it from here and paste it in here but instead of this i will change it to this one so i hope it is clear it's pretty simple and easy next we will go and create this stop listening so we're done we're good with everything we are good with our interface let's go ahead and design our detail map and then we will run the application all together and here again i will import the location package down here i will have look then i will have google so i will tell you where i will use this one we will update the camera position and the map so we will need this i will show you don't worry inside here i will make a stream builder again so i can simply copy it from another one here and the first i will check i will import the firebase here then instead of this list view builder i will have my google which the initial position for this will be camera position with the target of so here i will pass snapshot so here first we have to accept a user final we will pass this user id from our home page and we will compare it with the document id widget dot user id if it is equal then we will get its data which will be after comparing this one we will get its latitude and the same thing goes with longitude i'll tell you what happened here we will get snapshot data document it's clear till now and single where we will compare the document id which is here in our my location will have a collection called location and inside that document which will be current user id which is unique we'll compare if that document id is equals to the current user that we have passed his id through our home page after comparing that if that matches then we will take latitude from inside the fields which is available i will show you after running the program don't worry we can also define the zoom and we have another thing inside the map which is map type and we have markers which is the marker inside the map so i'll give it as marker and then marker id is required marker id we can pass any unique value i will just pass marker id then after marker id we we can also give it an icon which will be bitmap descriptor dot you can have your own custom icon from image asset or you can use one of these ones if you want to use one of these ones you can say with you and then inside here bitmap descriptor dot i will say you magenta this one is a little bit nice then after here i will have the position yeah position again the position i will pass the same latitude and longitude because we get the location from firebase so the position of marker should be the in the current position of the user then one last thing inside the map which i will show you is on map created all map created whenever we load the map here we pass the google map controller where we will get the controller from our map then it will be an asynchronous function so inside here first i have created a one upper controller of google map i will set this inner controller to the upper controller so later on when we track our user live we have to be able to control this map from outside this map because once this map is created this method or all map created will be called once and then we will not be able to move the camera around or update the location of user live so i'll say the upper controller and also i will use this added equals to true remember this boolean variable we have done upper there we make it as true so i'll tell you why we make it through don't worry we have to make it sid stay to apply the values down here i will have one last method which uses to move the camera around when user location is changes so here i will say future and this is going to be a synchronous and here i will do using upper controller dot animate camera dot camera update so camera update is having another function new position and inside new position i will say camera position target target of this i can pass the same thing because we have the access to snapshot of the stream builder so we can simply just pass this and at the end we can put the semi color also i can specify the zoom in here 14.47 as i have given here and that's it now you might wonder where we call this my map we call it right after entering into the builder of stream builder this builder will be called every time there is a data update or anything update in the firebase so i will call it here and pass the snapshot you might again wonder if this my map will be called every time so we don't have to call this directly here because for the first time when we open our this detail page it will not have the google map initialize and this controller will also not be initialized so we have to check if that added variable which is boolean if that is true then we will go ahead and pass the snapshot to mymap and after that it will use this controller which is already initialized here and it will animate the camera to the new location which is added by user or which is being added to the firebase so i think we are done with everything in here and the only thing which remains here we have to pass the value of of snapshot and i hope i haven't remained with anything one last thing which i forget is again we have to ask the user permission for allowing it to use its location so i'll quickly write a function to ask for user permission so i'll call this an init state when the user runs the application now we are ready with our application let's run it into both of my devices okay we are back with both devices running the application we have to upload the location in here and in here both and it seems very fine let's add the location in here and it should add it into the firebase and it appears into the list view let's check our firebase refresh okay it's here as location current user id latitude longitude and name it also appears here name and attitude longitude so if i enable the live location in this device maybe let's enable it in this device and we can see the debug console updates it updates in here let's press this button which takes us to the detail so it says that field is not available let's see where we have done and some error you can see here we have done longitude spelling mistake there is an f at the end of all of them let's remove it and save and it should be fixed by now let me first stop this because it is taking too much of my ram enabling this back here it is enabled and i can press this button now running both emulators in laptop is requiring a lot of cpus and ram so for this we also require some internet connection to load it now it seems that map is ready let me open the map for this device this is the live map i have some roots specified i will play this route with speed of 5 and play this is the location for this device and it will be updated live in this other device right now it's because both emulators take a lot of cpu and ram it is not showing very quick but it will be very nice in real device you can see it updates every second you can also decrease that second into milliseconds if you want to do that let me stop this takes a lot of process i'll go to main and here in the init state i can say location dot change settings change settings and that's it also if you want this to work in background you can do that using the location package now this one will work even if your application is closed or locked out so let's reload in both the emulators we have to allow that all the time and it should come here and i can say enable live location and here i will start the route it will change here live as well i can also go to map detail it will take some moment because the device performance is really slow right now so now it updates every 300 millisecond which is how it works so this is how we can implement the live location tracking in flutter application using google map and location if you like the video and enjoy don't forget to subscribe and like also you can share it anywhere you want you can save your my github repository and thank you for watching i will see you in the next video

Channel: Lazy TechNo

Views: 59,856

Keywords: live location tracker, flutter, flutter live location tracking, flutter live location sharing app, flutter live location, live location tracking google maps, flutter google maps, flutter google maps and live location tracking, flutter tutorial, google maps, firebase flutter, google map sdk android, flutter google map sdk, flutter location tracking, flutter location picker, real time location tracking google maps, flutter realtime location, flutter google maps current location

Id: Uz49GlqJ7m4

Length: 17min 39sec (1059 seconds)

Published: Fri Sep 10 2021