Flutter Google Map With Live Location Tracking

Подписаться 228 тыс.

Просмотров 258 тыс.

50% 1

🔥Flutter UI Kit: cutt.ly/rFOscFo
In this Flutter Tutorial, You will learn to use Google Maps in #flutter with some customization, like How to set Custom Image Marker and Draw Route Direction Polylines on Google Map.
✅ Starting Code: cutt.ly/BKgylib
✅ Complete code: cutt.ly/XKrC2sp
Learn:
👉 Adding Google Maps to Flutter
👉 Custom Marker on Google Map
👉 Draw Route Direction Polylines
👉 Implement Real-time Location Updates
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
0:12 Project Setup ⚙️
1:31 GoogleMap Widget
1:47 Marker 📍
2:24 Draw route 〰
3:37 Current Location 🗺
4:35 iOS Simulator route setup🍎
4:55 Android Emulator route setup
5:37 Map camera update on location change
6:58 Custom Marker on Google Map📍
8:18 Flutter Shop UI Kit 🔥
Thanks for watching!
Make sure to like + Subscribe For More!

Опубликовано:

11 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 207

@kenbinta2246 2 года назад

This dropped in time when I needed it

@sontranthanh5564 2 года назад

omg, I've been doing a project about google Maps and everything relevant for a month, now I saw your video, that's very helpful. Thank you so much because of keeping doing this.

@callmeyourbae2859 2 года назад

It feels like you read my mind, right now, I really need this for my thesis, thankyou

@mukhtaralikhan6478 7 месяцев назад

I was searching for this tutorial for a long time, finally I found it, thank you very much. Make more tutorials on Google map, if possible😍

@dantedt3931 2 года назад

Best Flutter channel.Thanks for this.

@azhagappankathiresan5338 Год назад

The best tutorial for live location tracking

@mohanpremathilake915 2 года назад

I was looking for this for a long time. thank you very much!

@VitorFThome Год назад

Thank you for the tutorial!

@prasertpromvong3031 2 года назад

Thank you for great tutorial.

@metatronicx 2 года назад

You deserve more subs man. Great work thank you

@TheFlutterWay 2 года назад

Thank you too!

@SalarAzad 2 года назад

amazing tutorial! it helped me a lot, thank you

@hassamkayani2521 Год назад

void getPolypoint()async{ PolylinePoints polylinepoint=PolylinePoints(); PolylineResult result=await polylinepoint.getRouteBetweenCoordinates( gooleApiKe, PointLatLng(sourceLocation.latitude,DestionationLocation.longitude ), PointLatLng(DestionationLocation.latitude, DestionationLocation.longitude) ); } gooleApiKe, error in this googleApiKey please solve this

@rise4gamers506 Год назад

The best tutorial . thanku man

@SportsWorld-eh4mg Год назад

Wow so beautifully explained

@mruduladdipalli5417 2 года назад

Awesome explanation

@gonzaloortiz608 Год назад

you're a genius, thank you!

@shalarasgar3276 10 месяцев назад

Thank you very much 👍

@peternkane483 2 года назад

Excellent I appreciate 👍

@Pedro5antos_ 2 года назад

AWESOME, thanks for shairing!

@TheFlutterWay 2 года назад

Thanks for watching!

@kouassiangeyao6057 2 года назад

Thank you very much

@LIGHT-en5yr 2 года назад

you are the best flutter dev thank you.

@TheFlutterWay 2 года назад

Thank you, means a lot!

@davidtzirima9301 2 года назад

woow thanks man , i like the voice overs ones

@TheFlutterWay 2 года назад

Glad to hear that!

@MultiSciGeek Год назад

I don't know what this is but it seem perfect for what I need!

@user-nw3rh2pn4o 5 месяцев назад

Amazing video for flutter google map

@gehadbadr8 22 дня назад

Thanks pro❤

@kuysberg271 Год назад

Thanks you very much

@atholabahizire Год назад

Great one

@anuragdeshmukh1575 2 года назад

Thanks man..awesome tutorial.

