I took a drive and recorded my screen. The pin represents my car driving in real-time. I used clideo.com to speed up the video as it was kinda slow.
I have a client who might be interested in me making them a restaurant ordering app in which their customers would order their food, pay, and then be able to track the food delivery to their house. I wanted to try out creating the delivery tracking part to make sure that I can accomplish this in Flutter.
Turns out I can! I am going to summarise how I did it below.
I found a code lab for adding Google Maps to a Flutter app. So I got the map to appear in my app beautifully. I can even drag the map and zoom in.
For the initial location for the map to open up to I looked up the coordinates of my house and entered them into a variable called home that contained the method latLng. This method comes from the Google Maps package, which I got on pub.dev.
You need to create a controller to be able to interact the Google Maps widget. To set the controller I put GoogleMapController gMapController; Then I created a function called onMapCreate ( ) that set gMapController equal to controller.
To get a pin marker to show up in the app I had to create a variable with the type Set<Marker> and then set it equal to Marker(markerId:MarkerId(“idName”), position: home);. I put this variable in the markers property in Google Maps widget and then restarted the app. Now a pin appears at the location of the latitude and longitude I passed to the home variable.
I found a video that helped me learn how to implement the location package and how to get it to work with the Google Maps widget. I’ve gotten it to update the map (move the camera and set a new pin) when new coordinates are passed to it.
I added a FloatingActionButton to start the location tracking. When that is pressed it calls the changedLocation( ) function which gets the current location, updates the pin location, then starts the location tracking which is a stream that gets the latitude and longitude of my current location every second then passes it to the camera position and updates the pin. Here is the final code below.
I planned to test out the live tracking part the next day as by the time I was done writing this code it was time for bed. My hope was that as I drive around the pin would follow me.
I got a little impatient and didn't want to wait until the next day to see if it works. So I compromised with myself and pressed the FAB to test it out while I am was sitting there just in case there are some initial bugs. To my surprise, it worked. I was sitting in my living room and the marker started moving. Which is weird. But at least I can see that the marker and camera moves.
I think that this shows the uncertainty of finding my exact location. The marker would slowly move like a half block away and then come back. The other thing that scares me is how do I stop it? Maybe I call the dispose function when I press the FAB again. I'm not sure if that will stop it though. I will have to try that later on. I think that for now, I will just kill the app. But I am so happy that it works.
The next day I took it for a test drive. I drove from my house to a restaurant and it worked beautifully! It tracked me all the way there and back. The only issue is that the accuracy of the pin was off at some points. It would have me like a half a block away from where I actually was or it would move the pin while I wasn’t actually moving in real life. There is a bit of a lag between me moving and the pin updating. I’m thinking that since it is getting my location every second that could be what is causing it to be off. So if I only make it get the location every 30 seconds or so maybe there would be less for it to deal with and hopefully it will be more accurate. I also wonder about just changing the location accuracy to a higher version I need to see what the starting accuracy is.
My next step is to get the coordinates passed to Firebase Cloud Firestore so that I can allow a second screen to passively view the map and watch the pin move.
Comments
Post a Comment