Flutter Google Maps and Live Location Tracking | Flutter Maps Tutorial

[Music] hey hello friends and welcome to retro poll studio and in today's video we're going to be using Google Maps in flutter and we'll be using the location API package to track the location of the device and to show that on the map itself so you can see that right now I have this map in the app that I'm running on the emulator and when I click on the location button you can see that it takes us to the device location and also when I go to the location settings in the emulator when I click on the play button here you can see that the map is tracking the location of the device and it's going to update the location of the device and show this car icon and the area in a circle around the car icon to represent the accuracy of the map so we'll be achieving this kind of functionality by using two packages in flutter that is going to be the Google Maps flutter package and the location package so these are quite nice packages that you can use in your application and there is quite a bit of setup that you need to do to add these packages to your applications and also right now we are using some demo data that is in the GPX format to track the location and for getting this GPX file you can use this a nice website that is maps to GPX comm and I'll just show you how to use this website and create your own sample data to test your applications in the emulator so this is going to be a quite interesting project so let's get started okay so right now I'm in an app called flutter maps and this is the same app that I just showed you in the emulator and rather than writing all the code in the tutorial I'll just be explaining to you the bits and pieces that you need to implement in order to get the same functionality in flutter so we'll be using two packages that are called Google Maps flutter and the location package so these two packages need quite a bit of setup to add them in your application and you can see that we can go to the Google Maps flutter package it's right now at version point 5.21 and this is at developers preview and I don't really suggest you to use this Google Maps packaged in applications that are highly dependent upon maps you can use this package in normal level applications that don't use Google Maps quite often Lee and for our application this will be quite fine so other than this Google Maps flutter package we're also going to be using the location package that is currently at version 2.3 point 5 and you need to enable Android X and you need to have the Google services in your application and we'll also need to add the permission that is called XS line location ok so let's see how to add these packages in our application and how to do the setup to use these packages so the first thing that you need to do is you need to come to the pub spec ml file in your application and you need to add these two packages in the dependencies section with their current version here and after adding the packages what you need to do is you need to come to this Android directory if you're going to be implementing for Android and for the relevant iOS side you can always check the package description and all the setup is given for the iOS also so we'll be discussing the Android side in this tutorial and let me just minimize the browser and when you come to this Android directory you need to go to the app directory in the source in main and here in the Android manifest file you need to add the permission for the location that is called access file location and also you need to add this API key to use the Google Maps in your application and once you have added these two things to the manifest file you also need to add Google services to your build.gradle file that is for the project you need to come to the build.gradle file for the whole project and you need to add Google services here so this is the basic setup that you need to do and for getting the API key that I just showed you here in the metadata tag what you can do is you can come here to the Google Maps flutter package and here you can see that in the getting started there is a link to follow where you can get your own API key and if you don't know how to get the API key I'll just link a tutorial in the description and you can check out the simple process to get the API key and once you have gotten that you can just add that here in the application Meredith so after adding these packages to your application you're ready to go with the maps and now we'll just look at the implementation on how to implement the features that I just showed you in the demonstration okay so talking about the layout of the application you can see that I have a really simple layout so in this I have a material app which returns my home page and this my home page is a stateful widget which contains a build function in which I am returning a scaffold so in the scaffold I have a simple app bar as you can see right here and has a Google map that is given to you by the package that we just added to the application so this Google map is taking up whole of the body and it also contains a floating action button the scaffold and it represents an icon that is for the location searching so there is not much to the layout so let's start with functionality so the very first thing that you need to add to the scaffold is this Google map this Google map widget is given to you by the Google Maps flutter package and the properties that I've given here are just the bare minimum there are much more properties to it but for implementing the functionality that I've just presented to you these properties are just fine so the one is the map type so I have passed the hybrid map which shows you the satellite image plus all the terrains and all the locations and so on so this is a hyper type of map I think this is the best one to show the location kind of things and the other one is the initial camera position so when the map loads for the very first time you don't have any location to load so in this case I am giving it an initial position that is the initial location and this is a static variable and static final variable that is of type camera position so this camera position class is also given to you by the same package that is the Google Maps flutter package and it requires our target and zoom so the target basically takes a latitude and longitude object and this class is also given to you by the same package and it takes a latitude and a longitude and also a zoom value so I think the zoom values that range from 15 to nineteen are enough so here it is fourteen point four seven and this is the initial position that we're going to load in the map and you can see that this is the location that the map has loaded so other than the initial camera position we have markers and circles so we'll talk about them in just a while so other than that we have this on map created so this on map created provides you with the controller once the map is loaded for the initial time so it provides you with a controller and for that controller we have made fields in the state of this my home page and you can see that this is called Google Maps controller and this controller is going to be quite important for us to update the map according to our needs so once the map is ready we're taking the controller from the function and we're assigning that to the state variable and once that is done you can see that we have floating action button here and at this point we have the initial map loaded so as soon as I click on this floating action button you can see that a permission is required so this permission is asked by this get current location function so I'm going to allow this and let us go to this get current location function and once we go to this function you can see that we're loading a marker so basically a marker is an image that I have added to this assets folder in the application you can see that this is a car icon and one thing to notice here is that the car is pointing upwards and this is quite necessary because the car represents the direction of the body that is moving on the map and when I click on this floating action button again you can see that the car loads and the direction of the car is important in this case because once we start moving the object in the direction this top portion of the car should be in the direction of movement so the type of image that you add to your assets is really going to be important and you need to keep it in a certain way to represent the direction of the user so in this case this is the car icon and its upper side is going to be representing the top direction so I'm going to close this asset okay so using the get marker function that is declare up above here were converting the asset that we're taking from the default asset bundle and we're converting the asset into byte data and that byte data is further converted into a unsigned integer list so that is useful in the case of maps so we have to convert that into an unsigned integer list so this line here is important to get the image data and this is going to be an asynchronous function so we have to wait for that okay so once we get the image data the next thing that we have to do is to get the location so for getting that location we're using a location tracker so location tracker is nothing but an object of this location class that is given to you by the location package that we added in the pub spec dotty amel and we initialize this location on top of the my home state because we're going to use this in throughout the class and using this location tracker in our get current location function we're getting the location that will be given to us asynchronously and so we're using a weight here and once we get the location we're using that location to update the marker and the circle so when you click on that floating action button you can see that the icon and the circle appears so this is basically because of this update marker and circle so in this update marker and circle function you can see that it takes up a location data and the image data so it takes this new location data and it takes out the latitude and longitude and it gives that to the marker and the circle so for the marker and circle we have two other objects that is this marker and circle that we'll be using throughout the class and we'll be updating the state accordingly so a marker is basically this image and the circle is the circle area that represents the accuracy of the location so for the marker you can see that I have initialized the marker and it requires a marker ID that separates this marker from other all the other markers if you have more than one and it takes up a position that is the latitude and longitude position that is given to you by this new location data so other than the position it takes a rotation so this rotation is going to be useful because in this case we have this car as an eye and we have to represent the head of this car towards the direction that the user is moving so in this case what we're doing is we're taking the heading property of this new location data and we're giving this as a rotation to the icon that we printed so if you remember I told you in starting that the direction of the image is really important in this case because we're using this head of the car as the direction in which the user is moving and hence the new location data dot heading and other than this rotation we're using a draggable to false and a z-index off too so as an index of two is basically necessary in this case because we are also using a circle so we want to keep the marker above the circle in the z-axis and you can see that the circle is below the car that is because of this data index and other than that we have this flat to true okay so what this flat does is if it is set to true the icon that we add to the marker will stick to the map so basically in this case if I tilt the map you can see that the car icon is representing the exact position that we added it to and even when we rotate the map it's going to stick to that map only and also when we zoom into the map and out of the map it's going to stick in that position so the flat property is quite a nice tool to be set true because it makes the much map much more realistic in this case okay so other than the flat property you can see that there is an anchor property so let's say we don't add this Anchor Point here this is the anchor point of the image that we're setting to the marker and let's say we have not added this anchor property and I thought we load the app and it's going to load again and I click on the floating action button again and you can see that the car moves ahead so basically the zero zero point of the car was at the ending of the car here at the end point of the car so let me just go to the assets and by default the zero zero point is at this point here so we don't want this here we want the center of the car to be at exact center of this image so for this case we're adding this anchor property that takes an offset of 0.5 and point five that reason the anchor point to the center of the image that is the car icon adhere so because of that we have the image at the center and at this point if I rerun the app hot reload and click on the floating action button again the image is going to be at the center of the location so at the end we're adding the icon that is by using the bitmap descriptor and we're creating the icon from the image data that we retrieved earlier and we passed on to the update marker and circle so this marker is a simple object all these properties are going to fulfill all the requirements that we have currently from the app and other than the marker we're adding a circle so this represents the accuracy of the location and its radius changes according to the accuracy so the first property is the circle ID that separates this circle from the other circles if you have others and the radius basically represents the accuracy so this accuracy data is given to you by this new location data that we have passed to this function and other than that we have the Zen index as I explained earlier and we have the stroke color and the center so the center is basically represents the location that we're getting from the new location data and we're converting that to the latitude and longitude and other than that it's quite a simple object and we have a marker and a circle and we're setting those using the set state function to really run the build function down here and according to the updated marker and the circle were updating the map with the markers and circles so this update marker and circle function is quite simple and let's come down to the get current location function again so last time we're at this update marker and circle that we updated by taking the current location of the user and after taking the current location we want to update the users location as it changes so for that what we're doing is we're taking the location tracker the same location tracker and we're adding a listener to the on location change and every time the location changes this listens to the new location data and if the controller is not null it uses the controller that is the Google Maps controller that we initialized earlier and it takes that controller and it it's the camera so basically it takes a new object of camera update and that is given to you by the new camera position and in the same way as we created earlier in this static here we're using the same function to create a new camera position and adding that to the camera so basically every time the location tracker gives us a new location we're updating the camera according to the new location and we're animating the camera using the controller so this is quite a simple function that takes a latitude and longitude as the target and a bearing so basically bearing is going to be a type of anchor point according to which the map will rotate and tilt property and a zoom so basically every time we listen to a new data were animating the camera and then we're updating the marker and the circle accordingly using the same function as we used earlier okay so for just a recap the floating action button that is represented down here in the scaffold once we click on that button this get current location function is called so once this function is called we get the image in the form of an unsigned integer list with the help of this get marker function and once we get the image we use the location tracker to get the current location of the user and we update the maps marker and the circle according to the current user of a current location of the user so once we set the initial location of the user we're using this location tracker to track for the location changes so every time the location changes were using this controller to animate the camera to move that camera to a new location and once we move to the new location we're updating the marker and circle accordingly so all the updation is done using this get current location function and you also need to remember that the location tracker subscribes to the new location data and you have to take that in a location subscription basically that is type of stream subscription and you need to keep that in a location subscription as I'm doing down here and once you dispose the widget we need to also cancel the subscription and if you don't cancel the subscription this can cost your device's performance okay so now that we know how the code works so let us just run the app and let me just open up the emulator so once the app you can see that an initial location is loaded that is given to us by this static location using the camera position that we initialized and once we click on this floating action button this get current location function is called and we're taken to a certain location that the user is given in so this location is set here using this control panel for the emulator that is in the location settings I have set the latitude and the longitude so once we send the location the location in this emulator updates accordingly you can see it right here so other than this latitude and longitude for a certain location I have this GPX file loaded in the GPS data playback and the way to create this GPS playback is using this maps to GPX sight so I'll just put the link to this website in the description and the way how the site works is that it requires a Google Maps link so what you need to do for that is you need to go to the Google Maps and you need to select a certain direction basically directions to move from point A to point B and once you get the directions like this you need to open the menu here and you can click on this share and embed map and once you click on that you'll will take into a link and you need to copy that link and come back to the maps to GPX and we need to paste the link here and let click on let's go so you need to click on this track points because we want those track points to track the location on the emulator and you can see that the file is downloaded and when we go to the emulator you can come back to this panel and let's let me just open up the emulator also so once you click on this panel you can click on this load GPX and go to that folder in which the file is downloaded and you can see there are many files like that and let me just click on this one and click on open the data is refreshed and the new file is loaded in the GPS data playback and you can set the speed also I'm just going to go by the default speed and click on the play so the location will be updated on the device accordingly and you can see that the car is moving according to the data that is represented in this GPS playback and the accuracy of this data does not need to be perfect because this is just a sample data and the actual device will work much better than this one so this is just a demonstration on how the app works and how the location update is taking place in our application okay so I hope you learned much in this tutorial and I hope you can implement Google Maps and locations in your own flutter apps and show real-time location updates in your own applications so if you liked the tutorial please hit the like button and the subscribe button for more further content coming your way so see you next time peace [Music]

Channel: RetroPortal Studio

Views: 152,952

Keywords: flutter, flutter google maps, flutter maps, flutter tutorial, flutter maps live location tracking, flutter location tracking, location tracking in flutter, live location tracking in flutter, google maps in flutter, google maps flutter, flutter maps tutorial, maps in flutter, flutter tutorial for beginners, dart, flutter android studio, flutter tutorial 2020, live Gps tracking flutter, flutter gps tutorial, flutter location tutorial, flutter maps and location tracking

Id: McPzVZZRniU

Length: 20min 37sec (1237 seconds)

Published: Sat Jan 25 2020