Google Map with Places Autocomplete in Flutter, Part 1

hey everybody welcome back to the channel i'm going to start a new series today and kind of interweave it with some of the other series that i have going on uh but this is going to be a shorter one about an hour to an hour and a half total we'll break it out over uh four or five episodes so it's about 20 to 25 minutes per per sitting people have told me that you missed these kind of projects uh this will work with uh autocomplete in google in google places uh we'll use google places to go get uh specific types of places we'll use google maps uh i did another series in google maps about a year ago i've tried to keep the repo up to date with the changes but there have been a lot of changes since and so i think it's a good time to revisit that build on those skills and uh and put together an app here so this one uh will find you so it's gonna use geolocator to find where you are i'm not at the googleplex but my emulator uh is is set to that and then we have these options down at the bottom and when you click on these it's gonna find the closest uh item of that category so if i wanna find the closest pet store to the googleplex uh it's way the heck out there i bet a pharmacy is much closer to the googleplex and you can see the map is adapting to the distance so if it's very far out like with the campground it's going to zoom back out so that that item is just inside the map and if we want to go for lawyer we're going to zoom in quite a bit because there are apparently quite a few lawyers right near the googleplex we're going to use autocomplete up here to auto search and so we can search by towns and when we do that the map is going to refocus itself on that particular town and then we can do the same thing we can find the nearest pet store and it's gonna pull back if it needs to to show you where the nearest pet store is and uh usually zoom in when you go for a bank yep there we go all right so a lot of good skills in here if you'd like to follow along let's go ahead and get started all right so to get started here i'm going to type create nope flutter create and i'm going to i'm going to use a dash org flag you don't have to do that but i'm just going to give it a domain name that is tied to my domain and then i'll give it a name and i'm going to call it places underscore autocomplete and i'm just recovering from a hard drive crash and i don't have visual studio code in my path so i'm going to open it up over here and drag it in all right so there's my main dot dart with the default app so why don't we bring in the packages first and i am going to use change notifier provider for state management so if we visit pub.dev and we go to provider and we click on the installing tab we get the the current version here so we can copy that and bring that into pubspec.yaml and paste it down below cupertino icons and the next dependency we're going to need is geolocators so when this app boots up we want to uh focus in on wherever we are uh for starters just to have something on the screen so we're going to go to geolocator and find the installing tab find the latest version and put that just below provider we'll need http because that's all google places is is a rest api that we're going to hit and so we'll use the http package for that so we'll grab that we'll put that below geolocator and last thing we need is a package to work with uh google maps and so i'm going to use google maps flutter and same deal copy paste and we are all set with the packages we'll hit save visual studio code will bring that in for us great all right next let's set up our permissions and so we're going to want to start at our google cloud console and so i have a project existing that i'm going to use for this or you can set one up if you don't have one uh already and what we're looking for is we want to enable the apis for android for ios and then for the rest searches for places so over here on the hamburger menu we have apis and services and the first one we want to go to is library and usually maps comes up first if not you can search it here but we need to enable three api so the first one we need to enable is maps sdk for android so if we click on that card it's going to say enable here if you haven't enabled it yet uh it will say manage if you already have we're just looking to see if this check mark with api enabled exists and if not enable it and make sure that it does one do the same things for for the maps sdk for ios okay same deal we want that api enabled and then we also want the places api so i'm going to on the maps i'm going to click view all and i think we'll find it pretty quickly yeah right here the places api you can also search it again just want to make sure that that is enabled or else our requests are going to be rejected at the server all right with those enabled we'll be able to access access them if we pass in the correct key so we want to come back up here to apis and services and go to credentials and i have an api key i'm going to create another one here just to show you how it's done so we click on create credentials we go to api key and it's going to tell us here's your api key do you want to restrict it and we're going to go ahead and restrict it so we'll click on this restrict key and we'll leave this section open here we won't restrict it by the protocol but we will restrict it down here under api restrictions so we'll go to restrict key and what we'll do is we'll just enable the three the three that we just set up so we want so we want maps sdk for android we want maps sdk for ios and we want the places api all right and with that we can save it and then we have an api key that we can use throughout this application all right so don't close that tab we're going to have to refer back to that in just a second so google maps is going to require some permissions as is geolocator so if i go back to the google maps flutter package i can see on the readme file that there is get the api key we just did that enable the sdk platform we just did all of this then there's some permissions we need to do so for android we need to grab this metadata here copy it we're going to come back into our application and we're going to go into the android application and we're going to drill into app we're going to drill into src we're going to drill into main and we're looking for this androidmanifest.xml and this goes inside the application so right after metadata flutter embedding but before we close the application we can paste that in there and we want to sub in the your key here with the key that we just created so we just created this i'm going to come and copy this still keep it open because we're not done but i'm going to paste that in there and that's going to take care of android for maps don't close that manifest because we're going to come back to it now for ios we want to go to either the appdelegate.m or the appdelegate.swift and if you've created this recently it's going to be appdelegate.swift you don't have to do this in xcode you can do it right here you can just hit the fly down for ios we want to go into runner and we're looking for appdelegate.swift and we are looking to add this line right here gms services with your api key right after this boolean and above the generated plug-in registrant and obviously we need to sub back in our api key so we'll come back here again i'll grab that i'll paste it in and make sure you don't miss this detail here where we import google maps so it's right here make sure you get that all right and that is all set for google maps we do have some requirements also for geolocators so let's go hit that all right and for android we need to make sure that our gradle properties has these settings if you are running a flutter project that's uh been built in the last six months you're all set you don't need to worry about that you can check that if you want um it does want us to set the compile version to 30 so i'm going to go into android i'm going to find my build gradle in my app and that's where we have this compile sdk version i'm going to set that to 30. and then we want to pick one of these two permissions and we actually want the fine location so you get a course location or a fine location permission and we're going to get the fine so we can get a little bit more accuracy and so we copy that and we remember i told you not to close your android manifest so that is an app main uh if or let's see app src main if you did close it but we want to paste that into the android manifest and that goes outside of the application so like that and then for ios we want to paste just these top two we don't need the background location so we're just going to take the top two we just want the location when the application is in use and so again you don't need to open xcode for this you can go to ios you can go to runner you can go to info plist and drop it right before this closing dict tag so it's a key value pair i'm just going to indent that and that should be all set uh do keep this tab open because we're going to need it one more time i don't know if we'll get to it in this episode but we also need it for our places service so let's clean up our i'm going to close this ios and let's clean up our main.dart files so i just want to take out these comments here just get rid of those just the big ones and then everything from class my home page down let's just go ahead and get rid of that um i'll leave the the app in the main.dart file that's not best practice but it's okay for this project i'm going to create a new folder inside lib called src so that'll be our source folder and inside the src i'm going to create another folder called screens and then inside screens i am going to create a home screen dot dart and this is going to be a stateful widget so we're going to want to work with a stateful widget because we are going to introduce a map controller and we're going to need to dispose it so i'm going to use stfl to create a stateful widget that i am going to call home screen and we will use a material app in this one so we'll bring in package flutter material all right so that'll give us an error in our main file and we just need to change our home page from the widget that we deleted to our home screen and we should be all set there so bouncing back to the home screen let's just scaffold this out quickly so let's give ourselves instead of a container let's give ourselves a scaffold and i'm gonna not use an app bar uh i'm just gonna jump right to a body so no app bar in this one and the body is going to be a list view and we'll give it a children property let's drop my semicolon in there get rid of the error and so at the top is where we're going to have our search field so we will use a text field for that and then we'll drop in our google map and we're going to stick our google map in a container so let's do a container um don't worry about width but we do need to give it a height and so let's say 300 and so the container will have a child and the child will be the google map so let's bring that google map widget in and let's just give it the minimum requirements so that we can see it on the screen and know that everything is working so we'll do map type and that'll be map type dot normal so you can do satellite view hybrid whatever you want to do you can do my location enabled so that will put that blue dot wherever you are on the screen and for initial camera position so we need a camera position object and you know what let's just give this a set location to start just so we can make sure things are working uh let's do chicago latitude all right so we'll give it a target which will be a lat lng object and that will take latitude and longitude comma separated so we'll do 41.8781 and that's actually a negative in the northern hemisphere or western hemisphere 87629 just do it like that all right and it's my theory that if we run this now we should get a map on the screen let's test that theory all right so there's my map and we haven't introduced geolocator yet so if you're not getting a map on this screen go ahead and check the permissions in the flutter google maps package just to make sure you've got everything correct there because we haven't introduced uh geo locators so the only thing that could be wrong at this point is you haven't enabled the apis here in the library uh or you haven't set up permissions correctly so you can double check those and so the text field is kind of hard to see it may be working let's give it a decoration just to confirm that it it is there so that would be an input decoration and let's give it a hint text and we'll say search location good now you may get like a sync error the first time that you do a hot reload with google maps um just go ahead and blast through it and it should disappear after the first run through um i'm running this in visual studio code there was a way in intellij to stop that kind of error from displaying doesn't seem to actually affect how the application runs but something with hot reload is is triggering it at least with this version so maybe you won't get it uh but if you do just see if you can blast through it and uh keep going and if it it clears up after that i should be fine all right so before we wrap this one up let's go ahead and put ourselves on the screen have it figure out where we are zoom in on the map and so for that i'm going to create a new folder in lib and we're going to create a services folder and inside of that services folder i'm going to create a new dart file which is going to be my geolocator service dot dart file and that's a class that we will call geolocator service and not too much in here we just want to get a future back with a position object and we'll call it get current location it will be an async function and we want to return the awaited value of geolocator get current position and we're going to pass in a desired accuracy value of location accuracy dot hi and we'll follow all of that up with a semicolon and that should be all that we actually need in this service we'll need a way of storing this information so let's create ourselves a new folder in lib called blocks and inside there we'll create a new file and for a lack of a better name i'm going to call it application underscore block dot dart and in there we'll create a class called application block with change notifier so we'll use that change notifier mix mix in to alert our ui to changes i'm going to use this as the uh intermediary between the view and my services so i'm going to bring in an instance of that geolocator service that we just created i'm going to set myself up a section for variables uh and in here i'm going to set a position variable for the current location and so we'll listen to that with the ui so that's going to be a position which is part of the geolocator package that's what we're getting back from uh our geolocator service this position object which has the coordinates within it um so that's what we're going to do that's going to be our type and we'll call it current location like that and we're going to want that to fill when we uh first boot up the application so let's create a function that gets our current location and sets it so we'll call it set current location and we'll make it asynchronous and so we'll we'll call our geolocator service our get uh location like we just created here get current position and then we'll set that value we get equal to this uh current location variable so current location is going to be equal to the awaited value of geolocator service get current location like that and at this point we want to notify the listeners so that's going to tell our ui that there has been a change and that's just part of the change notifier which the change notifier provider will listen to all right now i said we wanted that to fire when we first booted up the application and so we can set that inside the constructor because we're going to create one instance of the application block which i actually want to be capital b there and so when we create that instance at the very beginning of the application that's when we want it's a good time to call that set position so we'll do a constructor here and in the constructor we'll just call this function right there and we don't need to await it or anything we can't do that really in a constructor anyway we're just going to call it and get it get it going and then we will have the ui respond when it's ready all right so let's make sure that we have an instance of this block in our widget tree and we can do that by coming out here to main dot dart and just wrapping an instance of our material app with a change notifier provider provider and passing in an instance of the block we just created so we need a context and then we fat arrow arrow it over to application block all right so let's just connect that all together so let's go back to our screens folder and our home screen and when we build we want to bring in an instance of our block so we can do that with a final and we'll call it application block and we'll set it equal to provider of context and i'll just need to bring in provider and specify that our type is an application block like that also need to bring in that so that will give us access to our current location and if that's been resolved if that's that's done uh then we want to show the map and if it's not then we we actually don't want to show the map yet because once we show the map and we pass it an initial camera position we don't get a second shot at that we can move it around uh to different camera positions but we only get one shot at the initial camera position so you don't want to build the map until you have that and so we would want to attach on our body here a clause where we would check application block dot current location and check if it's equal to null and then right up top where it is null so we'll do a colon down here for when it uh is not no we'll we'll display that list view but if it is we'll center up a uh center with a child and we'll do a whoops circular progress indicator so we'll just get a spinner and down here in our lat and our lunge we want us to replace that now with our current location so we would say application block current location and we want the latitude and then we also want to do application block current location longitude and i didn't set a zoom property originally so let's do that oh i screwed that up oh no i didn't so the lat okay that has to be the lat longitude is so we find where that closes we'll do a comma and then we come down and do a zoom and 14 is enough that's why we're we're back here in uh in outer spaces because we didn't actually zoom in all right so if we say that and we will need to do a hot restart because we've got a stateful widget to trigger all that okay we're going to get asked for permission to allow the the app to know where we are so we say allow all right and so now we are googling or now we are zooming in on the googleplex here and if you're on android this is simply responding to your location here so you could move this around if you wanted to in that that case uh if you're on an actual device then it should be uh looking right down upon yeah rather creepy like all right so let's wrap this episode up here and in the next one we'll come back and we'll start to implement the search function here uh that'll allow you to search and get suggestions with an autocomplete for towns and cities and locations and you can click on that and we'll have the map bring it to it so that'll be next time on this series thanks for watching and hopefully we'll see you in that next video

Channel: Andy Julow

Views: 22,639

Keywords:

Id: sL74UNLssV8

Length: 29min 19sec (1759 seconds)

Published: Sat Feb 13 2021