Flutter Google Map With Live Location Tracking

in this flutter tutorial you will learn how to use google maps in flutter with some customization like how to set custom image marker and draw route direction polylines on google map if you want to follow along with me download the starting project you will find the link in the description let me show you what we have in the starting project start with the pub spec.eml as you can see we added four packages larger polyline point allow us to draw line from source to destination google maps plotter this one is a must-have package on flutter if you want to show the map location package for real-time location on android and ios flutter sbg allow us to use sbg images most of those packages need some configuration the good news is you don't need to do anything except google map api key if you don't know how to get the api key check the google maps flutter package once you'll get the api key go to constant. replace api key with your key also go to android main face.xml then replace api key and for ios go to appdelegate.swift same replace api key with your key once done with the api key you will find the stateful order tracking page under the leap directory there is a google map controller with a demo location for source and destination let's run it a simple screen with a center text replace body with google map wizard and set initial camera position to source location it shows the whole war map i think now it's much better let's add a marker so we can understand the exact location define a marker and set the marker id let's call it source set the marker position to the source location perfect now we can identify the exact source location add another marker for the destination copy the source marker change the id call it destination and set the position to the destination let's scroll to the left to find the destination marker reduce the zoom then restart the app now we can quickly locate both markers now what i want to draw a line from source to destination scroll to the top then create a synchronize function called gate pulley points create an instance of polyline points there is a method called gate route between coordinates which return the list of polyline points call the method it required google api key source and destination location create a new variable called polyline coordinates which is an empty list back to our function check if the points are not empty go through each point and add them to polyline coordinates we're almost done now we can show the route on init state called get poly points function back to the google map wizard define the polyline and set the polyline id to route pass polyline coordinates to the point no route is shown back to the polyline point function once we are done with adding points call set state now restart the app i'm not too fond to the black route color let's change it to blue also set the width to 6. now come to the most exciting part we need the device location create an enable variable called current location then a function called gate current location inside create an instance of location once we get the location set the current location to be equal to the location on the enid state call gate current location method if the current location is null it shows a loading text restart the app and add another marker for the current location also change the initial camera position to the current location restart the app again as you can see the middle one is our current location if you are on mac and using ios simulator go to feature hover over location and select freeway drive wait 20 to 30 seconds to restart the app i am using source and destination location according to this freeware drive if you are on windows or using android simulator click on the bottom three doors and ensure you are on location let's say the source location is google plex change the source location to this coordinate if you want you can save it the destination location is the microsoft silicon valley campus change the destination with this coordinate now click on the routes tab search for microsoft silicon valley and google plex for the starting point save the route set the playback speed hit play route the current location is moving that's what we want we are moving but there are no changes on the map back to the get current location method on location change update the current location make it visible to the map called set state in the beginning there was a controller for google maps need this controller to update the map camera position according to the location change inside the gate current location method create a variable called map controller once the location change animate the camera to a new position [Music] i made a mistake define google map controller after getting the current location the loading is gone the source destination and current location icon are the same define three variables for the source destination and current location icon right now all our default markers create another function called set custom marker icon on the access directory you will find the custom icons [Music] so [Music] thank you so much for watching check out our premium fluttershot ui kit [Music] [Music] [Applause] oh [Music] you

Channel: The Flutter Way

Views: 253,065

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: B9hsWOCXb_o

Length: 9min 8sec (548 seconds)

Published: Mon Jun 20 2022