Flutter | Get user current location and show it on map | Proglabs

hello guys this is junaid khan and welcome to my channel this is the second video of the playlist in which i am showing you that how you can integrate google maps in your flutter application in this video i will show you that how you can get the user's current location and show it on the map so let me show you first that what we are going to do so as you can see google map is embedded and there is a button for getting my location once i click on this it will take me to my current location with a marker okay so that's what we are going to do so and i am going to make the changes in our previous project which i developed for the previous video this one in which i showed you that how you can integrate a simple google map so for this we are going to use a package named as geolocator geo locator and the version will be 8.0.1 like this after this you need to click pubget it will take some time depending on the internet connection done now we need to create a new uh dart file for showing this connect location and show it on the google map so for this i am going to create a new dart file current current location [Music] screen like this then you need to type sdf current location screen after this you need to press alt enter to import material like this now we need to open our home screen where we were showing multiple buttons so right here we need to create a new button to navigate to this screen i'm just copying pasting this i think so like this this will be user current location and we will change the route of this to current location screen like this now i'm going to run our app and see what we have done so far okay so the app is installed successfully and while i was trying to run my app that then i encountered an error that location variable.s is not found in something like this if you face any kind of this error then you can simply open your build.gradle file in the android directory and you can just um simply upgrade one version of compiled sdk version 231 okay once you do this then i think so you will not face this error okay so the let me show you that what we have achieved so far [Music] so this is what we developed so far okay so once you click on user connect location it will take you a blank screen because we haven't done some anything on that screen so let's start by working on current location screen okay this one first we need to use scaffold appbar appbar again title user i'm again making a mistake user current location alt enter add a const modifier center title true now we need to use body and in this body we will use google maps like this now we need to create a set of now we need to create a set of variables um first one is google map controller like this i am making it as late because we will initialize it in our body in our this google map widget then we need to use initial position camera position initial camera position and in this camera position we will pass latitude and longitude like this and zoom level 14 like this after this we need to create a set of markers which we will show on google map markers like this and now we need to pass markers markers zoom control enabled false you you are seeing a plus and minus button on google map that's why i'm just i don't need those so i'm just enabling them false if you need them then yeah you can make them true map type dot normal and on map created google map controller sorry controller like this and we will pass this controller to our variable like this okay so this is what we have done so far so let me press hard restart and let's see that what we have done so let me show you see uh user current location is being uh sorry right now only the google map is being shown once you click on this you will see a google map with the initial position now we will create a floating button plotting action button floating action button dot extended on pressed right now we will keep it as empty next let's see what we need to pass text yeah widget text current current location like this add const modifier and icon i can start location i think so we can find some yeah and const modifier we found my tower code like this so again hot reload and see let me show you see floating action button is is being shown okay now we need to create a method to get our user's current location for this we will future because this will be our promising function position this will return a position type of variable determine position async like this okay bool service enabled this variable will be used to check either the service for the users gps is enabled or not so we can use this variable for that and after this we will use location permission permission service enabled await jio locator geolocator dot is location service enabled if this is true then we will if this is false service enabled false then we will return future dot error location services are disabled like this and for the permission permission await geo locator dot check permission either our location permission is enabled or not if permission equals equals equals to location permission dot denied because uh uh when we are when we run this application for the first time and we ask the permission from the user then it will be denied it will be in the denied state so that's why we will check that if it is denied then we will ask for permission permission await jio locator dot request permission after this if the user still deny the permission location permission dot denied then we will return future dot error location permission denied if all things go in in a in smoothly way or we can put another check for example if the user denied the permission forever then we can location permission dot denied forever so in this way we can't ask the user for the permissions again then the user have to open the settings go to our app and allow the location permission manually return future dot error location permissions are denied are permanently permanent denied like this now if everything goes fine then we can position position await geolocator dot get current position like this and return position variable like this now we have to open the on press function position position await determine position we need to make this as async as well if we got the position then google map controller which we initialized here dot animate camera camera update dot new camera position camera position so for this we need to pass camera position variable target here we need to pass latitude and longitude which we can get from position variable position dot latitude position dot longitude and zoom 14 like this after this we need to create a marker so first we need to create the list of markers markers dot add marker marker id marker id current and position negative longitude and again we can get the latitude and longitude from the our position variable position dot longitude like this so we are getting an error here let me see so it's mean okay yeah sorry we need to remove this const and we need to add a const here like this and after this we need to set state so it can show the marker on our google map so let me try to hold reload and see let me show you once i click on this nothing happens and we will go to oh right we didn't define the access file location or access course location in our android dot and android manifest file so we need to we need to define these two permissions here we can just like this so as you can see that we have defined two permissions users permission access file location and access course location so we need to hot restart our app instead of hot reload so the app is restarted successfully user current location still i think so it's have an error yeah we need to stop this application and run this application again so it would reload our android.androidmanifest.xml file again wait wait wait wait so it can restart so the app is installed successfully use this user current location click on this button and now you can see that it's asking for the permission so when i click on this while using the app it will automatically take me to my current location so you can see that this is currently my location and this is it so in this way by following this tutorial you can easily integrate google map you can easily get the user's current location and use it anywhere right now i'm just pointing it on the google map but you can use it anywhere okay so in the next video i will teach you uh another useful tutorial about google maps and flutter so till then take care bye

Channel: Proglabs Official

Views: 48,784

Keywords: proglabs, flutter maps live location tracking, flutter, flutter location tracking, location tracking in flutter, live Gps tracking flutter, flutter gps tutorial, flutter maps and location tracking, flutter maps tutorial, User Current Location, Get User Location in Flutter, Flutter Tutorial, Flutter Location, Get user current location, how to get current location, flutter tutorial, get current location, google maps, get current location in flutter, maps, location, current location

Id: 9nw5yGrBbw4

Length: 18min 29sec (1109 seconds)

Published: Thu Feb 17 2022