Flutter | How to get Nearby places with Google maps API in Flutter | Proglabs

hello guys welcome to my channel and my name is junaid khan so today's tutorial is about showing nearby places to user so but let me first show you a demo that what we are going to do so when you click on this button and you will click get nearby places so you will see that these are the places which are which are nearby so that's what we are going to develop today so let's get started so i opened my previous project the project in which i showed you the previous tutorials that how you can integrate a simple map that and how implement how to implement search places how to get user's current location so the same project in which i'm i will work so i opened home screen dot dot file there i'll have to create a new button like this one like this one nearby places so we can navigate the user to the next screen so i'll just copy and paste this and here i will type by places and for the navigator i have to create a new dart file and for this one i have to name it nearby places screen st yeah sdf here by places screen alt enter material i have to import the material package so now we have to change this route to near by this screen okay so let's start by running our app so we can see that either we are navigating to nearby places screen or not and i have connected my real device so keep in mind whenever you are working on google maps with flutter try to run your app try to just test your app on a real device don't test it on emulators because in that way might be possible you you will not see exactly what you are trying to develop so it's better if you test the app to test your application on a real device keep that in mind so our app installed successfully and when i click on the nearby places button right now it's it will show a blank screen first let's start working on the nearby place screen screen there i have to create a scaffold and in the scaffold i have to create a app obviously title const text we have a places center title true and for the body i have to create single child school view because might be possible that we have multiple uh nearby places so in case if the places are greater than 5 or 6 and our screen is not enough long then this will help us that it will create a scroll view so that's why i'm going to use a single child scroll view here join column i'm using column because i have to show the my children in in a vertical way so that's why elevated button to get the nearby nearby places child const text get near my places and that's it for now let's alt reload and see what we have here so now you can see that we got when i click on this i have a app bar with a title and a elevated button to get the nearby places and now we will start working on getting nearby places api key here you have to pass your api key which you get from google developer account so when you when i already showed you that how you can create a google google cloud account and how you will get the api key so follow that method and get the api key and after that i have to define the radius this radius is actually about um in how much meters you you want to get nearby places like for example 30 meter i want to set this value as a 30 meter so i i'll get the nearer places in a radius of 30 meters if i set it to 100 sorry 100 then i'll get the nearer places in 100 meter radius so for now i'll set it to 30 meter radius double latitude here you have to pass dummy uh longitudes and latitudes i am passing this value but you can combine this tutorial with connect location tutorial and you will get you will first get the current location of the user and you will pass that value in these variables and you will and then you will get the nearby places by following this tutorial so you can combine two tutorials to get your to get your purpose what you are what you want to do seven four two seven nine six six four okay so all set and then we have to create a method here get nearby places alt enter great method here comes a tricky part async because this method requires hitting the api because i am getting the nearby places from the api so that's why i put as an async because i have to use the evade in this method so that's why i used to use async we have to use a new package for this tutorial http this method allows us to hit the api http column 0.13.4 update or url uri https backslash maps dot google apis dot com slash maps slash api slash place slash near by search slash json location equals to and plus we have to pass our latitude and longitude here which we already have which we already defined on on the top two string again use plus column comma and here we have to pass longitude dot to string again plus and radius equals to plus radius which we are which we have already defined on the top which was uh 30 meter plus and key equals to api key so that's it in this way we can hit the api var response here comes the part where we have to use the package which we have http package package http dot post url alt enter let's see why okay so you can import this package by this import package column http slash http dot dot as http in this way you can use this package okay so we have defined our url in this way our url will be hit and our response will be in this variable so now we have to decode this response so for this one we can use uh postman and i don't know exactly that you guys know how to use postman or not but i suppose that you guys know how to use the postman so on postman you can define your url location 15 radius it can be 30 or 15 and key and you'll get the response i'll i'll share this code i already uploaded this code on github so you guys don't have to worry about it that how you can create a modern class you can just copy and paste that modder class in your project so but i'll show you that how you can convert it to dot json to dot just copy this response and open a browser search for this json to dot click on the very first website jab javier cbk dot github dot io paste the response which you have copied name your class which you want to define nearby places response generate dot it will generate a dart file for you just copy dot code to clipboard go to your android studio again and here you have to create a new directory right it's not showing me so on on the left folder you need to create a new directory models here you have to create a new dot file nearby response and just paste it so you will get something like this one that's the whole thing you will get and right now we are not using html attribution so you can just delete this chunk of code delete this one and also delete this these three lines these three or four lines okay so we are not getting any area error alt enter remove unnecessary new keywords everywhere in file enter so it will remove all of the new keywords which are redundant okay now we have to create a model class object nearby places yeah he replaces response and nearby let me check done okay so now we have to go here nearby copy this one paste it and near by places response dot from json okay and json decode it will decode our response to json response dot body so our all response which we will get after hitting this api will be stored in this object okay and after that we have to run we have to set state so it will notify us that okay api is apa hit it successfully now you can use this object now we have to go in our single child store view so we can show the results here because we are already using single child scroll view so you we can use this one we have to use if condition here dot results if the results are not equal to null then this list should show and i equals to 0 because we have multiple uh results so that's why i'm running a loop here nearby response list dot results dot length i plus plus and here i have to use um sorry i is less than okay here i have to use a new widget nearby places widget and in this uh basically i'm using a function to show a widget so and here we have to we will pass the index the value in line index okay alt enter nice return type must be widget return container and with will be media query dot off context dot size dot width height we will not define the height because it should be dynamic if the results if the result value is larger than it should occupy the space it needs so margin edge inserts only i need to define the margin from top bottom and top left and right and adding for the inner content all five and decoration border border dot all color black and border radius order radius dot circular 10 and chart will be column again because we have to display two things three things actually name location and the opening or closing hours if either the place is open or closed so children so that's and i need to show them in a vertical okay so that's why i'm i i will i will use column i'll just name plus results yeah we i i'm using results variable from here results dot name exclamation mark because i am using exclamation mark because might be possible the value is null so in this way we we can use null exception so that's why i'm using exclamation mark here location results dot geometry dot location dot lat dot to string and plus i have to i have to display longitudes as well so i'll just copy this line and instead of flat i will use lng and results dot opening hours if the opening hour is not equal to null then it should show open either closed because opening hours will show only when when the place is open if the place is not open then it will show it will be null so that's why i put a null exception here so everything is done only one thing you need to do guys that you need to get your own api key and pass it in this variable then you will be able to run this app and get the nearby places if you leave it empty then you will only get the result that api key is not defined so keep in mind that you have to define your api key here so after doing all of these things so after doing all of these things i'll try to run the app again okay application started successfully click on the nearer places and get nearby places oh i we have got um exception here just click on this one and it will take you to the variable which is causing issue so it's the rating variable which is causing issue right now so because right now we don't know whether the uh rating will be in integer or double value might be right now we have integer and in some cases we have double rating so for uh for the precautionary measures you can use dynamic here so in this way we can define it that in any case it its very will be dynamic might be its integer might be string might be its double so it will handle the situation try to run our app again okay we started application at nearby places and let me show you guys me congratulations so we are getting our near our places lahar analog enterprises prog labs orange door studios ravi blog so in this way you can easily get the nearby places and if you want to get more nearby places you can just easily increase the radius and it will show you more values here so that's it so i'll update the code on github as well so you can if you want to see that how i done it so you can clone the repository from github easily thanks for watching my tutorial and in coming days i'll i'll start working on i'll chat app with firebase so keep press the bell icon so you will get the notification for my every new video thank you so much

Channel: Proglabs Official

Views: 10,485

Keywords: proglabs, android tutorials, beginners tutorials, ios tutorial, flutter tutorial, flutter, flutter google maps, google maps api, google maps, google maps api key, maps, near by places, near by places in flutter, places sdk android, Nearby Places Suggestion in Android, google search places in flutter, get nearby places in flutter, search nearby places in flutter, google map api key, flutter tutorial for beginners, flutter app development

Id: nbo_G3RcqU4

Length: 25min 57sec (1557 seconds)

Published: Thu Sep 15 2022