Google Map with Places Autocomplete in Flutter, Part 2

hey everybody welcome to part two of this series of using google auto places to find results and adjust our google map to accommodate those results and so in the first part we left it here we had gotten our map on the screen we'd done all the setup there with the api key and such uh we had hooked in geolocators so that when this app boots it's gonna find us in the world and put the us at the center of the map and so in part two what i'd like to do today is do the autocomplete portion so we have a text field here that's just sitting here like a dummy and what we'll do is wire it up so that if we input results we will get we'll get suggestions back from the google places api and then we can select them all right so this app is going to that location we won't do that in this part we're just going to worry about the auto complete portion and so the way we want to tackle that is first of all we want to to visit the api documentation come up with a query string a url that we want to send to google auto places to get results back and when we get those results we're going to want to put them into a model in our dart language and write a service that will do that for us we'll need to write a function in our business logic that calls that service and then finally we will wire that to the text field here so we get some results and then we'll need to come up with a strategy for displaying those results on the screen for the user to select all right so a great place to start is the google places api documentation page let's see the address is up here developers.google.com places web dash service slash autocomplete or google places autocomplete and i'm sure it will bring you to this page like it did me uh to be clear here the autocomplete for places and the places search the places detail uh this is all part of the same api so you may recall we went into our google cloud platform into our console we went to api services we went to library and we enabled the services that we wanted we created the key and we tied that key to the services that we wanted and when we enacted the places api or enabled it we get autocomplete as well so we don't need to do places and autocomplete separately we are going to use the straight up places api call once we get the search results to actually get the coordinates back because those are not contained in the search suggestions so we are going to use both in this project but starting with places autocomplete down here there's a dev guide here so if we click on that we get all the parameters that are available to us you can read through that if you wish and then you start getting some practical examples down here so what i want to do is i want to search by city and so if you want to do something different you want to search by address there are options here so you can visit this documentation come up with a query string that specifically meets your purpose but i want to do what i want to do is find cities specifically and so i'm actually going to grab so you can see this one here is for addresses in french this one here is for cities in portuguese i'm gonna grab that and i'm gonna use postman you could use just a browser if you wanted to but i'm just going to paste that one in and i'm going to get rid of the language because i believe that english is the default and so you can see here with if you use postman you get these nice options here the input this is the the query string that we're gonna pass in the types this is what we're looking to get back and so i have specified cities uh i need to pass in an api key as well so i'm gonna visit my google google cloud platform console that's hard to say and we're gonna go to credentials and i'm gonna grab the key that we created in part one and i'm just going to stick it right there bam all right so here's an example of what i would get back if i were to put in vict let's just try new and i see i'm gonna gonna get new york back newark new jersey new haven connecticut so you could also accomplish this sort of with just the places api by doing a string search on places but the autocomplete uh this is google this is what they do they collect data on you and they use it to search things so they're going to come back with suggestions that are very specific to the user they kind of know uh they seem to know where i live because if i even though i'm not signed in on this thing uh if i put something in there it comes up with a result that is near to me anyway so they they have their ways of knowing uh what you're looking for so this will give me the string that i want and all i'm going to have to do is just pass in my input from what the user types and we should be good to go there but when i get these results back i'm going to want to model them and turn them into a dart object and so just looking down here i've got the pretty on so i can make heads or tails of what i'm getting down below and i don't really want many many fields from this what i'm going to want is i'm going to want the description because i want to display in a list view the results that are coming back so that the user can click on them if they wish to select them uh and then really the only other thing that i'm interested in here you can see there's no coordinates that i might want i'm going to have to go to places api specifically for that but i'm going to want this place id so i can then if they click on it i can then turn around to the places id and say here is the id that i'm looking for or the places api here's the id that i'm looking for give me back the information that i want which is going to include the coordinates so i'm going to write a model that specifically scrapes off this description and this places id all right so coming back here to our code we do not have a models folder yet so inside lib i'm going to create a folder called models and then we will create a new file and i'm going to call it place underscore search dot dart so i'm going to actually hit the places api later so i'm gonna put a underscore there with search so i know uh which is which and so we'll do class place search and like i said the two fields i'm interested in are description and place id both are strings so i'm going to write a final string description and place id and so we'll do a constructor for that and we'll do named objects this name properties and then i'll just do a factory constructor so i can pass in json and convert that into a dart object really easily so factory place search and we'll call the constructor from json and we will pass in a map with string keys and dynamic values and we'll call what we're going to get out of that json and then in our curly braces we will just return a new place search object that we just created and for our description we will give json description and i need square brackets there and then for our place id we're gonna get that also from json and i'm just gonna refer back here so place id underscore like that all lower case and we'll add a semicolon at the end there and so i i put place id in my dart model in camel case to be conventional with dart and i'm the object i'm getting from or the property i'm getting from the json has snake case so this is where i map the snake case place id i'm getting from here to the camel case property for dart don't have to do that but if you want to stick with convention this is where you can map those two to each other all right now that the model is done i want to write a service to go and get that information from the places autocomplete api and to convert it into this object so in our services folder which we already have for geolocator let's create a places service and i'm going to use this for calling autocomplete api and then just the regular places api so i don't need to worry about naming it differently so we'll call this a class places service and we already imported the http package in the previous video so it's in pubspec.yaml already and has been imported and so i'm going to go ahead and bring that in here that's package http http.dart and i'm going to bring it in as http now i also know i'm going to need to use the convert from dart so i'll bring import dart convert as convert all right so we will create a future that is going to return us a list of the place search object that we just created and i'm going to call that get auto complete and that's going to take in a string so this is going to be the query or the search parameters so we'll call it search that's asynchronous and i'm going to create a url variable and this is going to be our query string so i'm going to visit postman and i am just going to grab it from here and put quotes around it before i do that would be better okay and i don't want to put this key inside this string so what i'm going to do is up at the top here i'm going to create a final key variable and i'm going to put oh not that i'm going to put my key in there so i could grab it off of this string or i'll just grab it from here all right so don't use this key use whatever key you have off of your console and instead of that we're just going to put key and the other thing we won't want to put in here and we won't want to hard coat our hard code our search so we'll come in here and we'll do search like that all right so after we have the url we're going to go ahead and await http dot get our url and let's set that to a variable called response and let's create a variable called json which we will set to convert json decode response dot body and just looking back here at our results so we're going to get this predictions array and we want to get the results here as a list so we'll dive in to that level by going we'll set it we'll call it json results and we'll go json and we're going to get the predictions and we will cast that to a list so we are getting this predictions object and that's what we're going to grab and then so we're going to get back a list of all the objects within it alright so if this wasn't named we wouldn't need to do that but since they have stuck in identifier a key on the array we need to go into predictions and get the list from there so let's return json results map so this goes through each one of the results which we'll call a place and we can call place search dot from json so this is that custom factory constructor we built pass it in that place and then come out here and cast that all to a list all right so now we have a model and we have a service that will reach out to the auto complete places api and convert that into our model object and so now we just want to we don't want to call this directly from the service so we want to put the ability to call this from our view into our business logic and we'll do that in our block so we already have a blocks a block in blocks folder application block this very cleverly named uh block here and so inside of there we want to add let's add it below set current location we will do search places and so we'll get string search term and that's going to be asynchronous and we will await places service which i'll need to bring in here so let's come up to the top and let's bring in an instance of places service like that and then we should be able to call if i can get this variable correct get autocomplete and we can pass that our search term okay so that will go get it but it's not going to be of a whole lot of use to us because we aren't loading it to anything so let's come up to the top here and in our variable section let's create a list of type place search and we'll create a variable called search results and so when we make that search we can now set this equal to the search result variable and if we want to listen to that with change notifier provider we should add notify listeners so that our ui is aware that that variable has changed all right so we should be able to call this from our view now so if we come out to screens and we go to home screen.dart we have this text field already in the ui uh let's wrap it with some padding just to get it off the margins there and i'm just going to use the default padding that's fine so it doesn't look so bad and i think i'll just add a magnifying glass to the side so we'll do a suffix icon i'm outside of the decoration so in the decoration we'll do suffix icon icons and i'll just do icon dot search and that should be icon there that looks more like a search field all right and so for that search to work what would be a good idea is that every time we tap or a put input a value into that field that it sends uh to our business logic whatever we put in there so the first letter the second letter uh every time we do it we want it to adjust the suggestions so we can do that with the unchanged and so we can grab the value off unchanged and fat arrow over to application block search places and we can pass it whatever is in that text field all right and i have no reason to at this point believe that that is not working but we don't actually display anything on the screen so let me come to places service i'm just going to put a break point there and and i get nothing oh i forgot to save my application block all right there we go all right so now i'm getting results in i'm passing in sdd dda and it is throwing that out to the auto complete api and probably coming up with a very confused result but we are at least making the call so at this point let's go ahead and put these results on the screen so we can actually see them and to do that we need a strategy for a place to display them and what i decided to do in this one you certainly push it down you can make the map disappear but what i did here is create a stack with the map at the bottom and then two containers or a container on top that is a semi-transparent dark container uh for transparency or for the purpose so you can actually see the the results on the screen and then i've got a list view that is inside a container also in the stack on top of that transparent container that displays the results so that's the strategy that i took here so to make that work i am going to go back to my home screen and i'm going to take the container that has the google map in it and i'm going to wrap it with i'm going to wrap it with a column just for convenience sake and then i'm going to change the column to a stack and i'm just going to do that because there is no option for stack from the selector there and if i just do a generic widget then i have to put in children and put in an array so that works out easiest and so i've got my container here with the google map and after that i'm going to create another container and i'm going to want to conditionally show that but for now let's just do height 300 so that's the same height as the map and the width of double dot infinity so as far as it can go the map does that automatically we didn't specify that up here but it's doing it automatically and let's add a decoration we'll add a box decoration and we'll give it a color and the color will be colors.black with opacity so we want this to be somewhat transparent i'm going to do 0.6 and then i'm going to do a background blend mode and i'm going to do blend mode darken all right format that we'll save it and i can see we've got a darkened container over the map and so after that we're gonna add one more container this will also want to be conditional but we'll come back and do that in a second same height and the child for this container is going to be a list view builder so if we have a if we have results we will go ahead and build a list with those results and for item count let's start with item count uh our item count is going to be application block search results dot length so we're using change notifier provider and we have in our business logic here we have notified listeners so every time we get new search results and we have some to show we'll pass those to the ui with notify listeners and then our item builder we'll take a context and index and then we'll open up some curly braces and make this easy on ourselves let's just return a list tile and the title will be text widget with our application block dot search results bracket index dot description and we're going to want that to be white so it stands out on our black background so let's add a style attribute which will be a text style widget and the color will be colors dot white okay get our commas our semicolons all right so now if we get that nonsense out of there and we start putting in some letters that make sense we can see we have results sitting right here on the screen and they go away but the darkness doesn't go away so let's make let's add our conditions in here so let's just stick an if statement right in front of here and let's say if application block search results is not equal to null and also so that would be the the initial condition we come in and it is set to null um and then if we pass it something that uh or if we clear out the string and it's it's a blank string it's going to pass us empty results and so we also would not want to show it in that case so let's say application block dot search results dot length is not equal to zero all right and what that's going to do for us is if we get research results here and we decide to just clear it out then it's also going to disappear if we didn't just include the search result length equals zero then once we had searched we wouldn't be able to back it out because it'd never be null again all right so once again it looks like i've eclipsed my 20 to 25 minute window but uh we do have a working autocomplete at this point and so in the next episode of this series we're going to do uh four parts of this so part three will be about changing the map results so when we auto complete we pick a location uh we're gonna have the map adjust and go to that location so that'll be next time thanks for watching and hopefully we'll see you in that video

Channel: Andy Julow

Views: 12,047

Keywords:

Id: 1LzcInQPwlU

Length: 26min 48sec (1608 seconds)

Published: Tue Feb 16 2021