Flutter Google Maps and Live Location Tracking | Flutter Maps Tutorial
Вставка
- Опубліковано 15 вер 2024
- #flutter #googlemaps #location
In this Flutter Tutorial, You will learn to use Google Maps in Flutter and use the Flutter Location package to retrive live location from the device and present it on Google Maps using Icon and an Accuracy Circle.
We will be live tracking the user location and present it on device. Here are the references to the Packages and Website used for GPX File creation:
Packages:
Google Maps Flutter Package: pub.dev/packag...
Flutter Location Package:
pub.dev/packag...
GPX File Creator:
mapstogpx.com/
Generating API Key for Google Maps:
• How to generate and re...
Project Link (Google Drive):
drive.google.c...
🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
👉 Flutter Shape Maker: fluttershapema...
🔥 Learn About the Most Important Widgets in Flutter 👇:
👉 Widget Essentials Series: bit.ly/3GpfiYw
👉🏻 Product Hunt: www.producthun...
(Your UPVOTE Means a lot! 🙌)
If you find this video useful consider Supporting @RetroPortal Studio :
👉 Buy Me a Coffee: www.buymeacoff...
👉 Patreon: / retroportalstudio
Social Links @RetroPortal Studio :
👉 Twitter: / theretroportal
👉 Medium: / retroportalstudio
👉 Instagram: / retroportalstudio
👉 Patreon: / retroportalstudio
👉 GitHub: github.com/ret...
If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
Thank you for Watching! Happy Coding :)
If you find this video useful, consider Following me on:
Twitter: twitter.com/theretroportal
Instagram: instagram.com/retroportalstudio
LinkedIn: www.linkedin.com/in/parasjainrps
Happy Coding! ✌️😁
most clearest explanation and clearest sample given i've ever seen
bro you are not a human omg this video thank you man
I like the idea of having the code written before starting the video. Thank you so much
Amazing content... helps me for my project! I'll come back after I get it working. THANK YOU!
You explained this in a way even a baby could understand. Great content ! Thank you very much 👍🏼
Great tutorial man. You one efficient communicator lol
Thanks Brother! Appreciate your support ✌😁
@@RetroPortalStudio hai brother how abou we use real device is it still possible?
Thank you very much! The reason I love flutter that it does Stackoverflof Driven Development much more easier!
Hello Sir , Great work ! I wanted to know how to send those coordinates to Firebase and update the location on the second device
Perfect explanation, it was really amazing!
This is the content we're looking for. Thanks!
This video has been endlessly helpful for my current project, thank you so much! Would you be able to make a video in the future about how we could apply various state management architectures, such as Provider and BLoC, to the concepts used here?
Thank you for your support brother! Will try coming up with a video for that too 😁
Incredible, thank you again dude 🙏🏻
Wow just Amazing. I have subscribed your channel
Really great tutorial, Thanks! Could you do a follow-up tutorial where you perhaps leave a polyline behind to see where you were?
Nice explanation... great work buddy
Keep going 🔥
Did it work for you? It doesn't show anything for me.
thank u very much for this great tutorial, it helps me in my project
Does the location package work whilst the app is suspended or the screen is off? For example, i use this app (to store my gps location every 30 seconds) whilst out on a bike ride and then switch to Spotify to listen to some music, then lock the screen. Will the app still accurately track my location until i open the app and stop tracking?
Thank you very much Retro, Great Tutorial !
Thank you very much for this. Loved it.
hey, This works fine in my emulator but doesn't work on my physical device, please make a video for that
can we follow similar procedure to show multiple cars around user's location ? ( like the way OLA or UBER shows nearby cabs location around user )
Perfect video for my use! Thanks
Amazing Amazing Amazing tutorial my guy💯
How did you learn this all. Great tutorial
Appreciate your support ✌😁
@@RetroPortalStudio how did you learn?
@@RetroPortalStudio yes seriously hoow did you learn lol, btw thanks for the video
Does flutter + google maps support directions / route planning in addition to current location?
Almost fantastic! I like that you have thought out your lesson. So many seem to make lesson on the fly, and cause me to wait as they type. I like that your sound quality is good and clear. One thing I am missing though, do you have a source code listing somewhere so I don't have to transcribe from the screen?
Nice, very informative. Thank you
Really great tutorial, Thanks! Could you show how to check if the car near to me than (for example) less than 5 metr and send notification about it.
Again an amazing video there's one request from my side can you please make one application which consist like not all but summary of your all videos like the application you build on Restaurant also includes the Google Map and the sidebar and navigation bar ......Please!!!
Sir this tutorial is awesome thanks a lot 🙏 sir i have same issue in transport live location with firebase like beliveryboy location 🙏 sir please make video on live location shearing with firebase 🙏
have you created?
If i wanted to build a Waze-like app, would you recommend going with Flutter or Kivy? (I am a Python amateur and Flutter newbie, but suspect that Flutter is more compatible with GoogleMaps directions API´s). Thanks!
amazing tutorial keep upload and update, great tutorial
Thank you so much, sir.... I learnt a lot...:-)
Excellent video Paras, I have a question, can I load GPX file directly in the code and set to GoogleMap class? thanks
Wow! thank you very much
how can we create own gpx file using this app or suppose we have data(longitude and latitude with time) and send the data to others
Nice very helpful 👍👍👍👍
Any idea how to "anchor" the camera to the marker, so that when I call very frequent updates on it (about 50 times a second), the animation is still fast and smooth? Calling .animateCamera so frequently makes it follow the marker very slowly (as it keeps resetting the acceleration of the animation) and .moveCamera lacks any animation, which is what I don't want. I want a "chase" kind of camera.
Thanks for awesome tutorial. Is there a way I can draw markers and polygons based in these points by tapping on the map as it is available in MapBox in native iOS and Android?
Please address my query 11:40 i have small doubt ie how does the marker know that in car image headlights represent front part and why not the backlights. by default in ur actual image headlights are pointing to upwards then how come the turned downside in map.
very beautiful video thx :)
Awesome job man
Hey man, Brilliant content again. Just wanted to ask if this setup cost anything ?
GREAT WORK!
Hi thank you so much for the tutorial, I got it working but the car icon isn't shown as png, do you know what might be a problem? (Like in the app it shown as a spare with a car inside)
if more than one device is running this app, does it show more than on car in the google map?
the google maps flutter package is still a dev. preview.. can i still safely use it for publishing?
What Google maps package would you suggest for applications that are highly dependent upon maps?
big thanks dude
Error: The argument type 'double?' can't be assigned to the parameter type 'double' because 'double?' is nullable and 'double' isn't.
target: LatLng(newLocalData.latitude, newLocalData.longitude),
How to solve this?
Not sure if you figured this out yet, but if you add a '!' after each it works, i.e. target: LatLng(newLocalData.latitude!, newLocalData.longitude!),
Can you help with running this code using on a Macbook pro M1 with the only Android emulator that is currently available? I get this error message "flutter_maps won't run without Google Play Services, which are not supported by your device." Do you know of any workarounds for this? I also tried to run the program using a iPhone 11 and it did not produce an error message, but it won't launch. The iphone build of the app finishes without any error, but when it launches, it closes right back up. It does not even show a screen. This is still a very useful tutorial and I enjoyed it. Thank you.
really cool guide!
Hey...i did same according to your video but my build is failed due to kotlin gradle plugin what should i do
Thanks for the video! Would it be possible to set the initial camera position to the current location?
thank you... this is a great start for me...i wanna ask is it free to use google map in this kind of project?? i just wanna test the application..
Esto mismo se puede hacer en un página Flutter Web ? tracking real time
Is it geofencing possible for entry and exit?
Please Help What to do if i know that the user is inside a particular location like inside a geofence please help its urgent
Please Help MEEE can please tell how to make smooth animation from one point to another point if u have seen it is jumping, do u know how to make smooth movement of car???????
[ERROR:flutter/lib/ui/ui_dart_state.cc(166)] Unhandled Exception: Unable to load asset: assets/car_icon.png I got error still image in asset folder
how do I stop the rubber-banding after i've clicked the location button (like i try look at more of the map but it just returns me to my current location)?
Please check if getCurrentLocation is not being called again and again. I suggest you go through the code once more. One more reason could be the device sending location updates as you move. you need to make that conditional. Remove the listener on click of a button or something
hi, did you solve it?
@@RafaelSilva-xn9nx nah
Thanks but I want show also car speed can I do that ?
In my app when I press the button for current location, it is doing nothing neither permission for location nor showing car icon. Please help.
i face issue with google flutter map:
PlatformException(error, java.lang.IllegalStateException: Trying to create an already created platform view, view id: 0
This happens when you rerun the app without closing the previous instance of app! Close the app from "Stop" icon and run the app again ! ✌😁
This is awesome! Maybe I missed it But! Can you say like a keyword and when you press the "MAP" inside the app it will find let's say "Pizza places" (keyword) around your area and it will pop up everyone? I'm looking to implement this function in the near future! : )
Can this be used on a phone for showing live position on a public map on a website?
It shows error "A problem occurred configuring project ':google_maps_flutter'."
Thanks for this awesome tutorial. Car marker is updated everytime location is changed. Can you please tell how to animate marker between coordinates? Like in ola or rapido app.
From where I can get Google services that you specify in gradle file. I need help
Thank you, great video. I have a question: is it possible in flutter to let the user add markers on the map and then save it to firestore to make them visible to all the other user?
I am making an app where the collaboration of the users in adding marker is crucial. Thank you in advance for your reply.
It is definitely possible you can save user's position (lat lng) and then use those to show markers accordingly. I guess its quite straight forward. Only thing you will have to worry about is how frequent you would like to update that location. ✌😁
@@RetroPortalStudio ok thank you for your very fast reply but what I'm trying to do is like the app that reports all drinking fountains in the world, with a section where users can add drinking fountains on the map to make other users see them, and I don't know how to create that section. Do you know how to do it?
Thank you so much for this tutorial, how can link GPS of a certain vehicle with this app?
Excellent tutorial! But how do I put my current location in the initialCameraPosition?
For emulator you can use control panel and load gpx file. But an actual device which steps to load gpx file????
Would it be efficient to wrap the GoogleMap in a stream builder ?
It won't be 👨💻
thank u but if I want to track more than 1k device what backend i need
Hello my name is Azizbek I am from Uzbekistan I am a flutter developer I was doing a taxi app It is similar to Uber but I have problems Can you help me? i can draw a path by marking two places and drive a car but i can't reduce the drawn road, the next problem is that if the car moves, it is not possible to make it look like it is walking on the drawn road if it walks next to the drawn road.
Thanks in advance for the answers.
Is it possible to track multiple vehicles on the same map ??
these plugin work on background MODE ?
how can i make this work with my json API data??
hi, the control pannel, this emuator Pixel_2_api is inside the source code?
Its not attached in the source code brother! Although you can do the sMe with any Android Emulator on your machine ✌😁
Hi @@RetroPortalStudio would be possibile for you to please share the emulator source code too?
Nice work broo
Is it free to use api of google? Or do we have to buy it?
Hi Sir, it is an awesome video, but my question is when I edit manifest file it showed red marks on some points as unresolved,but when you build finally it was gone.Any tips how you do it?
hey this is soooo littt! im curious can we make an http request every time the newlocation is updated inside the listen method?
Yes you can, thats what I do. Call my service to save some info in my DB.
hi how to add loaction of multiple devices please help ?
Pass multiple markers with different location to the Markers array of GoogleMaps widget. Those marker locations can come from firebase or any other database that you are using, which will be in sync with other devices!
Thank you brother much appreciated
I've tried to achieve it but with my limited knowledge with flutter I am unable to manage it please make a firebase connection with and ability to add multiple real time markers I'll pay for this solution via PayPal please : swapz95@gmail.com
Contact me on email
Appreciated
nice, ty for that ... and GPS works on background when mobile display sleep?
You can give it a shot by using Background Processes! But at this point, i would suggest writing native code for this kinda functionality ✌😁
@@RetroPortalStudio How to do this?
How can I get the users initial location instead of providing one?
Please how did you solve the errors on those folders(build, idea, dart_tools).
Those errors need not be solved brother! Actually they are not actual errors, IDE could not find the files while working on a flutter project. If we individually open the android project then they go away ✌😁
@@RetroPortalStudio oh thank you
great tutorial!!!
It works...but no background visible.only FAB is displayed.
how I fix this..plz reply.
good tutorial
please how to run the tracker on background ?
Great and helpful tutorial. thank you very much. but if i want to track location of other user using the Device id. do you have an idea?
I am making an application that the customer can track the delivery person..if you could please help me. thank you again
same ....plz reply
Horiya Humaid lmk if u find out how
will flutter have its own background process library or we have to depend on native code
i'm sure the team knows the limitations and will develop a better way soon ✌😁 i'm quite optimistic about this! Although even if there will be a way! i'll always try and use native code here and there for more control
@@RetroPortalStudio ty for reply....i started my app development journey directly with flutter and have no experince of native code ...now should i start learning native code for such cases ?
How can one possible link iot(GPS module) devices to flutter...
you can use firebase to connect both iot device and app
Could this work with an Arduino with GPS module?
awesome
Is there a way I could update the location only every 20 second?
Google MAP API which you have mentioned is the paid one right? if not can you please tell from where we can get it
You can learn to do that here ✌😁developers.google.com/maps/documentation/javascript/get-api-key
@@RetroPortalStudio thanks buddy, that is the paid one.. your videos are awesome though
hey, bro I don't know why map is not view on my phone. Can you help me please?
I am making an app where when a user log in an ads like olx app, when user post ads it data store in firebase and show in app , but problem is that I am not understand how to store data user in firebase and show in app
Can you make a video of olx clone app in flutter.
I request you.
if anybody is having Parameter must be an array error. Then select two points on google maps, rather than using current location .