@TheFlutterWay 2 года назад

Glad you liked it!

@williamromerovela 2 года назад

This tutorial is great solution for many of us which we are looking for.

@TheFlutterWay 2 года назад

Glad it was helpful!

@uixxy 2 года назад

Awesome tutorial for beginners 🔥

@TheFlutterWay 2 года назад

Thank you 🙌

@hassamkayani2521 Год назад

@devhanhansaja6305 13 дней назад

@@hassamkayani2521 I also have th esame issue. did you solve this?

@naveedkaimkhami2695 Год назад

Thank youuuuu

@doctorcode2636 Год назад

Nice Tutorial.

@TheFlutterWay Год назад

Many many thanks

@gyanratan8247 Год назад

I'm in tears I found this Needed very much Thank you so much sir Can we show share the live location on another device (like tracking )

@desiaraj3278 2 года назад

Thank you so much

@TheFlutterWay 2 года назад

You're most welcome

@alapanroy1114 Год назад

Do you have any beginners course?? Your way of explaining things good. 😊

@seendeol6787 2 года назад

Hi I like your video but I've a question. Is there any problem with location pack. I couldn't add it to dependencies. Do you have any idea ?

@nhatlevuminh7031 Год назад

Can you do this with flutter_map plugin and with geoapify or openrouteservice api instead of google map?

@Stranger77704 2 года назад

Amazing

@TheFlutterWay 2 года назад

Thanks

@moulikarri430 10 дней назад

Can you please explain, how do you get the smooth movement of the marker while moving from source to destination.

@tarunjain134 9 месяцев назад

If we move from point a to b in reality , will the app show our collect position as we move , please tell ?

@Bootngoals 2 года назад

Just what I need. Thank you.

@TheFlutterWay 2 года назад

Glad it helped!

@theGRFN_13 Год назад

Is it possible to use this map and set a waypoint to a bluetooth powered device ie an airtag?

@shohruhmasharipov8524 5 месяцев назад

Which apis should I enable for api key in Restrict key? Please answer my question! is not drawing a line in my project

@melih-guler Год назад

How can I put more than two dots, respectively showing directions between them?

@SubodhKumar-mh7ni 5 месяцев назад

Can we use same for flutter web. And wanted to use route with more than 2 lat long

@shrivastavvikas4490 2 года назад

How can i enable the location and speed setting page in physical device? You are doing on simulator .i have to do in physical device. waiting for your reply?

@fuhovu2225 2 года назад

tks sir

@TheFlutterWay 2 года назад

Welcome

@rezashah22 2 года назад

Thanks for putting together this nice and awesome flutter tutorial

@TheFlutterWay 2 года назад

You're very welcome Reza ❤️

@adjeirichard9239 Год назад

i really love your video,very entertaining. But how can i get the location into textformfield ?

@rvN7HD 7 месяцев назад

please give me name of the song at the end of the video

@rawanadel5428 Год назад

Hello and thank you for the amazing informative video. I was wondering if this could be used for indoor navigation in a large institute (my university) if it is already on google maps but there are direct routes between the buildings

@salehjamali6716 11 месяцев назад

were u able to make the indoor navigation app cuz i also need help with it

@user-ux3ks1bi7x 8 месяцев назад

@@salehjamali6716 GPS satellites don't work properly inside buildings.

@userprod2825 4 месяца назад

the polyline direction is using Google Maps Directions API right ? is it paid ? what is the pricing mechanism on it. i don't have clear information on their web. many thank you 🙏

@aminsirwan1329 8 месяцев назад

bro to use google maps need login in google could to enable this API ? or don't needs that just like you i can use google maps ?

@deenaadil6153 Год назад

How Can I use text instead of image inside the marker icons?

@gatesbill447 2 года назад

how can i show traffic for polyline bro. thanks

@shortx007 2 года назад

can u create freelance on demand projects?

@parlayanyldzlar8128 Год назад

In this video, I can't understand which api we will be charged for. I watch a lot of videos. For example, in this video, we will be charged through the static view api and the places api, after all, there are both. Can you help?

