Flutter - Google Maps ft. Nearby places, polylines, directions and more...

so guys welcome back to another video and in this video we are going to be talking about google maps inside your flutter applications guys uh i've already made a video on this like two years back and then i updated it one year back and then a lot of people have been asking me to update this with the latest latest google maps flutter plugin that is this one and yeah so this video is pretty much going to be an update for my previous google map videos as well as we'll also see like uh uh like some new new cool stuff that we can add to google maps inside our flutter applications okay so first of all let's see what we are going to be building in this app today i have a blank application here let me just show the app first let me just show what we will be building first and then we will talk about the other stuff all right this is the app that we'll be building today this is actually bringing google maps and then adding some more cool stuff on top of it for instance uh let me just click tap here it shows a search icon and a directions icon right a navigate icon i'll just tap on the search icon you get a search field at the top now search for whatever you want ah maybe loss altos ross altos ca usa the first result i will just tap on it it automatically suggested me that result guys i didn't do have to do anything okay it automatically suggests a little list of places and it automatically marks that and this could be anywhere in the world i could simply be doing paris paris france that's just a custom marker that i'm using okay so yeah this could be anywhere in the world this is one thing and the second thing that we'll be adding is we'll just close this the market disappears i'll just click on this and then it asks for ask me for a direction in there uh i think right so let me just give pasadena pass dina [Music] santa barbara barbara you can see that there is ok let me just use a bit simpler one as you can see here there is a poly line drawn between these two points denoting the ah root between these two right this is one thing we will be seeing as well and the third thing is the interesting one uh let me just get into it okay this is not fair oaks okay and let's tap on this just tap on this you can see that there is like a circle appearing on this right we'll just drag the radius slider and the circle would increase or decrease you will just have the size tap on the near me the places icon there it automatically loads up a lot of places in that vicinity right if i just scroll through it it will just show me the places one by one it's cool right really cool now i could simply tap on one of it you can see that the map has been moved a little and there is a card showing an image the address and the contact details of the particular location i just tap on it it flips to show the uh reviews these are actual reviews guys i haven't like hard coded this stuff or anything these are actual reviews pulled from google for this particular uh red red cottage indian suits and i also can see four photos of that particular place these are actual photos as well pull from google similarly let's just project in twist western executive suits target list to target as you can see the icon keeps changing as well this is target so it's just okay it's cool right you can just see the photos of that place as well as reviews ok ah now one more thing i would show here is just zoom out a little bit tap on this again you can see this right and let's increase the radius near me now a lot of places have been loaded in this vicinity right about 20 places if i need more places just tap on this timer once again you could see that there are few more places getting added right so cool cool right so this is exactly what we'll be building uh in this video today and i'll be taking you through each and every step of this there will be time stamps for all the different features that you'll be building in this app so yeah guys uh let's get started let's get started and then let's start build this awesome app together all right guys let's get started now uh as you can see i have blank flutter application that i just created now and uh if you look at pubspec dot aml i have added a few library files here and this is the crucial one the google maps flutter plugin this is the one that we that will be using to bring google maps inside our flutter app now uh apart from this what i have done is i have also added like a assets icon here as its directory here that will ah where is it that has like a set of icons that i'm using as markers and also it has fonts uh which i'm using throughout the app that's it okay i have included all of that here and apart from this you also need a key from the console developers consolidate let me show that okay this is the console.cloud.google.com you need to have an account here and once you have an account click on credentials the project will show up here and then you click on credentials and that will be like these these three will be automatically created for you you need to create a new one this api key file similarly you need to like create i'm going to be like deleting this off since i already have this api key for some i'm just showing you guys that's it uh similarly you need to like create a new one and then once you created that and you got the key from that just get back into your app go to android app source main androidmanifest.xml and then give the key here i have added the key here right as a metadata similarly do that and apart from that you also need to get into build.gradle and uh minimum sdk version set it to 20. if it's 16 the app won't run so just set it to 20 and uh yeah that's about it guys that's about it to get the app running on our mobile device so let's get started let's first add like a small animation like a splash screen and then from the splash screen let's take the user inside the app let me remove all these first i will just create a stateful widget splash screen and then inside this and have any statement that super dot unit future dot delayed uh duration seconds sorry duration seconds [Music] [Music] push replacement and then you to be i'll dynamically create a new root material page root builder context context home page fine just put a thing here and then inside this we need to have like this will automatically redirect us to the home page after five seconds now we just need to ah put something here in the now we just need to put something here in the uh actual screen itself so let me just scaffold a small animation right at the center body center child container container height 200 and width this will be on again 200 and child this will be a lot easier builder dot asset i have already downloaded that lotti asset and then placed it here inside my assets directory any message all right ah you can obviously i think you would you guys would know this this is a low t files website where you can like get animations guys for instance if i need a loading animation you see there are like hundreds of animations that people have contributed and these are like really cool you can use this inside the mobile app just click on this there is something like this right click on download and this json just download it as a json and after you download it as json just place it inside somewhere like inside your assets directory i have a map animation.json file here and then simply use this i already have added this plugin here like you could see this lottie plugin so simply go ahead and use this here as such assets any message map animation dot json fine so everything is done here except the fact that we need to create a home page so we'll just have like a screens new folder screens new file home page page dot dot fine you understand what i have done here right i am simply adding a splash screen that will redirect me after five seconds to this home page it will simply replace the bottom most screen to this home page and meanwhile it will for the five seconds it's present it will just show a small map animation i'll just run this to show you guys how you might wonder what has this got to do with maps it's just a little fancy animation that i just added guys you can just use the time stamp okay if you had seen this you probably okay let me just run this on the app all right guys let me just restart the app once to show you guys how the splash screen looks now okay i restarted as you can see here there is an animation loading up and this is our home page right so yeah let's just jump into maps guys we have been playing around enough already so inside the home page first let me bring in the maps and then there is a lot of stuff to show you guys first before bringing in a map i'll bring in a completer google map controller but i'll just give single child scroll view and this will be child all right uh now we have a container as the first element on the stack i'll just give a child uh this will be a google map widget okay google map widget inside this i'll just give map type map type dot normal and mark markers we don't have as of no initial camera position i'll give it as i'll just copy the camera position from here what have they given here here there is a camera position right copy this and then use it here fine ah now i'll just use k google plex and [Music] on map created on map created google map controller controller map controller controller this controller dot complete control fine and on tab okay that will do later on let's just save this all right now you can see that the map has initially opened up and we are at the googleplex uh let's just first create the fab circular button at the bottom so this is the scaffold right yeah okay and say this will have a floating action button floating action button fab circular menu children ah [Music] [Music] [Music] save this all right now you can see that we have a nice looking fab button here right cool now ah let's dive a little bit deeper and then get the places to work search to work okay to do that so in order to first we need to have some code to toggle the search right so in order to toggle the search we'll just have uh search toggle equals true and then we will have a couple more variables called radius slider equals false and pressed and get directions false okay now you might wonder what the other variables are used for we will be using those in the app as we move on so first let us just go and create all these variables i will do that quickly you ah now that we have got that done as soon as the user taps on the search button we need to like show a text field at the top as well as a close button as well as as soon as you start typing on the text field you need to like return a fresh set of results from the places api ok ah that is the auto complete results auto complete there is entire document detailed documentation given here under the google maps platform under places guys so all we need to do is in simple terms all we need to do is make a request make a request to a particular url this url in this case and it will return a json you can get either json or xml we will be using json in this case and we will simply return the auto complete results in a need dialog at the bottom of the text field that's it ok so now ah there are two ways to approach this entire dilemma one is we could either use set state and then repeatedly keep rebuilding the whole tree or we could use some state management solution for now let's use a state management solution called river pod this state management solution was introduced by a developer called remy and yeah thanks to him let's go ahead and just use that guys rather than me just talking about it so all we need to do is just do flutter reverb port that's it save this and to bring this inside our app it's like really simple all we need to do is here it's just constant my app right instead of this add constant uh provider scope and you child my app that's it order scope you need to add an import yeah fine so save this now we could use providers wherever we want inside our app and providers are used for okay let me just give you a small example so that you guys will better understand let's get back into screens now what we need to do is first we will create the text field then we will start worrying about the providers and all that so as soon as he processed the search toggle i need a text field using which i can say straight to this container search target padding edging said start from left to right 15 top would be some 40 it would be again uh 15 bottom will just give like five fine and fine and [Music] inside this ah [Music] [Music] [Music] [Music] [Music] all right let's see what we have achieved so far i'll just save this now obviously this won't be displayed because we haven't tapped on that search right i just tap on that you can see this right we have this amazing text form field with the close button here so if we type something into this now nothing would happen if i let let me show you oh why did i open this i am just typing something uh google nothing would happen right we need to like bring up auto complete results for this so what should we do let's do some coding for that ah first of all let me finish this close button close button as soon as i close it should reset my marker the marker on which the place i mean the place for which the place the marker which was placed on the search result as well as i should reset a lot of stuff guys hold on one pressed [Music] set state search toggle equals false and yeah for now let's just stick with search toggle so if i press on this it closes if i press on this it brings it back fine ah now what we need okay we need to set the controller search controller dot text yeah fine it works ah ok now let us do some coding that will actually bring up the autocomplete results for us once again i am going to be particularly using a specific state management solution called providers okay if you if you are familiar with other state management solutions in flutter kindly make use of them as well uh i'll use a simple change notifier provider change notifier provider our providers are really easy to understand okay so let's just go with a simple change notifier provider there are different providers there is a provider called future provider that is like really useful in a lot of in a lot of apps where a lot of http calls are being made there are there is also another provider called state notifier which can be used to like notify about the state of a particular particular flag that you are using throughout there are a lot of providers guys okay let us just go with the simple one so what i am going to be doing is making use of something called a change notifier provider and as soon as you start typing here that should make a trigger a call that call would return a set of results from the auto complete places auto complete api and those results would be like displayed inside a small box we we are not going to be using set state at all that will entirely be handled by the providers and tapping on one of those results will take you to that place will take the user to that the camera would move to that place that's it now what we will be doing is first let us ensure that we get the results and then we will go to the state management thing so in order to get the results we need like a variable right ah not a variable exactly we can't just trigger the call randomly so what we'll do is we'll first have introduce something called a debouncer fine ah this will help us to throttle the calls as soon as you type it won't like we can add a small delay like 700 milliseconds a few milliseconds that will help us to like make specific calls that is if the user types too fastly it won't like make calls for everything it will just go okay you'll see that you'll see that uh now what we'll do is we'll first fetch that and then make the call okay i'm here creating a set here first that will hold the marker in in which would be placed inside the search result okay not search result exactly when the user taps on a particular search result that marker will be placed for instance if i am searching for paris and i am tapping on the first result that appears paris would not only be shown at the center of the map there would also be a custom marker placed there as well that's that custom marker is going to be held in this particular set okay ah now i'll just add that here markers fine ah let's just go here and then now ah this is on this is input regression unchanged value if ah d bonds dot is actually we had a demonstration if t-bone start is active what's wrong with this oh sorry they won't start this active faults and then we'll introduce the demonstration start demons equals timer duration milliseconds 700 async you understand what is happening here right yes if if the user types too fast we cannot be making calls for every characteristic so what i am doing is i am using a small delay of 700 milliseconds that will throttle the typing speed of the user if i type 3 characters too fast then only a single call would be made and so after this small throttling i am just using an async value hold on as in call to make the call to return the auto complete results so if value great lot length greater than sorry greater than 2 which means there are three characters now now let's create a provider a new folder over it was we'll just name this as uh we'll just name this as search places search places dot dot fine and inside this final we'll just have to change notifier providers like i said before final place results place results provider equals change notifier provider place results last results we don't have this as of no right hold on let me just go ahead and create the particular class oh sorry class place results uh extends change notifier change yeah okay ah list okay this is going to be a list of auto complete results right so what i'll do is i'll have model directory models and inside this i'll have a file called auto complete result dot dot fine and inside this will have well simple serializer json serial is a dc releaser okay now there is nothing fancy in this this is a simple json d serializer a serializing i'm sure just serializing a delt json object that's it ah where did i get this result from this result is nothing but the one that i get from here this json where output may be this json that's exactly what i am using here right yeah you are getting this result right description match substring place id reference structure formatting if you look here i am using that description match substring place id reference etcetera exactly the return result i am just simply okay this is a model and then lets just get in here and once again list auto complete result auto complete result all returned results equals blank list void set results set results all places uh all return results equals all places notify business you understand what's happening here right whoever is watching watching this particular provider now will have access to this particular list so i can set this list set the results wherever i want inside the app from whatever file i want whichever screen i want and those results will get stored in this all return results variable if i want to fetch this from a different widget different screen i can simply listen start listening to this provider and get that results so this will notify all the listeners throughout the app whenever there is a small change in this particular variable that's it a very simple provider we'll just create one more and then move on final search toggle provider equals change notifier provider change the search toggle search toggle return search sorry at least [Music] fine ah now this will have this search toggle variable and i can like set it on and off as i need that's it this is a simple file that gives us two providers that we can make use of all over the app case how can we make use of all of the app because in main order this entire app runs inside a provider scope that we have created and let's get back into home page now what we are going to be doing is if ah not search flag search flag okay search flag i haven't hold on guys first we need to get the providers working here so in order to do that finally final uh all search results to start reasoning just do ref.watch this won't work because you need to extend this stage should be consumed consumer state you get it right i am just using a change this my normal stateful widget into a continue consumer stateful widget since i am going to be reading providers here and i have also extended this with the consumer state and [Music] what i have done here is simply having two variables find and all search results in search flag that will help me to okay just i'll just show you so it's flag dot search story if it's false i'm searching setting it to true since the search has started and then i am just in reinitializing the markers set okay ah now i need to actually make the call so list autocomplete result autocomplete result search results search results equals this is the actual async call that we'll be making so i'll create one more folder called services map services dot dot and say this i'll just have a file call no i'll have a function called uh okay first let me write this class map services and say this first we will declare two final variables finally string key equals the actual key of the ah app hold on fine ah the key and the types equals geocode this is exactly how we do it here place autocomplete json and at the end you need to give you your key your key okay ah now we will have a file sorry we will have a function future this will return a list list sorry list auto complete result auto complete result search places string search input async um final thing url equals [Music] so i'll just give a response equals await http.kit you are i parts url use an alias http convert dot and convert dot json d4 json to response stop body fine and i have results equals js on predictions predictions is nothing but the wait this one okay the head of the json predictions is list i am simply typecasting it okay results is the list and return results dot map autocomplete result auto complete result dot from json ah e dot to list fine you understand what is happening here i hope you understand what is happening here i simply am using the url which i got from this documentation and then giving my search input types and key here my key here from google and then what i'm doing is i'm simply getting this i mean using a get request on this url once the results is retrieved i am just simply converting those results to a list and this this list is returned as a return back to the calling function getting back to home page await map services dot search places value now if search results start length not equals zero uh all search results start all search results dot set results search results this even if it's zero we need to set it blank so that others can't yeah [Music] auto complete receiver empty list fine ah set this as well so now if we run the call and then we get a okay this can't be that if you run a call and then ah it returns i mean the results are returned it will be converted into a list and that list will be passed here and then stored in the provider as well so now all we need to do is display that list in a neat way in a neat way so as soon as this is toggle search is stoppable we need to get it displayed position left 15 18.00 uh [Music] [Music] [Music] [Music] bye [Music] [Music] [Music] all right now we have just created uh two two card like things that will like display the list of return results guys that's it now let's create this build list item function as well so that we can actually start to see some results that are getting result that are getting displayed whenever we search for some location so [Music] [Music] [Music] fine guys uh now that we have return everything let's just run this and then once the user starts typing inside the text field what we are doing is you are just making a call the search places function would just return a list of places and then when that list is returned immediately ah a container for loading that list is displayed and inside that the list items are displayed one by one in a row that's it it's very simple guys i hope you get this guys uh let's move on let's let's just tap on one of these and then upon tapping on it it should immediately take you to that particular location and then place a marker on that particular location let's do that so i'm just tapping on this close if i tap on this close this doesn't disappear right so we need to make this disappear as well how do we do that let's just go here hold on in order to navigate to that particular location we need to first get that particular state so what we'll do is [Music] we'll write another function to get that particular location so that function will be called as get place that's just going to be just one one place that's going to be returned so it's not a list future sorry sorry future [Music] map map string go to so kept places replace this thing once again there will be you you place details this one this one i'll just copy this and paste it here guys cool now we have a url we need to ah final string url where response equals await http dot get url bars you url uh where json equals convert dot json decode response dot body add results equals json of results dot sorry ass map scheme dynamic and return this results this results this generation of results is nothing but the results that i retrieve get from here this result okay yeah not yes result thank god i was just about to show you guys otherwise i would have been yeah okay now we have written this function here and we can make use of this function here to make a call and we can call that function from here that's what i am trying to say get place place item dot place id okay and [Music] go to once we get the place we need to navigate to that particular set place right so we'll just write a function called future future void go to go to searched place we need the latitude and longitude to put double and this will be asynchronous since it's returning a future async uh no it's not returning it's actually void quarter final v map controller controller equals await controller dot future and uh controller controller dot uh anime camera uh camera update camera update yeah camera update dot new camera position new camera position camera position camera position target would be the lat launch coordinate slot launch uh lat launch and you can even specify zoom i think zoom we assume uh 12 maybe 12 and closes and all right now that will take us to the search place right we will just place a marker exactly on that search place so that it looks really good okay in order to do that what we need to do is we will have a function called set marker and then we will simply call that function and then y set set marker marker set marker point we just need the point where counter equals marker id counter plus plus and so what we'll do is final mark mark equals marker marker id would be our actual counter ah mark ready marker id marker id and inside the position point on tap we don't have an even for that currently and icon bitmap descriptor dot default marker fine and finally uh set state so instead markers mark start add marker fine now ah as soon as you close this you need to clear that markers array as well search this i mean say this this is play sale let me see and here what are we passing ok place item dot place it this one we are doing it correctly but here we didn't we'll just restart now sorry guys you need to enable the location permissions i forgot to mention that go back to source android manifest and right above this at the top save this are you saving all just restart okay sorry we need to give the code to go to search place and the latitude and longitude coordinates here right so this go to search plus latitude and longitude coordinates look geometry location lag launch okay geometry no not geometry place [Music] let me place this geometry and location latitude same way i need to save this fine let's search for something else new york new york let's just tap on new york cool right similarly we can go anywhere guys fine similarly you can like search for any place and then it will automatically return result guys any place ah denver colorado and this is all over the world as well not just in u.s this is how you can search get auto complete results and then use those results inside the app to like navigate uh two different places now let's go ahead and proceed with the drawing polylines on the map to denote routes between two locations okay to get the route between two i mean to draw polylines on the map and to like denote the route between two different cities or two different places what you need is uh two text fields to turn out the origin and destination points right so first let's just create the ui for that uh okay below this and just add something called get directions okay if it's true then i'll just do so [Music] [Music] [Music] [Music] [Music] bye [Music] fine uh if you just save this let's see how this looks on the ui okay technically it won't look like anything because we need to uh where is that oh yeah here it is ok now let us just tap on this if i tap on nearby it's beautifully displaying me and origin and destination text fields and this has two buttons one is the search button that we'll actually be using to make the search feature and the other one is the close button let's just tap on the close button and see yeah it disappears right okay now let's write some actual code that will help us to search and then retrieve places then we will just use those retrieve place i mean we will just get a set of polyline points we'll use a package called polyline points to plot that particular point uh my sorry plot that particular poly line on the map so that it looks like a root between those two places okay so in order to do that first let's write a function uh map services map services here we will write a git direction future map once again string dynamic it directions this will get taken origin and destination fine inside this uh once again we need a url finally string your url equals i think fancy in this i have just given this url i just copied it from their documentation and then instead of here i just added this origin this destination and the key that's it and after that we need to just get this url as usual so where response once again response equals away http dot get okay url uh sorry uri dot ura dot parts url these are nothing but this these things that i am writing here right roots bones north east these are nothing but it will show you if you go to this directions let me show you okay here you can see this map startup this is exactly what we are using if you look at the response if you look at the response yeah this is a sample response roots bounce north east and southwest right this is exactly what i'm using here it's not nothing fancy it's just from the response itself south west now you might wonder why i am doing this instead of that's because i haven't yet written a serializer like this for that response so and i won't be needing all the fields from that response so i'll just pick hand pick whichever field that i want south list start location now this is the crucial point here is where we get the polyline polyline uh json roots zero polyline points is nothing but a package that we that we have here clutter polyline points okay i'm using that to decode that points that's it decode that point so that we can have coordinates to plot that actual points on the map 0.9 points or decode polyline and here we just do the same exact same thing now we just return this return fine now we have a function a nice function that will give us a decoded polyline all we have to do is call this function here so let's just go here icon start close not this one ah yeah this is the one search inside this where directions equals await map services map sources dot get directions [Music] origincontroller.txt destinationcontroller.txt fine ah save this all right ah now what we will do is first we will reset the markers ok and then we'll need a polylens set as well right if we create one before now fine ah now that we have two sets we will write a function called um we have directions right set polyline set poly line directions uh directions if you remember the variable name we used was body line decoded poly poly length decoder fine and we need to write this set polyline and we also need to place two markers on the origin and destination so what we'll do is go to place we will have like this ah we'll have a function like this and then as inputs will pass directions we had a what was that start location in location start start location that you will be similar to this the only difference is it will have it will take two sets of you just need to put the bounce camera for it or new lat long bones lat long bones padding just give 25 bounce we already have bounce black long bones so bones is stable actually i don't think we can give it like this we need to give the specific coordinates lat long bones off now you need to give inside this sorry what am i doing uh southwest lat long coordinates latitude would be sw and inside this we need to give like lat longitude and similarly we need to queue for fine here you just need to keep cool and now we have this go to place we just need to give set polyline method as well right so let's just do that and we'll just write above this fine you understand what is happening here right i mean i hope you understand what's happening here all you are doing is setting a polyline that's it once you're set to spawn line it should get added here polylines polylines say this and now if you enter enter a origin here where is it yeah origin here and a destination here and you tap on that search it will automatically fetch the directions i mean caller call call the make a call to the google map directions api and then it will trigger a function called go to place and then it will set the polyline for you so go to place will automatically try to fit the entire thing inside your viewport and viewport as a mobile device here it's nothing this is the fancy term that's it and [Music] this will obviously set the polyline polyline we have obviously written a function here set polyline this will add the polyline to that and [Music] code to camera we have here go to search place we have here sorry go to place we have here let's just try running this and see what happens before running this we need to just to denote the two to origin and destination we'll just set markers set marker lat launch latitude oh sorry not legit yeah latitude and longitude one more set marker and the destination attitude and longitude as well since both are going to be within the viewport both of these will get displayed for you and launched you save this ah fine now let's just take our mobile device and then check fine let's just try this on our mobile device now we will just tap here click on directions and then here we'll just give san francisco los angeles then if i tap on what just watch what happens if we tap on search now wow it immediately plots it for us and not only that it fits it into the viewpoint viewport as well right let me change this now watch it will automatically try to fit it into the viewport guys that's the beauty of this sacramento search okay it automatically tries to fit it here right and there is a beautiful polyline drawn here as well i think we could slightly increase the width of the polygon anyway yeah this is how you plot a polyline between two points to show the draw it on the map and then show the route between those two uh those two cities or whatever points you want guys that's it if let's do free fremont cool right ah anyway let's move on let's move on rather than me just talking about it it's more so we have seen how to search for places and then display our autocomplete results autocomplete result and then tapping on one place would take us to that place that is we have seen how to do that and then we have seen how to plot a polyline i mean draw a route between two different cities or points was in both of that now if you tap on this this will disappear but still the markers and the polygons are still present right in order to make that disappear what you need to do is icon start close that's it now if you see we just vanished oh if i just tap on this just vanishes so yeah guys this is exactly what i wanted to show now uh let's do one more let's do the reviews thing i mean if you if you are if you are at a particular location and you want to see interesting places around you how do you pull that up so places has a particular api for that website places has a particular ap for that called nearby search if you use this it will display the interesting sites hotels restaurants schools gyms etc around you and then you can not only do that you can also see the reviews you can see pictures of that you can see the opening and closing times you can see the contact number you can see the address and everything literally everything about that place let's see how to do that inside our app as well here we have a function called on tap on tap we can make use of this and then set circuit simply pass in the point you can simply draw a circle on the face of the map itself guys let me show you how to do that uh void set circuitry this is a future we need to avoid it camera update or new camera position camera position controller dot uh controller not animate camera i'm sorry what am i doing new camera position you we need a radius value right radius value stroke color color start blue stroke with one fine and get direction now if we just tap on one of these places let me just tap here okay you see this but you don't see any circle right so what shall we do on tap it's it's a free point where is the circle the reason the circle didn't show is because here we didn't include it see now you can see this right so similarly you can tap anywhere since i have given just one id i simply hard coded at the id where i a way requires it yeah since i have just given one id wherever i tap it it'll just move over there okay so this is how you draw a circle on a map now what can this be used for wait let me show you how to make this more interesting let's have something called a radius radius later it's already there okay radius slider equals true and this radius slider is nothing but let me show you i'll have one more okay that's also there let's just get back into our stack [Music] [Music] [Music] [Music] here i just give it a stab to point where tap to point and whenever you tap on tap sets tap the point equals point now the tab the point we can simply use it here but this time the radius value would be the new one that you changed so here the circle that is being set to be having the radius value as the new value okay let's just run this and then you can see how this looks and let's restart the entire app cool ah now if i just tap somewhere i'll just tap on this one you can see that there is a slider at the top right if you just if you just move this slider you can see that the value of the circle either enlarges or reduces in real time right similarly i can like wait let me go somewhere else you can see this right so yeah now we can like we have a we have a circle with a adjustable radius value and that radius value can be adjusted using a uh slider now let's just plot some interesting nearby places inside this particular circle so that ah yeah you can get some information about that let's see how to do that all right guys now let's move on let's see how to bring in an icon next to the radius slider so that we can find and plot nearby places inside the particular circle the area on which you tapped on so let's go ahead and do that so in order to do that we'll first icon button icon button yeah okay and on in on pressed we'll write a function that will do the job for us ah [Music] okay this is where we write a function in the map services to fetch the uh get place details and inside this we'll just give places result sorry [Music] and tap to point and radius value radius value of to wind fine uh let's now get into map services and write that function now this is not some fancy function that i'm about to write guys this is actually a url there is a url for getting the nearby places and we need just need to pass the point in which the latitude and longitude point in which to uh calculate as well as you can specify an optional parameter called radius that's it radius if you define the radius it'll like automatically pick places within that radius and then return a result and that picked results will be based on a ranking there will be like 60 results picked and 20 will be displayed at a time and then you can display 20 more 20 more etcetera now ah let's just write a function to do that for us so get place details replace the place details uh that launch for chords and then in radius async where left equals [Music] chords or sort latitude paralon equals forwards dot longitude right and uh final string url equals this is where we need to give the i'll just make some slight modifications and then give the url here guys okay i just made this is exactly the url from here nearby search instead of this output parameters i have just given the output to be as json and location this latitude and longitude and radius as well as my key for accessing the maps api now once this is done ah where response equals await http dot get uri dot parts url fine and where json equals convert convert dot json decode response dot body [Music] return json we'll just return this json fine now that we have the place details yeah we can just call this and once this we have a result we can just um this this results is nothing but this one okay it's returned as a response the json response will have a field called results in which will be and which will be a list of results and we are just storing that here that's it there's nothing fancy in this and we'll have another variable called all favorite player those variables have declared already guys all favorite places and token key ok now i will just make use of them that is it yeah all favorite places equal to uh places within then i just need to set markers for all these places so that the token key or as well this token key is nothing but the i told you right there will be 60 responses returned every time and only 20 of them i mean 60 responses in total for the call and then only 20 will be written every response will have a field called next page token okay next based open token there's something called next page too wait let me it would be here right next page token this is the one that i was talking about so let me just store that next page token in a variable as well so that i can make use of it later in case the user wants to give more results next page token sorry next page token and then none fine [Music] element i will write a new function called set near marker set near marker and this will take element charm geometry location let payment geometry location launch tube and then element name element types element business status [Music] uh [Music] sorry element business status if this is null then we'll just keep not available you might wonder what these are all these are all nothing but the fields inside these responses you can see this right business status and then there is this viewport geometry and yeah types and all that so i am just passing those fields inside this set near marker let's just write this function now set near marker we'll be i'll just show you how to use our custom markers that we have here we have map icons this will use as markers first the icon might be of a different size right different size higher different height and different width so we'll just scale it to a specific width and then use that particular icon as a marker i will show you how to do it ah yeah about this let's just write it above this set near marker [Music] lat long hmm didn't we just [Music] plus plus then this will there be multiple markers now guys so we'll just need use a counter for giving the id and here is where we'll just use you in 8 list marker icon now this can be used to fetch the marker the the marker icon as bytes and then okay i'll just show you uh there is like a if else block that i'll just add here that's just for differentiating between different types guys that's it i don't want waste time typing all fine as you can see here we have a function here that we don't have yet so let's first write that [Music] future sorry future you wind 8 list you into it list i get bytes from markers sorry get bytes from asset asset string path and with async async byte data sorry data uh data equals away through bundle dot uh load path and dot codec this ui is nothing but i just added an import for dot ui that's it okay uh it's not a plugin or library ui.codec codec equals await ui dot instantiate image codec data dot buffer dot uh as even atleast okay and uh can specify with here with target with it this is where you i said you can actually scale it and make it the same size so that all the icons will look the same exact same right and then ua dot frame info frame frame info f5 equals uh await codec dot get next frame and return return away f4.image dot uh two byte data and inside that you can give format ui.image byte format dot png fine this is what we will be returning and this is got as bytes and these bytes can we can use it inside that bitmap descriptor final marker marker marker um [Music] uh position point on tap icon bitmap descriptor dot from bytes marker icon uh now we just need to add this set state sorry set state set state markers dot add marker fine now that we have everything let's just run this on the app and see how this looks alright guys now that we have done this let me just drag the map a little bit inside and just tap on a random place and then increase the radius a little bit okay now this tap on your beam button let's see what app okay we get an error uh future what must you know okay sorry why didn't we give a return type here future dynamic then this would have alerted us here itself we just didn't await this save this now restart the app how to restart the app increase the radius a little bit tap on near me once again now let's see what happens wow you get a lot of places plotted neatly on the map right and notice that you you also see that uh there are educational institutions that have like a graduation cap there are fast food restaurants there are hotels there are places there are automobile uh centers right on the edge one of it here in port alton there there are like different marker icons plotted because we have given like i have mentioned only a few categories guys but in this if you go to github and then access this repo you will see there are like a very large amount of pngs that are included along with this repository i just included very little uh uh types here anyway let's move on let's move on there are just only few few markers right what if the place you are searching for is not here or you need more places like this so in order to do that let's make use of the next page token we had a token called next page token requires it not this one and next page token we will make use of this and then like we will try to get more results loaded ok so first we need to see whether the user has press the hash press the thing so in that case we will just do pressed near if pressed in here is false then this entire thing will run and we just have one more we'll add those markers inside a variable called markers dupe this is nothing but another set of markers why am i adding these markers here so that when the next 20 results are loaded we do not want to duplicate i mean we do not want to remove the first 20 results right we need to show all 40 ah of them inside the same circle so i am just getting these markers inside here inside another set of marker set this markers tube is nothing but another set that i have declared here okay and then once i did that the next thing i will do is pressed near pressed near equals true so now if this is true then i will have another icon button ah tapping on that it will just load the next 20 results instead of doing the entire thing again so i'll just have icon button i can't start more how do we do more uh timer something some give just some random icon guys i mean okay whatever icon you want to use guys i'm just giving some random icon here because i don't want to waste time with the ui part and then inside this i'll just once again debounce thing if d bounds three bonds notice active sorry dot is active or false d bones dot cancel and then the bones don't cancel and then [Music] the bones equals timer timer duration duration uh seconds to call back this will be a once again asynchronous callback and inside this uh if not sorry not token key not equals none because there might not be next page token right in some case some responses so in that case you are setting it as none so if it's not none then we'll do a uh var place result once again place places result equals map services dot but this time the function would be different get more place details and we'll just pass the token key okay and if this is not the case now if this is the actual case we need to like wait uh how do we do this how do we do this so go to map services and then write the new function for that then we will think about the study stuff this will look exactly the same as this the only difference would be get more place details and all these should be removed and replaced like this and then inside the string url places nearby search js on here it will just be js on end page token equals token fine ah this will fetch if i give the token here this will fetch the next 20 results for the previous search that i made i mean when i made the previous search i got a token right that exact token i am passing here in this url to get the next 20 responses that's it ah now after i got that oh wait let me say this now after i got this i will just do the exact thing that i did here okay so instead of just adding all these i need to add all because it might already have some results as well now since we are making use of this so what i'll do is uh once i got this where places result okay list list dynamic list dynamic places within equals places result results results as list oh sorry once again not add all uh places within fine token key equals place one second places result next page token if it's not available none and [Music] the next point will be exactly the same the next point will be exactly the same as this so i will just notice that i didn't i didn't like re-initialize the markers because i need to have all the previous markers as well so i'll just fine and this defense here right where is save this cool now we have a working working function that will load more results for us let's just restart the app and see if this works this should work actually let's see let's just once again draw drag the map a little bit inside anywhere and then i will hold paul aldo here i will tap it now or increase the radius a little bit or decrease it whatever if i tap on pressed near okay now you can see that i don't know if it okay blue is probably not a good color i'll just i'll just change it to white yeah now you can see okay this icon is not a neither icon start [Music] more more mobile friendly yeah okay we'll just use this icon uh since it is pressed near i told you right since it's this is false if this is false it will just give me the near button but if that is pressed this will be set as true and this one will be this function will be triggered whenever we tap on that button again so let me tap on that button again now we can see that there are a lot of markers plotted as nearby places in that particular location it happened right if i tap on this the next 20 results should be displayed if there are no more results it will show that's all folks so let me just tap on that let's see what happens see as you see there are more results now added right no more markers no added let me tap on it once again few more results have been added let me tap on it once again it shows thats all folks which means that all the nearby places that are present near the point down which i tapped have now been added on to this particular radius that i have selected ok now this is all fine how do i get access more details about this place that's exactly what we will do next ok first let us just give a beautiful ui wherein we can navigate to each and every place and then when you tap on that particular place you will just see a wonderful card just like i showed you before you will just see a wonderful card in which you can just tap and all the details about that place including the contact details including the address and pictures of the place will be shown you would also be able to see the reviews of that place let's see let's see how to do that now all right guys now let's go ahead and bring in a page controller okay page controller to display all the places the nearby places that were plotted on the map in order to do that after this this is a stack right i can simply overlay that on top of the map rest near [Music] positioned container cell this q for bottom 20.0 and then the child would be container container height 200 with either query dot of context or size dot with [Music] child page view dot builder uh item will let this come on i will just give a few other options uh controller page controller this we need to create obviously and item count all favorite places dot length this is nothing but the thing that was plotted this one ok and then now we will just go ahead and create the ah we will just item builder we didn't write anything item builder is simple this will build out our wheelchair the actual build context context uh context we can even specify an index heading in index here index and inside this return return uh plotted nearby place nearby places list list namely pss list and in say this will just pass the index now we need to create this page controller as well as this one so let's go ahead and do that first we'll create the page [Applause] page controller page controller uh this will if we give it a slit yeah okay now we'll go to our unit state our sorry instead i don't have any instead initial page one viewport fraction 0.85 and uh yeah this will be this is smaller needed dot and i'll add a listener here and listener sorry it's a chain operator this is chain operator listener and then the function would be uh i'll have a separate function on scroll this function i'll write here void on scroll i don't scroll if page controller dot page dot [Music] not equals previous previous page previous page uh so what am i doing page controller page event previous page uh previous page equals page controller dot page or two in uh false photo gallery this is not needed okay this is needed solution go to gallery index index equals one show blank show blank card equals false and go to go to tab place fetch image these two functions we need to write guys these ones will create just now we'll create now uh page where these are all elements page in previous page this is for in previous page equals zero uh tap replace detail and screen place image equals this is a blank string as of no and [Music] we'll also have a key since we need to load the images and we need for that we need a key so just get our key here and then paste it here final key add selected place details selected place details that's it i guess i have included everything photo gallery index zero and then what else show blanket fine let's move on let's move on and write these two uh functions first we'll write the fetch image fetch image place image fine this is the effects image function now many might find this is the place image function now many might wonder what is going on here each and every each and every return result will show you okay this is a return result right each and every one every one of these would have something called a photos array and ah it will also have like a photo reference the reference is now photo reference is nothing but an id and then you can use that particular id like for instance here you have a photo reference id right if you use this particular id and give it a height and with specification it will automatically return the photo associated with that particular id that's it there's nothing fancy in this okay let me show you an example and you will quite get it i mean you'll get it now we will just go write this go to tabbed place as well and then ah start writing the actual tile the page detail okay okay future sorry void uh go to table place go to go to tab place async and [Music] once again google map controller set all favorite places page controller dot page [Music] okay and then selected place geometry this should actually get inside a disappoint right so select launch selected place john and geometric location flat and the same thing will be applicable for longitude as well same thing will be applicable for longitude and for label types and status we'll just give selected place name if the name is not there we'll just give no name no name for types selected place types selected place types and then for status business status yeah there is something called business status uh selected place business status and this is as well we'll just click on if it's false simple i'll check that's it once this marker is set we need to move the camera to that particular location right so controller dot animate camera camera update camera update camera update dot new camera position camera position camera position target will be launched lat long longitude okay and zoom would be i'll just zoom up a little bit and give then bearing as well and tilt the camera slightly till it would be some 45 degrees fine now if i save this and then run this inside he just wrote the go to tab to play so if you tap on the particular tile then it will take you to that uh it will show just the marker and take you to the place that's it but we need the entire set of tiles right we didn't write that ah nearby places list okay let me go ahead and quickly write that as well that's mostly going to be ui workplace hey let's do that who else is going to so [Music] [Music] [Music] [Music] [Music] [Music] uh [Music] [Music] [Music] [Music] all right let's save this and see what we have done so far uh let's just get in here and then tap somewhere okay let me just tap on the nearby places ok we need to restart here right let us see what whether what you have written so far works now base i tapped on a location and then i'll tap on nearby places cool right now you see no image has been loaded whereas this is a blue bar this one the one that you have here and here let's just try scrolling through one of these wow the image for this particular location has been loaded not only that if you notice you are also taken to that particular marker i mean particular location right so yeah so far what we have works let us just move on and then finish the remaining tile ui part of the remaining tile as well so after this [Music] [Music] [Music] [Music] you [Music] [Music] all right now you can see that we have the rating [Music] [Music] [Music] right now as we just keep on scrolling you see i don't know if you notice but also the marker icon changes as well can you see that if it's a cinema it's just showing fast food icon and which target is showing a retail store and it's a hotel so it's showing hotel this is a hotel as well costco wholesale okay this is once again showing a retail store this one i don't know why probably a hotel this is again a hotel this is a school i think is showing an educational institution icon yeah now if you notice there are no more no more items to load right if i tap on the more items now the top icon you can see that more items have been added now if you note you can just keep on scrolling you see what we have done there right so yeah let's move on guys now what we are going to be doing is making sure that when you tap on a particular when you tap on a particular card it will automatically pull up the details of that particular location as well as give you reviews give you photos and give you the contact number the address and all the stuff about that particular location let's go ahead and do that and wrap this app up so uh we just need to write a function to enable the card type before that we'll have a close button here that will allow us to like close the hold on near me similarly we'll just have a close button after this row okay so i get the normal map inside which you can do uh getting directions and other stuff anyway uh yeah let's move on guys let's just make that card tappable uh so this is where we write the crucial function once you tap on the card you display something there and not only that you also slightly move the thing okay hold on we'll have a stylish thing called flip card okay this flip card is once again by this variable i'm sorry this plugin so thanks to whoever wrote that [Music] [Music] bye [Music] [Music] [Music] fine now you can see that we have written some code that will work when the card has been tapped now we need to write the tab functionality inside the card right uh where is it let's see card actually yeah nearby places list here we just wrote it as 2 but we need to actually write something inside this so that okay let me just show you uh if card tapped if card tapped tap to place detail equals map services which obviously always map services dot [Music] get place all favorite places all favorite places of index of index of place id and then we will write another function called move camera slightly so that we move the marker out of the way and the marker will be visible still be visible to the user so i'll just write that this is nothing but moving the camera position a little bit to the uh so that it's everything is still inside the viewport guys that's it this is not something like fancy move so [Music] [Music] [Music] [Music] uh okay now if i just tap on one of the cards it should not only move the card slightly it should also load up that particular place and then show me some details in a card right that's exactly the code that we have written so far let me just tap on sunnyvale tap on every places cool now i see a lot of stuff here right maple tree in now if i tap on this now okay there is an error that's because oh yeah we made a mistake this is not this is location save this restart the app once again tap somewhere tap on nearby places dinar's garden hotel if i now tap on this you can see that the marker slightly the view slightly moved out of the way and a beautiful card is getting displayed here right there is a flip part there is a back part of the card as well which will right now but now you can see that yeah the marker is slightly more out of the way the image is loaded there the address is given as well as the contact number is given you can see this right we have created this wonderful functionality now what we will do is we will just add one more functionality which is tapping the card it will show you the reviews as well as pictures of that particular location we'll just do that and then wrap this up [Music] [Music] [Music] [Music] [Music] [Music] i'll just watch this guys i'm just tapping on this palo alto in if i just tap on this it flips and then you have like a beautiful container that shows two buttons on top and just tapping on one of them whichever one is selected and automatically the highlight changes right that's exactly what we are done with these two animated containers now let's just build the content of those [Music] [Music] [Music] [Music] this is just we just need to write one review item and we can simply since it's inside list view build build review review item preview return column children eight point zero and if you save this no wait let me just if you say this now you're able to see the profile pictures of all those who have given review for paula altoon right now ah we'll just give the name of those people next each and every review will have a profile photo url guys this is not something that i have i am doing or anything this is something that already comes with the place detail suite let me show you this is the place detailed response right here if you see there is something called opening hours and all this and there is something called photos there's a list of photos and there's a list of reviews reviews you get the name profile photo url and everything right that's exactly what i'm using fine uh and after this container i'll add a small sized box i 3.0 [Music] oh sorry this is a row sized box with 4.0 and then again a column cross axis and then cross axis ah [Music] [Music] these are actual reviews pulled for this place guys let me show you uh then we'll finish this and then i'll show you then after this text after this container i'll add one more size box height 3.0 and i'll here i'll give the actual rating given by that customer so this rating i'll just cut the video here and then fill this up and then bring you back here guys because this rating is exactly going to be the like the one that we wrote previously with the rating star this is exactly like i said the view rating and the star cod and all that let's just save this wow you can see that the rating is given as well as the stars are given right now all you need to do is write the actual text of that particular review so how we'll do that is this should be pretty much easy after all we have done uh so we'll just get here after this padding after this padding we'll add one more padding adding engine set start all 8.0 and [Music] child container child text review text ok now we can see that the review each and every review is given here we'll just add a small divider so that this looks a little bit more good save this now look how it looks wow you can see that the reviews now look awesome right for this particular place this can be now okay this is super 8 windham mountain view i'm tapping on this tapping on this it's automatically flipping to show the reviews here these are actual reviews that we are pulling from google guys these are not like hard coded stuff just to show that these are actual reviews wait let me take one courtyard by marriott palo alto los altos ok this is a hotel right let me just open this up in google as you can see here you see the photos right photos and the location and everything which is exactly what we have pulled and there are reviews right let me tap on the reviews okay look at all these five out of five over all these right tap here you can see that those reviews are almost exactly the same old approach of all probably have been here many times uh what more could you want what more would you want it's nothing but the same you can see this right mark booker mark booker that we are very friendly and you know so i am really i mean we are really pulling these reviews off google and these are actual reviews these are not like hard coded stuff or anything now let's just complete the photos as well photos we don't have here right let's just complete that as well so that our app looks more uh our app looks superb that's it so photos wow photos look really good let's see what are apa pools what are call pulls for all these photos uh so get back to the app now that we have done this we will do this you may build a build photo gallery this part photo gallery we once again need to send the tab to place detail photos or a blank array okay this is not once again this is not place detail yeah once again this is not something that i have this is already there everybody search there are four there is a variable called photos and it has a list of photos that's exactly what i'm making use of and ah get to this build photo gallery right build for build photo gallery uh photo element photo element uh if photo element equals our photo element.length [Music] equals zero oh blind card equals to [Music] [Music] save this so if there are no photos then this text will be displayed if there are actual photos uh [Music] that's where we write the l spot l spot where place image equals 4 to photo element photo element of sorry auto gallery index photo gallery index um reference photo reference max with equals photo element photo calorie index dot width height right ah return size box container container height this url is simply the url that we already used to get a for wait fine ah place image key fine and this will be once again wow you can see that image has been loaded right anyway uh we need we need an option to like suck quickly cycle between these images and i think there will be like 10 or something images loaded at a time i'm not sure about that exact count let's see gesture detector and child container and container container with 40 40 height 20 sorry 20 and decoration box decoration box decoration border radius border radius dot circular circular 9.0 uh color and previous one [Music] 12.00 ah [Music] [Music] [Music] let's see this and wow you can see a nice looking nice let's see if these are actually pulled in the order of yeah yeah guys the first image sorry very first one is this this one exactly and second one is a bed and the third one is the uh pool the fourth one is a towel the fifth one is once again a pool and all that it's just seated fifth one is a gym anyway yeah guys this is how you can like you can also see the reviews and you can like yeah you can switch to some other target if i just tap on this chose me card then this card as well has the address as well as the contact number as you can see here and then we have like the reviews for this place some guy asking a terrible place we were returning yeah these are all actual reviews once again from actual people so who are seeing this if you are one of those people who reviewed it yeah uh photos you can see actually photos from the target residency by marriott holiday there's too many hotels getting pulled whenever a this in hotel polo also los altos high school let's see how high school photos i see this has only seven photos right so the total count is just seven almost the eagles that's like a basketball game that's going on we'll just tap on reviews wow this school has like really awesome to use and there is just this 1.0 and he has written like a very lengthy review anyway yeah guys this is exactly what we wanted to like what i wanted to show you guys today and uh not just this you can obviously let me just watch this tapping on more items will obviously bring you more places and then if you scroll through that this looks like a food food place probably they'll show yeah show pictures of the food and you can also introduce actions like when you tap on a marker it should automatically move to the place and actions like that uh so yeah this is exactly what i wanted to show you guys today uh hit the like button if you really like this video hit the thumbs up button if you found what i'm uh oh thumbs about the like button hit the thumbs up button if you really like this video and if you found this video helpful kindly share it with someone and help them too this is like a really long video you know about it and uh i i wanted to make this sky for you guys because it's been a long time since i made an actual video anyway yeah i hope i like i hope you like this guys uh share it with someone and then subscribe to my channel guys subscribe it's free and it helps me a lot and i'll make more content for you guys in the coming weeks since i got some free time and uh yeah i'll talk to you guys my next video bye thanks for watching

Channel: Raja Yogan

Views: 31,657

Keywords: flutter, google maps, flutter maps, navigation, nearbyplaces

Id: x0QNPHYATj4

Length: 165min 0sec (9900 seconds)

Published: Tue Jun 07 2022