Flutter Map Navigation Uber Style Full Tutorial + Source Code

hello everyone welcome back to another flutter tutorial in this video i will show you how to implement the uber style map navigation in the flatter and also navigate to the google map and get the direction so let's see the demo how it works and i will show you how to implement that so we have our map let's set our current location right here and get the destination location right here and then here i can pass the latitude and longitude so by clicking of this get direction we will go to another map navigation screen and here the map will load of course the emulator is a little bit slow so we have the source we have the destination and we also have the amount of distance which is in kilometer 3.8 kilometer and if i change my location to right here it will update the route and also distance and everything it will be updated at runtime and if we click this navigate button it will open the google map from device and get the direction from our current location to the destination location and open it in this routing mode just like the uber that they are giving us and we can also make it navigate which is the feature of google map by default we can come back to our application and do whatever we want so this is what we are going to implement in this video if you like the video at the end don't forget to like and subscribe i will provide the source code in the description and all the other things which are required so you don't have to worry about that so we're talking too much let's get start and see how we can implement this one all right before we start you have to add the packages which are required in this project those are url launcher google map polyline and location and then you have to come to the build.gradle and change the minimum sdk to 20 and nothing else coming to android manifest add these permissions into your application and also down here you have to add the google map api according to your platform whether it's ios or android i have already shown this in live location tracker tutorial i will put that in the card here you can go and check it i will not show it in this video it's very simple just going to google developer and getting your api key and add it here like this then we are ready to start with our ui interface so in our main page we have a simple design of two text fields and one button where the text fields will get the latitude and longitude of the destination position and the button to navigate to the next page i will do that design very quick and show you how i did all right this is our main page a really simple design with one text two text fields and one button to navigate to another page now let's design our navigation screen so in the navigation screen first we have to import the packages that we are going to require so these are the packages that we require and this mat is for calculating the destination between the current position and the destination position now to get start first we have to get the destination detail and longitude from the main screen now down here we have to declare the variables that we are going to require so these are the variables which we are going to require in this screen controller is used to access the google map later on and update its value at runtime then this pulley line is the actual line which is drawn from source to destination it will be a straight line but we have the pulley line point which the google map direction api will provide us the individual points and the closest direction from source to destination so using this we can curve our pulley line and make the accurate path then we have got the location instance and source and position marker which is used to add the marker for the source and the destination then we have got the current position which will be updated every time we change our location then this is the current location temporary which uh for the first time when we come to this screen there should be a default value otherwise we will have the null error and this subscription is used to stop the location listener because when we come to this screen i will turn on the listener and it will listen forever for the location update and we use this as location subscription to stop that and cancel that whenever we go back from this screen to another screen so in in its state we have to do two things which is setting the marker for the source position and destination position so these are day two functions which should be around as soon as we come to this screen let me write the function for add marker down here okay so i've created this add marker function and inside here i have assigned the source position marker and destination position marker into type marker and down here i've passed the marker id which should be unique and the position for source we have the current location and the position for destination we have got it from another screen and the icon is your choice whatever you want and for this function let me write it down here so inside this get navigation function the first thing we do is ask for location permission once that's granted then we come and get the current user location and assign it to the variable and then we start our location listener and inside the listener every time the location is updated we have to change the marker in the map and then we also have to draw the polyline every time the user location is changing and we have to show them the nearest or the closest path accordingly we also have to show the destination how much destination is remaining so that's all we did here we have first created the google map controller where we access the google map and update its value at runtime here we require that and then up to here is all about asking the permission once the permission is granted we assign the current location in the current position variable which is temporary and getting that and assign it into our current location which is we've created here updating that then we start the subscription and listener to our current location and every time our location is changed we will get the new data here inside this current location and using this controller of our google map we can animate to new camera position and get this current location and provide the target of this current location to our new position so this line will show the marker info always and we don't have to tap on the marker to show the information about it and we needed to show the remaining distance in kilometer we will calculate that as well and down here in set state we have to set state our current location with the current location which we are getting from the listener and we update that with our current location and also we have to update the source position which is the marker i've told you inside here i say that we have to calculate the distance between the source and destination so i will write the function to pass the destination position and down here git direction is also the one which will draw the polyline and we have to call it inside the listener as you can see here you have to call it inside the listener to be updated every time in order to get the latest and closest direction we can also call it outside the listener but it will be called only once and this one is good to call it every time we change our location and it will give us or show us the nearest path so down here let's write our get direction function so inside this function we just passed the source and destination positions and get the points between them using this function which is provided by the polyline package this package and this function will require you to pass the google api key which you can get from your android manifest the one that you've passed there and here and then you passed your source and destination for this to use this you have to go to your developer console and enable the direction api which is not for free and you have to pay some amount according to your use down here once we have got the points and we added those points into our list then we pass that point into the add pulley line which will draw the pulley line into our map and in here we have to define the pulley line uh specifications how it should look the color the id the coordinates and width of the line then we have to assign the pulley line which is the variable we have specified up here and we assign these lines or these points to this one then we set state and update everything and now it's the time to write the function for calculating the distance so in this function we have to pass our source and destination latitude and longitudes and this formula will calculate everything for us and return as a double which is the distance between the source and destination and using this function i just pass the destination and source and return the value now we called it up here so now is the time to write our actual screen for map i will write that very quick and explain it for you all right so this is our very simple interface i will check if the source marker is null then we show the circular progress indicator otherwise we show this stack which is the actual google map and at the top of it we show one button for going back to the previous screen and another button which will be placed at the top of our map and then by pressing of that the url launcher will launch the google map from the device in navigation mode because here we have passed google.navigation and as the query we will pass the destination latitude and longitude along with our api key and then the rest will be handled with the google map application so let's run our application and see how everything looks if we haven't done any mistakes so we have our app running let's get some latitude and longitude and paste it here down here if i come to the map and zoom in first i will set my current location in here set location and get a destination location out here by copying this latitude and paste it here and also copy this longitude and [Music] paste it here and then pressing the get direction it should be able to navigate to oh we haven't just write the code for this one to navigate okay so i have written the code for navigation.push to this screen and double dot parse the latitude controller.text and longitude controller.text so if i save this and now just press the get direction should get us to the map and everything should work smoothly okay we've got our position but we forget one thing we didn't actually pass the api key down here in getting polyline that's why it's not showing i thought i will do it later but i forget down here so i will get it from android manifest copy paste then restart the application so yeah it's working very fine and you can also change the marker for source and destination according to your need you can add icon or image anything you want also this polyline color can be changed if we come to the pulley line the color will be blue it's very easy just have to do that and it will be changed to the blue so right now every time we change our location this listener is on as you can see in the log we get a lot of logs because this location listener is on and it listens to the updates in the our current location even if we change our location to some other point here let's suppose in here i said state it changes the location along with the polyline it updates the pulley line as well because we have called the polyline inside the location listener this one that i've told you it is inside the listener function that's why it is updating as well and another point that i have to mention on back price of this one in the design i have done something on back press of this one navigator dot push and replace to the my app but before that on this pose we forget to do the dispose as well this pose before disposing this screen we have to also do the location subscription dot cancel because whenever we dispose this screen we have to cancel the location subscription as well otherwise it will run forever so if we test it right now if we press the back button it will come to the previous screen and there is no log of the new update for the location nothing is coming here if you can see let's also test out our routing which will be in the google map live if i press this route it should open the google map in the director mode or routing mode whatever you call it so it's opened in the route mode as the uber application is opening like this way you can also go to your app and minimize this and it will work this way so this is how the application works if you like the tutorial don't forget to like subscribe to the channel and show some support if you have any problem just comment down i will try to answer otherwise see you up to next video

Channel: Lazy TechNo

Views: 51,563

Keywords: flutter uber, flutter uber tutorial, uber maps flutter, uber like app in flutter, uber driver app flutter, uber flutter, uber in flutter, uber clone using flutter, flutter tutorial, flutter beginner, flutter maps, flutter map navigation, flutter route navigation, flutter route to map, flutter navigate to google map, flutter google map

Id: hneXIQUmKfQ

Length: 15min 38sec (938 seconds)

Published: Sun Jul 24 2022