@taufiqhasib9720 Год назад

Sir, for this type of of google map is taken any charge or cost by google ?

@Jiayoujiayoulalalla 4 месяца назад

can you make a geofencing tutorial as well?

@dedehidayat6304 2 года назад

Cool demo with a simplest code

@TheFlutterWay 2 года назад

Glad you like it!

@sudhirmanandhar4818 2 года назад

Hello sir i would be kind of you to do a video on dio caching and offline network handling

@albertowong5069 2 года назад

LocationData is a class ? where find it?

@vianeyvargas7736 Год назад

Brigth video Thanks. Please upload using flutter bloc Google maps, tracking, Location

@TheFlutterWay Год назад

Noted!

@BboyAlekSenenoi 2 года назад

Became a patron but having a hard time understanding source code with code of this video. For example, there is a "map_sample.dart" but not an "order_traking_page.dart". It appears they are the same. But how is the code edited in "map_sample.dart" in relation to following along with this video?

@TheFlutterWay 2 года назад

If you want to follow along with this video check this one, www.patreon.com/posts/live-order-on-67926457

@user-dm9mp2vj8l 6 месяцев назад

its good if u can show how we can add packages too

@learnandroidwithalamgir 2 года назад

এই চ্যানেলটা যে বাংলাদেশের সেটা অনেকেই জানেন না। 💚💚💚

@user-ih4rk8yt2h Год назад

Where can i get the custom markers

@arfa4749 7 месяцев назад

i want to show multiple markers as it is a tracking app Is it possible in this kindly reply its urgent

@ayoubamg1 5 месяцев назад

hello, Im setting all the dependecies for google map but it's not working, while executing the screen stays white the map not displaying

@taimoorrajput2597 2 года назад

Love you for this but can you make a complete food delivery app including live tracking.

@TheFlutterWay 2 года назад

Noted!

@AlexanderSuraphel Год назад

Flutter UI Kit looks great! It's a steal to get all those pages for just $99. Do you provide updates after purchase for a limited time like how Web Dev template creators do?

@TheFlutterWay Год назад

Yep, soon I will release a new update.

@information_everytime Год назад

hi you have code?

@AlexanderSuraphel Год назад

@@information_everytime You can buy it.

@information_everytime Год назад

@@AlexanderSuraphel no

@farazmughal8505 Год назад

I have stuck in one issue that my marker is not moving however my LatLng is updating continuously

@tobbymarchal3140 Месяц назад

How the google map api pricing works?

@ibrahimanimasahun9431 2 года назад

Just in time

@carlosjohnson4421 8 месяцев назад

okay i guess im doing something wrong here, for the current location im getting the default google location how can i change it

@tammodirksen1408 Год назад

But once you call setstate won’t this mean extra costs going to Google for reloading the entire app? If you update the location you certainly want to avoid map reloads, right? Or am I wrong?

@bilalhassan9425 7 месяцев назад

same question

@MateusFernandes-fy6ke 3 месяца назад

works on web?

@aimanilyasa4365 Год назад

is the google map API need to pay to be use?

@seetheworld3839 Год назад

What if the app is closed will it still detect location ? Please reply!

@eokdev Год назад

Constantly getting a null check error for LocationData? currentLocation

@keithbacalso9433 Год назад

