Places Api Flutter | Location Api Flutter Google Places AutoComplete | Google Maps Tutorial

welcome back so in this video we will be working right on the places API through Google Map search of all close that dot file from here and go to word lips create a new directory by the name places API Google and right click on this directory create a new DOT file and I'm gonna name this as a places API Google and here you'll have a stat for the widget so write SD in here now simply give the name places API Google map search now just simply double this key const and click upon the stat for widget import the library by 0. now simply copy that name from here go to resume dot dot remove that from here remove it and Pasty places API click up on that import the library and all just fine in here add the brushes like that and in here you guys can see that totally black screen story empty because right in the places API let me just show you there's just a empty container so that why you guys can see that empty screen totally black and it's a straightforward it's automatically just record the app and you guys can see that so now open the browser and search for Google Map API console in here open that first one Google Map here we are right in a Google Maps platform now in here I have already just selected the project right in the first video and you guys know about that already so right after that you will go to the apis and services click upon that and scroll down you can simply just enable that place it agree from here or you can just come here and search for in here okay like that and here and click on that enable it will just enable it just wait for a while so if you go back to places API it's an arrow now as you guys can see has been enabled so you can also just read the documentation and that's it now we will go towards the Android Studio first let me just open the letter from here all this fine now we will simply go towards the prospect.tml and we will add some dependencies so open the browser and search for pop.dev .com.f here we are open that first one and simply search for Edge TTP that one multiplatform feature based API for HTTP requests so basically it's a protocol used for communication on the world wide web and it's allow webs to request and also to retrieve resources so we are using that for the places API for requesting the specific place now what I'll do I'll just open that and go towards installing and from here I'll copy that dependency go towards the Android Studio in here back again below this geolocator paste it with a proper alignment like that now go towards the pub.dav and this time we will search for uid so this you already gonna generate for us a unique ID and we will use that in our session token to just get the required places API and gonna generate a unique ID for us so click upon that is your ID and go towards installing from here copy that dependencies go towards the Android Studio this in here pass through the proper alignment like that and hit the bobcat it will import it this way for a while so we are done with that close it from here go towards a places API dot file in here let me just make sure one more time which is good again in here now we will provide a combination of circle for this P6 screen so it will look more good for time saving I'll just go in here and you guys can see that decoration from here to here we will cook it and go towards the places API Google dot dot close that one and in here back again that dot file adding this container paste it and load that in here you'll have a child and gonna take this scaffold widget and there you will just have the background color in order to get that specific color so in here we'll have a transparent and here I correct the spelling and then we go over transparent press the Ctrl s and you guys will notice the changes there we go now we will also just add the app bar a bar which in here there is no need of that but I'll just edit in order to recognize much better and what I'll do now I'll just add the title net text feature in here I'm gonna say places bi Google Map search and I'll just fine I had the cones modifier do it we're gonna just set this right in the center so you'll just get this down from here and here we'll see a center title true now below this app bar in here you have a body okay for now on remove that and here begin like that press the Ctrl s and you guys will notice the app bar okay there we go and also we will just add the decoration for this app bar also so what I'll do in here you will have flexible space right in the app bar in there okay flexible space gonna take the container widget and right in there we will just provide that decoration so copy from here to here and paste it down in here press the Ctrl s there we go now you will just change the color position so tier will be here and orange will be here so then we can just notice the difference controllers there we go okay and now below the empire in here we have body and right in the body we'll do some padding padding widget in here Edge in set we will go with the dots metric we will just set the vertical to 12. and below that now below that we're going to take the chart and gonna have the column widget in here and right in there I'm going to take the children and in here we will have a text from fuse with a capital T in here text form feel and we're gonna just take those values down in here we will do the decoration in which we will say and tax and the text gonna be something like search here for the search bar where I will show that specific text and we're gonna go right at top create the controller so whenever the user will enter something right in the search bar it's gonna then store and in that specific control that we are about to create so above the widget View and here you guys can see we will say final provide that key first so it's going to be non-changeable so in here we'll say text editing controller can give the name as a controller and provide the text editing controller edit and semicolon and also you will make that private yeah yeah now just go down and write in this text form field we'll say controller I'm gonna provide the control very just squared a while ago in here now we will just press the Ctrl s and check the output there we go and you guys can see the search bar in here and also the index search here so for now on it's just a UI design okay so whenever we will just complete all of the work and Manning work then we will be able to search in here for a specific Pisces through the Google Places API now head coach modifier and basically that's it for this video right from the next video we will work further so see you then

Channel: Muhammad Ali's Coding Cafe

Views: 2,403

Keywords: google map api flutter, google map, flutter google maps, flutter google maps api, flutter google places, flutter google places autocomplete, flutter google places api, flutter google places autocomplete example, flutter google places package, google geocoding api, google geocode, google geocoding api key, flutter geocoding example, flutter reverse geocoding, flutter directions api, how to add google map my location, how to add google map in flutter app, google maps api

Id: fp8GcCN05d4

Length: 11min 32sec (692 seconds)

Published: Tue Aug 29 2023