Flutter | How to Search Places with Google Maps in Flutter | Proglabs

hello guys this is junaid khan and i hope you all in a good state of your health okay i am uh with and i'm back with a new video for with uh for the playlist in which i was teaching to teaching you that how you can work with the google maps in flutter application so in today's video i will teach you and i will show you that how you can work with the google search places in your floated application so let me show you that what we are going to do when you click on this button it will ask you to type anything so let's type usa and when you click on this it would take you to that specific point with a snippet on the marker so that's what we are going to do and and it will benefit you in the long run because if you want to develop an application in inflater then most probably the chances is that you'd require a location from the user and you want to give him or have the option to search the place if if the current location is not working for the user so you can search for it so this video will benefit you in the long run okay so without wasting time let's move forward okay so uh we are we will work uh with our previous project um and i also uh uploaded this project on github and i shared the url of this project in the description of the previous videos you can fork this project and work with work with it okay so for this video we need to create a new screen for the search places i am creating a new dart file with a name search places screen like this okay and we need to create a stateful class search places screen like this and we need to press alt enter and import material okay so after that we need to open our browser and search for google places and open pub.dev and search for google places and we will see which package we are going to use yeah this one yeah this one looks fine okay so we need to copy this package and go to our project again update okay then after this we need to minimize this close this and we need to create a new button so we can navigate to the screen ctrl c and here we will change the search places screen search places yeah okay done okay so now we have to work on the screen and for this first of all we need to work on the build function we will change it to scaffold app bar title [Music] text and google search places like this and for the body we have to use stack because um this the suggestions will be on the will be in the stack form so that's why we have to use stack here google map children yeah google google map initial camera position so for this we need to create a variable here static const camera position initial camera position camera position and for the target we need to use lat long its default class latitude and longitude for the latitude and longitude you can pass any value here and for the longitude the same minus one two two point zero eight five seven four like this and zoom value 14.0 like this so this will be our initial camera position and if you remember that we need to show the markers on it so we need to create a list a set of markers marker markers list because we need to show a marker on the map and when we click on the suggestion so it will point out to that specific place markers markers list and map type map type dot normal and on map created we need to pass the controller here google map and for the controller we need to create a global variable here google map controller we'll map controller here i'm defining it as late because it will initialize in the build function that's where we need to pass late here if i just remove it then it will ask me to initialize initialize it so that's why i'm passing a late type here we will pass the value of google map controller from like this okay and now we need to create a button elevated button for the search places and i'll press button i'm passing i will i have to create the function for this here cons text search search places okay now we need to create a function handle press button future white handle press button is sync and like this okay okay so we need to prediction and p places auto complete dot show okay so here we need to pass our api key and for this we need to import package package google maps web service slash places dot dot so we need to import this then it will show you okay and for the context contact context is is correct and for this we need to create a well google const okay google api key and we have to pass a value of our api key here okay google map api key like this and after that we need to show on error what we need to define here so we need to create and function on error let me complete this first mode and we need to pass the mode value here so for the mode we need to create a variable here mode mode mod dot over l overlay so you can use two modes full screen and overlay so what i'm using is uh overlay and you can use a full screen mode as well it will take you to another screen and it will once you click on the prediction it will goes back to your parent screen again so you can use any mode if you want depending on the requirements so right now i want to use overlay so i just set the mode to overlay and after that you need to pass the language and i'm passing en which means english strict bounds if you need to create any bound bounding bounds for the prediction so you can pass the bounds value here types if you need to get the prediction of the some specific types of the places so you need you can pass the types like hospital restaurants like this here but i need the predictions of every any place so that's why i'm just passing the empty uh array here decoration it will create the decoration when once you click on the search places button the uh search bar you are you were seeing for for the for decorating it uh for the for decorating that specific state search bar you you can pass the decoration here okay so input decoration and hint text search and focused border outline input border and border radius border radius dot circular yeah 20 and [Music] border side border side color color would be colors start white okay like this and after that the input decoration i think it's ending here you can pass components components so this is a very important part okay so here you need to pass the components so what what are components here so these are basically um the restriction on the predictions which you will see upon clicking the search places so you can pass the countries iso codes here so component component like this component dot country pk i need to import this future prediction component oh i misspelled it okay like this components and now we need to create the on error function void on error places auto complete response and response like this okay and if the error occurs while for example if the api key you have entered are is not valid so on these type of errors and this will helpful for you so for showing a snack bar or anything like this so you need to create a scaffold key so for this i am creating a new scaffold key here let me create it here final home scaffold key and global scaffold state like this sorry global key okay so we can create a key like this here and we can pass this key here home scaffold key and here we can show the snack bar home scaffold key dot current state dot show snack bar text response dot error message like this alt enter i think so yeah like this you can show a snack bar if the error occurs in your suggestions or predictions okay after this we need to show our prediction because right now it's only getting the predictions it's not showing us right now so we need to create a method for display prediction and we need to pass this value p here and also the our home scaffold key dot current state like this and here we need to create a yeah display prediction method google maps places google maps places like this here you need to pass your api key again okay google api key and you need to pass api headers await const google api headers dot get headers like this and after we need to make this async and this should be future void okay so we need to import this i think so google api okay for getting the google api headers you need to this class you need to import this in your in your dark screen package google api headers google apis dot dot it this class is automatically imported in this package so you don't need to install any package any other package so like this okay after this you need to show the details of this so places details response detail await places dot get details by place id p dot place id like this okay yeah i think so no oh we need to remove this yeah now it will work fine and also we need to remove this as well we don't need this but why it's showing me an error oh oh wait yeah like this add a null check and done okay so after this we need to get the latitude and longitude of the of the place on which i on which we clicked so detail dot result dot geometry null check dot latitude dot location yeah dot location dot let okay like the in in the same way we will get the longitude detail dot result dot geometry null exception location dot lng like this so we get our latitude and longitude now we need to pass this latitude and longitudes to our controller which we had defined which we already defined here so it will we have to point uh to that specific latitude longitude [Music] with our controller on on our google map okay so markers dot list dot clear because we need to clear our marker list first and markers list dot add marker yeah marker id and marker id will be const marker id string value zero position again latitude longitude let and lng these two values are from this and this variable and if you need to pass the info window then you can surely pass an info window here and after info window yeah info window title and detail dot result dot [Music] name yeah this is our place name okay so the mar the marker has been added in our marker list now we need to set state called the set state and after the after setting the state we need to tell controller to animate camera to that specific position dot new light long zoom light long latitude and [Music] lng and for the zoom value we will pass 14.0 again like this so in this way we will first make this search bar for getting the predictions after that we will display our prediction by falling this way we will pass the value and from this google maps places class we will get the details of that specific place id because from the prediction we will only get the place id and by passing this place id we will get the details of that specific place and we will after passing the after getting the details successfully we will get the latitude and longitude of uh the place we will clear our list marker list and we will add that latitude and longitude in our markers we will set the state we will again call the build function again and after this we will automatically if we if we just comment this line so it it will automatically add the marker but we need to point to that specific marker so we will animate our camera to that specific latitude and longitude so by following this method you can easily implement the google search places so now we need to install this application in uh on a real device so i connected my redmi note 8 pro with my laptop and after this we need to run our application and keep in mind that you need to pass because if you remember that we have created a variable named as google api key so you need to pass your api key value in this variable because if you don't pass this value if you don't pass up api key value in your in this variable so it will show you error so keep in mind that you need to create an api key from google's cloud console and after enabling the places api from the google cloud console then you can pass that specific api key here so keep in mind that this thing okay so when i was trying to install the application fa i encountered an error that you need to define your compile sdk version to 32 so no problem you can open this and i think so it should be here no okay yeah so we need to change this value to 32 we will stop the application and we will try to install this application again okay so i faced another another error while i was trying to install the application so it's asking me to update my uh kotlin version to the latest version so i will just copy this line open our browser paste this and we will see that what's the latest version for kotlin right now okay so i think so the latest version is one point six point ten okay so we need to open our android folder again app build.gradle and i hope so it should be here no so we need to open another build.gradle yeah we just need to change this value to this and after doing this we need to install a install our application again so our app installed successfully so let me show you okay so when i click on this button search places when i click on this perfect and when i search for prog labs perfect okay so by following this tutorial by following this code you can easily implement google search places in your flutter application one more thing i want to show you that if you want to get the search results from multiple countries so you can just copy this control c sorry and you can just pass the usa here so it will show me the suggestion from pakistan and usa i will show you when i click reload again and when i click on this usa so as you can see that it's me and now it's showing uh it is showing me the stations from usa and pakistan both so if i just cross this and prog labs so now you can see that it's showing me the suggestion from pakistan and usa both so by by doing this you can easily integrate google search places and in my next video i'll show you that how you can integrate nearby places in your flutter application so till then take care and if you haven't subscribed my channel yet so kindly subscribe my channel and press the bell icon so and take care of yourselves bye

Channel: Proglabs Official

Views: 21,027

Keywords: proglabs, flutter, flutter google maps tutorial, flutter google maps api, flutter tutorial google maps, flutter maps tutorial, google maps flutter tutorial, flutter google map tutorial, flutter maps google tutorial, google maps in flutter, google maps flutter, maps flutter, flutter maps, flutter google maps navigation, flutter google maps directions api, flutter google maps route, flutter google maps draw route, google search places, google search places in flutter

Id: Gcw1-8DpqCI

Length: 30min 10sec (1810 seconds)

Published: Thu Mar 31 2022