I followed everything, but my currentlocation is not moving, but when I print the LAT and LON they change a little bit. The marker of my current location just moves a little bit the ngoes back to normal position. :( :( I am using Windows Android Emulator. Do I have to move in my current location in order to see my current location marker move? I guessthat is the problem of Windows or Android Emulator? Because Macs has `Freeway Drive`?

@heshamelsaady3176 Год назад

Why polyline doesn't appear in my emulator?

@faheemahmad3957 8 дней назад

when i add the api key,... the maps is not shown...it shows gooe slogo and zoom butotns only

@noumanqureshi3503 Год назад

Hi how can I set my source location as the current location of device and destination as the location from firestore?

@ridasyed5087 11 месяцев назад

I also want to do this..... Help me plz

@ridasyed5087 11 месяцев назад

Did you do that ?

@felixarchibong7337 Год назад

thanks for the video but the link to the complete source code is not working. can you share a new link thanks

@dakaradakaradakara699 Месяц назад

How to use this on flutter flow

@fayisRahman 11 месяцев назад

is there a way to remove the polylines as you move forward..(i tried the directionApi request in a loop using a timer)... i wamr to know if there is any other way

@LetsSink 4 месяца назад

I think it should be possible if you generate polylines again after updating the current location variable

@jojoji54 Год назад

I have a little problem with this code. Using this kind of location, I can't use Zoom option. I mean, when I'm trying to zoom out, the camera positions always return to the same state/position,, any idea ?

@dawnriddler 9 месяцев назад

Is this at the end, after adding the icons? Cause I have the same problem. I click the + but it keeps zooming out.

@jojoji54 9 месяцев назад

I solved my problem, this caused because the camera zoom is always reloading from the widget@@dawnriddler

@carminefederico2091 2 года назад

great tutorial! i have only one question. In the video at min 4:07 u restart the app for update current location from null to current lat lng. Know you a method without restart the app or maybe update automatically the current location without restart the app?

@gtkmike5141 Год назад

Same issue here. infact the app is crashing When I try to hot reload. the currentLocation variable is always null and keep on “Loading” any resolution for this issue?

@syedhussain5488 Год назад

@@gtkmike5141 I am facing the same issue after completing the code snippet from the video. Did you resolve?

@rejo8224 Год назад

did you resolve?

@rejo8224 Год назад

@@syedhussain5488 did you resolve?

@rejo8224 Год назад

@@gtkmike5141 did you resolve?

@chinhonglao6210 4 месяца назад

Excuse me, does google charge us from using this api ? or is it some kind of our creativity, which mean we only use google map to display map?

@chamithudinsara9557 Год назад

hi this was amazing❤ how we can add white plane customized map instead of using google map,could u please do the tutorial for it.

@qudusolanrewaju2500 Год назад

Hi how were you able to clone the starting project

@MarkTaylor-wk6zj Год назад

Does anyone know how to widget test a google maps app?

@havk.b2446 Год назад

I have problems when launching the app, it stucked in loading screen!!! please help

@nasirkhalil5112 Год назад

does that need billing or need to pay for showing polylines? because every time i try it returns empty array/list of polyline results

@sevikharvarid9893 Год назад

Hi, have you find the solution ?

@nasirkhalil5112 Год назад

@@sevikharvarid9893 yup you need to set your billing method on Google console. Polyline api is paid.

@waleedasghar1834 9 дней назад

the distination location can't added, can anyone please help me

@lahirutharaka3810 Год назад

it gives an error CastError (Null check operator used on a null value)

@oussamaalouache272 Год назад

same did you solved it?

@ahmedfouda45 2 года назад

hello friend great video but there is an issue at polyline not drawing route on the map, please tell me how could i solve this issue?

@BboyAlekSenenoi 2 года назад

having same issue :/

@salmanhawat4402 2 года назад

having same issue

@lampdeep6803 Год назад

map not showing why

@jackle7425 2 года назад

I found an issue from your video, you are using setState method all the time when the current marker is moving. If it is true, you have to set delayed time to call setState. Thanks for reading my ideas.

@TheFlutterWay 2 года назад

Thank you so much, great idea!

@abhishekjain5986 Год назад

can you please elaborate how you are saying to use delay ?

@jackle7425 Год назад

@@abhishekjain5986 The author is using setState method all the times, if you do not delay your app will be lagged and could crash any time

@abhishekjain5986 Год назад

@@jackle7425 thanks for replying. Do you have a workaround for that?

@AlexanderSuraphel Год назад

@@abhishekjain5986 you can change the interval as such await location.changeSettings(accuracy: LocationAccuracy.high, interval: 1, distanceFilter: 0.1);