Flutter Google Places AutoComplete || Flutter Google Maps Places API || UBER Clone Flutter Firebase

hello guys welcome back to coding kfm my name is mohamed ali and in this video lecture what we will be doing is that we will basically enable the google plus api and now why we will use the google places api because as you know that now the user has to search the drop-off location so whenever user type any place name for example any specific area so it will retrieve all the places name related to the user search okay user search for drop-off location so we will retrieve all the related places and we will display it just like you guys see in uber uh right sharing application so yeah we will be working on that and using the google plus api we can actually get the plus predictions you can say okay that is let's say user type something about i mean the drop-off location the user is searching something and user writes some name last name so basically using the google pluses api what it will provide is that is using that we can basically get the plus predictions or you can say we can retrieve the name of place retrieve address of a plus and retrieve location coordinate of a place so let's start working on that so go to your browser and all we need is just to go to the console.developers.google.com which is this one okay console.developer.google.com apis which we also earlier i mean opened for the android map and ios map so after this we need to go to library click on library and here we need to search for the classes api which is this one okay places api google here you can see it just click on it and click on enable so the places api has been enabled successfully now let's go back to our project and here on the search screen dot dot file we are now going to create a function down here and it will be asynchronous function or you can say method so anyways we can give name as find less and we will pass one parameter to it which will be a string type and it will be the player's name which user will type so first we have to add a condition that the user must write something in the drop of location for searching the drop of location which is we are getting using a string inside the string variable class name which we are passing to this function find place so we can first check that if the length of it is greater than one and now the next important thing is so go to the browser and you can simply search for developers.google.com slash places slash web dash service slash autocomplete just write the exact url which is developers.google.com web service slash autocomplete and then press enter so it will redirect you to this page okay for the plus autocomplete and it is basically the documentation about how this autocomplete search or you can say replace prediction work okay which you can read from here but anyways i will just tell you in short you can say explanation that is the output we will get in the form of json or xml from this for this place is autocomplete and the required parameters that we will pass to it is basically the input and a key and you can read that is what is the input and what is the key and this key is basically our maps key and this input is basically the string that we will provide to it that is the user search query it is what place the user want to search for which place i mean to drop of location input from a user and optional parameters are such session token offset origin you can read about it here and next thing is if you see here there show us basically an example that is the following example show a request using the session token so you can see here we have to pass the input to it and the key which is our map key and the session token here you can see it so now what we need to do is you need to just copy this go back to your project and in here we can create a string type and let's give it name as auto complete url equals to and inside the double quotes you can pass that url which is this one here you can see it make sure that you do not give any extra space okay this is the url that we just copied and make sure to put a semicolon here at the end now we have to pass the require required parameters to it so the first thing is the input so from here you can remove this 1600 and this thing okay up to this end key okay here you can see it so before this end key you can remove this whole thing so input equals to dollar the place name that we are using here okay which you are passing to this method so you can simply say plus name and key equals to the map key which if i show you then we have inside the config maps my name map key variable so what you need to do you need to just remove this key before this end session token okay just like this just follow the exact same step and we have our map key this one and now and about the section token we will take care of it later on in the upcoming video lectures but for now just leave this as it is and now the next thing is you can say variable response equals that request assistant dot get request and pass the autocomplete url to it so you can say that if response becomes equals to failed then we will simply return otherwise we will use our response print the result so we can simply say print and response so that we can check if it is working or not so print response and let's also print any message so that we can see that after it you will get the results so we can say classes prediction response and then after it we say print response and now we have to call this function find place so let's just come here and where to okay which is our drop of text field so whenever this text field you will add the event which is on change which means whenever the user writes something in the text field it will call this function value represents the text which user will write in this text field so we can call the function find class and pass the value to it and yeah that's it now let's just test the app so the app is running now and now let's just click on the search drop off and now let's write any word i mean location starting any word okay you can write for example f and it will retrieve all the places which name start from f a so for example here you can see class is prediction response predictions so f means for either word okay here you can see it fair or for the girl pakistan okay here you can see now if you notice then basically it gets i mean all the predictions from you can say international level that is it is not country specific you can also make this country specific for example from any country you are so how we can make it country specific well it is so simple and so easy because uh i mean it is important actually now if you come here to the function which we created we need to just add one more parameter here at the end and it will be basically just right and again just like this and component and use the same spelling which is compo net c-o-m-p-o-n-e-n-t-s equals to country country colon now for example if you are from usa then the usa short name is us okay now i will tell you let's say from any country you are for example from india pakistan bangladesh or any other country just go to your browser and you need to just search for countries short name okay just search for it and just go to this country abbreviations basically it is called country abbreviations or you can say short names okay it will be direct just go to or you can simply go to this url also so anyways if you are from the african countries and you will find the two letter name here and the three letter name here just check it with the two letter first this is the african countries then we have antarctica country courts here you can see it and then australian and then the asia country courts so here it is secondary courts for example here you can see it for other region it is as that for bangladesh it is bd for india it is i n and for example for our country i mean from my country it is pakistan okay so i will just simply write pk here you can see okay so and in small english alphabets not in the capital so pk and then go back to the project and simply write p k in small english alpha x just like this okay and once you write this make sure what we just did here we write and components equals to country column and after the column you have to write your own country called for example i am from pakistan so my current record is pk now from any country you are you can just write your two two letter country code here okay so in my case it is pk so let's just test the app again and now i will show you how it works i'm just showing to the phone so the app is running now again and now let's just go to the search drop off and now if i write f it is going to retrieve the locations according to my country specifically so places prediction response now here you can see fastlab pakistan okay here you can see just not as it and then we have facile mosque here you can see it's starting from f islam about pakistan okay i mean all the results now you will get according to your country here you can see it so what you need to do as i told you you just need to write here your own country uh short name two letter name and i already provided you how you can find out about your country uh course which you can get from this url so that's it for this video lecture and see you guys in the next video bye for now

Channel: Muhammad Ali's Coding Cafe

Views: 18,390

Keywords: flutter taxi app, flutter taxi, flutter taxi app driver ui kit, flutter taxi booking app, flutter taxi app tutorial, flutter taxi app ui, flutter ride sharing app, ride sharing app development, ride sharing app, ride sharing app tutorial, ride sharing app flutter, final year project software engineering, careem app, careem clone app, final year project computer science, final year project computer science ideas, final year project, uber clone, uber clone flutter, flutter, dart

Id: bh_G5mgQFT8

Length: 13min 22sec (802 seconds)

Published: Tue Nov 10 2020