Following a user with Google Maps for Flutter

Get 300 checks per monthabsolutely FREE!

No credit card needed. No strings attached.

Everybody welcome back to the channel I broke my lapel mic so the audio might be...
00:00
everybody welcome back to the channel I broke my lapel mic so the audio might be a little iffy on this one so hopefully you can hear me also burnt a brush pile this weekend and burnt my face while I was at it so it's alright I think it'll add an intimidation factor if I'm ever face to face with another human being again we'll see got a new video today I did the series on Google Maps last week and people are asking about we in that one we did Geo locator to get the location and we put that on the map and a lot of people were asking about how you could stream that and get current positions as you went along so we're gonna do a project today where we get the stream function from Geo locator use that and then I think it's kind of useless unless you turn around and put that on a map so we're gonna bring in Google Maps and then follow the device as it moves across the map keeping the user in the center of the map so that's our challenge for today let's go ahead and get started alright so I created a
Flutter project by typing flutter create map follow not feeling super creative...
01:00
flutter project by typing flutter create map follow not feeling super creative with the names today so it just called it that and to get started so what I'd like to do is build this up piecemeal so that we can kind of stop and check each piece as we put it into place because there's some some moving parts here that you know if you get wrong on the first part we'll just compound on you and so let's start by getting Geo locator getting the packages that we need getting provider and getting that set up just starts so I'm gonna go to pub dot dev and I'm gonna get Geo locator so I'm gonna find it first obviously you can see I'm sitting on the page I'm gonna type in geo locator search that and it brings me right back to the page I was on I can go to installing and get the latest version of it there so we'll put that name pub spec dot yeah mol I also want to get provider but before we leave this geolocator page we have some setup to do here so let's do that while we're here we need to do some
Permissions here there's a section here on Android X if you're using an older...
02:06
permissions here there's a section here on Android X if you're using an older version of flutter which I don't know why you would be if you're following along on this tutorial but just make sure that you are all set up here with Android X and then down at the bottom we have our permissions way at the bottom okay so for Android we've got to locate we've got two options we've got fine location and we've got coarse location I'm gonna be walking around in my infront of my house with this so if I want I don't want to go too far before it registers me so let's get fine location and we want to take that and we want to put it in Android app SRC main and we want it in our Android manifest right after the application closing tag so between the manifest closing tag and the application closing tag we want to put the permissions that we want right
There alright then for iOS you can come down here and grab these two lines of code...
03:08
there alright then for iOS you can come down here and grab these two lines of code here this is to get the initial permission there are four additional lines down here if you want the app to continue to follow you follow you in the background when you have the app closed we don't need that so I'm just gonna grab these two lines I'm gonna go here close Android open up iOS and looking for inside runner and I'm looking for info.plist and so we just want to take this down to the bottom and paste that in there code format if you wish and we're all set there alright let's grab provider before we do any more work and so we can come in here to flutter packages and we can grab provider take the latest version put it in pub spec yeah mol just like we did for Geo
Locator its save let vs code import that and now we are ready to get to work so...
04:15
locator its save let vs code import that and now we are ready to get to work so I'm gonna close this iOS folder here so I want to start by building the service that we will access for the Geo locator services so we'll access our Geo locator API in a service so we'll inside the lid folder we'll create another folder which we will call services and to that I want to add a file that is called geolocator underscore service dot dart and so that's a class of Geo locator service and we want to start by bringing in an instance of Geo locator so let's do
Final Geo locator well call it geo is equal to a new instance of Geo locator...
05:28
final Geo locator well call it geo is equal to a new instance of Geo locator all right so we want two functions here I want to be able to get this dream of the position I also want to be able to get a future position and the reason I want to do that is because when we work in a map when you have the map loading you want to load it with kind of a static initial position and initial variables and a future works best for that and then you can use a controller to control the the variables on the map after you've loaded it initial so but by doing both we're gonna we're gonna take the strength from each one of those and apply it where it best makes sense so we're gonna start with a stream so this is the one that's gonna follow us around and a position object is what you get from from the Geo locator and
We'll call that get current location and we needed to feed it some options so...
06:36
we'll call that get current location and we needed to feed it some options so we'll create a variable called location options and that will be equal to a location options object and so we have accuracy so we will do location accuracy high and then we have a distance filter and so the distance filter is going to dictate when your stream will fire with an event so if you are out there walking around and you're driving or you're recycling or whatever this this this property is in meters so if you set it to say a thousand meters every kilometer you're gonna get a stream of that now you probably want to go more than that so let's say 10 meters for our distance filter you slide that over so you cuz
Yeah that might as well just stretch this across so we're not using the...
07:41
yeah that might as well just stretch this across so we're not using the emulator yet so distance filter will be 10 and that means every 10 meters or you know as best it can determine it's gonna throw in an event that we can then log on our screen all right so that's our options and then we can return geo dot get position as a stream and then we can pass it those options that is not right location options there we go and all this is in the Geo locator package page right here so we've got the geolocation we've got how you can do this as a stream right here we've got location options so all that is documented right there if you need to to refer back to that so that'll give us a stream of our current position let's also while we're in here build a future a position and we'll call that
Get an initial position or initial location and that will be in a sink and...
08:48
get an initial position or initial location and that will be in a sink and here we'll return geo dot get current position not stream just get current position and we will give it a desired accuracy of location accuracy got high and that should actually be get current position there we go this is also documented right here this is last-known position this is get current position right here all right so that is our service and that's all we'll need there for now and so let's build some visual
Components so let's go to Lib and let's do a new folder and in there we'll...
09:52
components so let's go to Lib and let's do a new folder and in there we'll create a folder called screens and in screens we will create a new map d'art class and we will call this a class map and we're gonna create a state full widget so if you watch my other videos with Google Maps I've only done stateless widgets so far and that's fine as long as you are loading the initial values at the time that you create that widget so we had a location that of markers that we wanted to put on the screen and we had those already when we created the widget and we could load those at the time whenever you when you want to actually come back to the map and update the the variables to it then you're gonna need a stateful widget
You're gonna need a controller and a stateful widget is gonna work best to...
10:54
you're gonna need a controller and a stateful widget is gonna work best to assist you with that so we will do extends a state full widget and we will do that override whoops ad there we go all right we'll do a state and stateful widget create state and we will create an object which is underscore map state all right and then we'll create a class which will be our state's so underscore map state extends state of type map and that is going to need a build method somehow I got flutter semantics in here
Instead of material class all right and that needs a build there without a doubt...
12:12
instead of material class all right and that needs a build there without a doubt the fastest way to build a stateful widget especially when you're a clumsy type or like me is to build a state less widget and let visual code upgrade it to stateful or to get some snippet program some plugins that do that for you but if you don't have those just create a stateless widget upgrade it all right so we got our build here let's let's return let's just return to scaffold let's just do an empty one for now all right so let's come out to Maine dot dart I just wanted to rough this out so that we could have something to put in Maine dart and in Maine dart we've got our sample application let's get rid of that and so let's just take this big glob of green out of here and then let's just take everything from class my homepage down right out of there and then we can get rid of this and then we
Can start the emulator and I'll need to import map there we go all right then we can start...
13:22
can start the emulator and I'll need to import map there we go all right then we can start the emulator okay there we go so if you've done everything correctly you should have a blank screen which is not something you hit very often but remember that we created a blank scaffold here in map Dart so that's exactly what we expect to see we don't see any errors here in the terminal so so far so good all right so for starters in here let's bring in an instance of our geo-located service and we'll call it geo service and obviously it's just a new instance of our geo locator service like that all right so let's make sure this is working with some information on the screen that will give us the latitude and longitude
That that stream is emitting so let's do a stream builder for now...
14:36
that that stream is emitting so let's do a stream builder for now and move that to the next line give myself some room our stream is going to be geo service dot get current location and so for our builder we need a context we need snapshot and for return let's just return a center widget with a child which will be a text widget and we'll return snapshot dot data let's mark that our stream builder is going to be streaming a position so it's not we're not dealing with dynamics here let's
Import Geo locator up there at the top so we can do let's see let's do our...
15:50
import Geo locator up there at the top so we can do let's see let's do our latitude actually you know what let's do a string and then we'll do dollar sign and then curly braces around that so that will be our lat and we'll do a comma will do LNG and then we'll do dollar sign curly braces and we'll put our longitude in there snapshot data dot longitude and then we need to close our quotation decode format that oh I'm a better get my uh semicolon on there first then I can code format and let's also in here just make
Sure that our snapshot has data so if snapshot dot it's not have data we'll...
17:00
sure that our snapshot has data so if snapshot dot it's not have data we'll just return a centered child circular progress indicator okay so when I save that it's asking for permission to be allowed to track the location we will click allow and that is our latitude longitude not very impressive so I'm gonna throw this on my device I'm gonna go outside and start to walk around and make sure that we are getting the results that we want before I do that let's make that text a little bigger so it's easier to read for you so let's do a style let's do a text style will do font size well let's try 20 and go to Baker I'll go right off the edge of the screen that's better all right I'm gonna put that on my device I'm gonna take it outside and walk around with it all right I'm outside I'm recording this on my phone so it'll sound a little
Shaky but we're walking into the forest and there you go just change there I...
18:13
shaky but we're walking into the forest and there you go just change there I think it watch these numbers carefully so I got a two nine eight for the end of the longitude and there it goes all right so I have to go 10 meters to get that to register saying that like I understand what 10 meters are is a dumb American but evidently it's kind of far walking along at a pretty brisk pace and there we go so the stream is working it is emitting events every 10 meters or so whatever that means and it's updating our position so let's go ahead and add the map next okay so we know geolocator is working let's go ahead and bring in map and make this a lot more interesting so if we go back to pub Deb and look under google map it's not necessarily the first one that comes up it is Google Maps flutter down here is what we want
And so we go to installing we can grab the latest version and we can put that...
19:15
and so we go to installing we can grab the latest version and we can put that in pubs back yeah Mille all right below provider and save that all right go back to the readme file and let's let's get started so we're gonna need a key for Android and iOS so we need to go to our Google Cloud console and as his console dot cloud.google.com and you need to have a project and if you don't have one you'll need to start one and once you have one you can go to api's and services and the first thing you want to do is you want to go to library and you want to enable both of the api's we need so maps is usually at
The top you can search for it here we want to enable at least one of these...
20:18
the top you can search for it here we want to enable at least one of these SDKs depending on your platform so if you're only gonna use it for Android you know just obviously Android or or iOS if you're on iOS or if you want to do both then you want to make sure you enable both of these API so you'll just want to click on them and mine is already enabled but if it's not you just want to click enabled there and then you want to do the same thing for your iOS I've got this API enabled but if it was not you just want to want to turn it on then you can come out of there and then you're gonna need a key so if you don't have one already you can go to create credentials and you're gonna want to create an API key and this is your API key you're going to want to restrict that so go to restrict key and this is okay at none but down here under restrict key click restrict key and
Let's just set up the Maps SDK for Android and Maps SDK for iOS and click...
21:20
let's just set up the Maps SDK for Android and Maps SDK for iOS and click Save all right so then we have a key here so let's come back to our documentation for pub dev and Google flutter Google Maps flutter and for Android we want to copy this tag here this meta tag we want to take it in here to our project our Android manifest file which if you remember was on our Android app SRC main and it is right there and we want to paste inside here but this time we want to be inside the closing application tab so there's already a metadata tag there we just want to add another one I'll format that up a little bit and you want to put your key here so we come back to our credentials and we want to grab that and put it
Right here so that takes care of Android and then for iOS we want to go to our...
22:37
right here so that takes care of Android and then for iOS we want to go to our actually it's there's two options here if you are on a newer version of flutter you're gonna get app delegate dot Swift so this is the one you want to do and this I'm gonna just assume this is the the one that you're on if not you want to use the follow the instructions up here but we want to go I'm going to close Andrew I don't want to go to iOS we want to go to Runner and we want to go to app delegate dot Swift and we want to do two things first of all we want to make sure we get the import for Google Maps so we copy that put it up here and then we want this line in between boolean and this generated plug-in registrant that there so we can put that right there
And obviously need to fill in your key here with your actual key...
23:43
and obviously need to fill in your key here with your actual key all right now one more thing before we leave there if we go back to the readme file there is an opt-in down here at the bottom for embedded view preview at least on my device this actually won't work unless I've opted into this so I'm gonna set that up so in iOS in the info dot plist we want to add a new key string value pairing so if we just take the last one the one we added for geolocator copy it and paste it and what we want to do is replace the key with this value here and then the value will be yes in all caps and so you can try it without it if you get a blank white
Screen when you go to produce a map come back here and put that in there cuz that...
24:48
screen when you go to produce a map come back here and put that in there cuz that likely is the cause that's what happens when I run it at least on the emulator all right let's close iOS and let's head over to screens map dart I'm gonna take this scaffold and I am gonna take out the entire stream builder because that was just a temporary measure to test our progress on Geo locator and in place of the body or in place of the stream bill there I'm gonna put a center widget and I'm gonna give it a child of Google map all right and then I'm gonna give it an initial camera position which I'll leave blank for now come back to that I'm
Going to give it a I'm gonna do map type I'm gonna do map type dot satellite you...
25:49
going to give it a I'm gonna do map type I'm gonna do map type dot satellite you can pick whichever you want I'm gonna pick satellite because when I go outside to track this it's actually I think it's gonna be a little easier for you to see the movements based on the satellite because I'm kind of in a rural location with not a lot of landmarks so as you can see the trees moving here so I'm gonna do satellite alright so we need to fill in something for this initial camera position and this is gonna tell it where the camera should be located when the map is is booted up or or displayed on the screen and so this is where I want to bring in the future that we set up in the Geo locator service I would like this widget to know already where it is supposed to be centered when it builds and so what I'd like to do is actually take that outside of this widget and have the position already
Determined when this widget is called for and so I'm going to do that by...
26:56
determined when this widget is called for and so I'm going to do that by creating a final position and I'm going to call that the initial position and that's gonna need the Constructors so we'll come down here with your map and we'll pass it this initial position and then for my initial camera position I can now give it something I can say the camera position object is going to take a target and that target is going to be of type lat longitude and so the latitude is going to be widget dot so that takes me up out of my state object into the parent object initial position dot latitude and then it's gonna what a longitude of course so we're gonna give it widget dot initial position dot latitude and format
That clean it up a little bit and then also outside of a target I can give it a...
28:09
that clean it up a little bit and then also outside of a target I can give it a zoom position and I'm gonna give it eighteen so I want to be really tight that's that's gonna be really close on aisle s iam if you boot this up and you find that it's just too zoomed in for iOS you can back that off a little bit or if you have more landmarks where you are on Android you can back that up as well okay so that should be pretty much ready to go if we can pass it at position at the time that this widget is built so we want to be able to do that right here and to do that we need to call our service and so I'm gonna use provider to call that future resolve that future and then pass it into the map so we come out here to main dart I'm gonna get rid of this green here and I'm gonna bring in my service so we'll bring in geo service equal to Geo locator
Service instance like that then I'm gonna map or wrap the material...
29:12
service instance like that then I'm gonna map or wrap the material app in a future provider so let's wrap it with a widget and we'll call that widget a future provider and then we'll give the future provider a create method which will be a context goes to geo service dot get initial location so this is our future and that's why we're using a future provider here I need to import provider that and then in front of our home or in front of our map for home I can now use a consumer widget to bring in that position from the future and I can tell it that that is going to give it a position and I'll need to bring in
Geo locator and for a builder I'm going to have the context dynamic value which...
30:16
Geo locator and for a builder I'm going to have the context dynamic value which they'll call position and then a widget and then I need to open up some curly braces here and I want to take my map put it inside here and now I can take this position and pass it into the map because this is now expecting a position in its constructor and I can provide that here and that needs to be a return statement get rid of that blue and now while that future resolves we want to make sure that if this position is not yet resolved if it's returning null that we don't yet call that map so we are going to put a position a equation in front of here and say if the position does not equal null then give it the map
Otherwise we're going to do a center widget with a child...
31:26
otherwise we're going to do a center widget with a child and that will have a circular progress indicator inside of it all right the code format that I'll put up on the screen for a second take a look at it alright I'm ready to fire that up in the emulator all right well that is not right so let me take a look at what I did nope there we go I got longitude twice so let me change that to latitude and let me try that again all right that's better that's it's a San Francisco area where this emulator is tuned to be all right so this is what I mean this is not where I am but this is where my emulator thinks I am so that's the general area but it doesn't showing specifically where it thinks I am so we can do that real easy with a
New property called my location enabled and we can set that to true let's see oh...
32:42
new property called my location enabled and we can set that to true let's see oh I botched that too that should be my location enable not my location button enabled okay so there we go and the blue dot shows up right away there all right so this is meaningless to me so I'm gonna put this on my phone and go outside and go for a walk and film that all right so there's me again there's a little wind out here so you might be picking that up I'm moving towards the lower right portion of the screen as I'm walking and you'll notice that I am actually leaving the screen the screen is not adjusting with me this is the out-of-the-box functionality you get with Google Maps widget it will put you on there and it can track you as you move but if you want the screen to move with you and you want to stay in the center of the screen and have the map adjust to you you have to do a little bit of work and that's what we're gonna do next we have the stream already from our Geo locator we've tested that we're just gonna go hook it up so that the map
Follows us as we move around all right so back in our code let's go ahead and...
33:44
follows us as we move around all right so back in our code let's go ahead and create a controllers that we can modify the Google map after we have built it so right here we will create a completer and that will be of type google map controller and we will call that underscore controller and that will be a completer which we will need two important okay so when the map builds we can come down here and create a function on map created there we go and we can pass it that controller we can tell it it's a Google map controller which we'll call
Controller and open up some curly braces and in here we will say controller dot...
34:50
controller and open up some curly braces and in here we will say controller dot complete and that is our controller like that alright so that is set up our controller and let's use it so let's create a function down here down below build that will recenter our screen so we'll create a future it'll be a void and we'll call it center screen and we'll pass it a position so whenever we get a new position from our stream we'll pass it into this function it will recenter the camera and keep us at the middle so in here we want to do a final google map controller which we will call
Controller and we will set that equal to a weight controller dot future...
35:52
controller and we will set that equal to a weight controller dot future underscore controller dot future and then we will do controller dot animate camera and we will give it a camera update update a new camera position and so that will be a do that lost track where my parentheses where a new camera position all right so this we want to be a camera position object and we will give it give it a space enter so I can give it a target undo that again them I'm sure where I all right so through target there lat
LNG and Rogalla position make sure I do this right this time scream at me if I...
36:54
LNG and Rogalla position make sure I do this right this time scream at me if I don't latitude comma position dot longitude I'm just gonna stretch this across the screen and then we can give it a zoom and we can keep the zoom the same so I have 18 if you have drawn back a little bit you can you can set it to whatever you like I'm going to code format that clean it up a little bit all right so that's a function that will move our camera to the center of the screen or to any position we give it at that at that time and so we just need to set up our stream and let's do that in an emit state function so we'll come up here and we have a state full widget so
When our state is created where you get to call this a knit state function and...
37:56
when our state is created where you get to call this a knit state function and this would be a good time to set up our geo service dot get current location so this is going to be a stream when we can listen to that stream we can call that object a position there we go like that and so every 10 meters or so this is gonna send our position down to us and this is where we want to send the screen on our position all right so let's run that I'm gonna run that on my own device and then I'm gonna walk outside and do the same activity we just did before but with this new functionality in place all right something roughly the same spot I was before only this time rather than the screen are me going down into the right every time I move or every time the stream registers that I've moved 10 meters or so you see the screen actually slides so that I stay in the middle so
Mission accomplished we did it all right so let's go ahead and wrap that one up...
39:03
mission accomplished we did it all right so let's go ahead and wrap that one up there today we took the geolocator streaming function to actively track our location and then we turn around and put that on the Google Maps and showed how we could manipulate the map with that data so if you found it useful please like please subscribe and we will see you in the next video you

Related Topics

Get 300 checks per month absolutely FREE!

No credit card needed. No strings attached. 👍