Navigation with MapBox in Flutter Apps

Подписаться 899

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

50% 1

In this video let's have a look at how to implement Maps into your Flutter applications using the Mapbox Maps and Navigation SDK.
Not only that, we will also build a complete flutter project together to implement this, where we will put you in the Apple Park and then find route the restaurant nearest to you 👩🏻‍💻
Chapters -
00:00 Introduction
00:28 What is Mapbox?
03:10 Run the starter project
10:48 Starter project and final goal
14:36 Fetching and saving user location
21:18 Show user location on Map
27:56 Mapbox directions API
36:00 Add carousel and routes
53:30 Final result
54:40 Conclusion
📚 Resources for this video -
1. Github repository - github.com/Imperial-lord/mapb...
2. Medium article (me) - / navigation-with-mapbox...
3. Mapbox documentation - docs.mapbox.com/
4. Mapbox directions API playground - docs.mapbox.com/playground/di...
► Subscribe and hit the bell to see new videos
► Connect with me on LinkedIn - / ab-satyaprakash

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

11 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Checkout the turn by turn navigation video here - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-J1yLPFbjOkE.html. Hope you guys love it ❤️

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

Nice intro bro.. It's really impressive as well as informative🔥

@apekshajadhav7978 Год назад

Very Very helpful...I needed this a lot, as a beginner I was so overwhelmed to work with maps, you covered everything I needed to learn. Thankyou. Please make more such videos

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

Omg this is so good. Would love a turn by turn navigation video. Thanks!!

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

Thank you! Let's work on that in the next video 👍🏻

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

Thank you so much!!! That was so helpful. Can we get that turn by turn navigation video asap pleaseeee!!👏👏

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

Sure.. next video coming soon! Glad that you found it helpful 😄

@AM-dt3zv 2 года назад

Really helpful video, thanks so much! Like everyone else, I too would love a turn-by-turn navigation video!

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

Thank you so much for the support. We'll have the next video soon!

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

This is a great tutorial! Would really appreciate a turn-by-turn navigation video please!! :D

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

Hey thanks! Sure, we will do a turn by turn navigation video next now 😄

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

Thank you very much sir. I am a student from Indonesia. This is a very helpful video for me in doing my coursework, thank you very much! This video is true unlike other map navigation videos.

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

THANK YOU SO MUCH!! I have subscribed to your channel as I am looking forward to the turn by turn directions video :))) please release asap thanks

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

Hey thanks for the Subscription! ❤️ We will do the turn by turn navigation video soon!

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

Excellent presentation clear and easy to understand 👌

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

Glad you liked it

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

Thank you very much! awesome video and explanation

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

Glad it was helpful!

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

Amazing content! I am new to flutter, and that turn by turn video you mentioned at the end would be so useful please! Thank you😃

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

Thank you. Welcome to flutter, I hope you enjoy the framework! We will do a turn by turn navigation video next 😄

@bunyaminpilsim2988 Год назад

merhaba navigasyon işlemi yapabildin mi bu paketle

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

Great vid, a turn by turn nav video would be amazing.

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

Will do that next 😄

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

I got so many warnings running this on the android emulator but it works....😝😝😝😝 Thank you so much!!!!!!

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

😂 I had noticed it too, turns out the same does not happen with a real device, so that's just fine I guess.

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

Thank you, so helpful! Please do a turn by turn nav video

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

Sure will do that soon! 😄

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

Thank you guys for the amazing comments. I would absolutely love it if you like and share the video, and also subscribe to my channel. We will keep building more amazing stuff, and explore new things together 😇 Meanwhile if you have any questions feel free to reach out!

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

Any ideas when the next video will be out? Thanks once again

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

@@rahinashraf9272 It'll be out in a couple of days! I'll also soon upload a plan for the days on which I'll release videos and type that they will be. Stay tuned!

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

Hi sir, your video was so helpful! I have an assignment due at the end of this week where I need to use turn by turn navigation with flutter and mapbox. I’ve been struggling to find any resources so thank you so much for considering making a video on it!! Hopefully it will be out before my assignment deadline!

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

Any update on when the turn by turn navigation video will be released? Would be extremely helpful, can’t wait!

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

@@rufia8706 Video will be out very soon. Editing work is going on.

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

guys just change the hardcoded restaurants coordinates(,) in the constants folder, to restaurants coordinates near you to avoid returning Null error because of exceed distance limitation. have a great day :)

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

That's a useful advice. Thanks for adding!

@Maria-yn5nw 2 года назад

Helpful video

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

Thank you

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

Thanks man.

@cedrixjhonbusa2178 Год назад

That was a great tutorial 👌 very clear instructions. Are you a freelancer sir?

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

nice video. could you make a turn-by-turn navigation video?

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

Thank you! Sure will do that next! 😄

@tobelesa Год назад

thanks man

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

thanks brother

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

Welcome

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

Looking forward to the next vid! Any idea when it'll be out?

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

In a few minutes 😂

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

And you can check it now at - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-J1yLPFbjOkE.html

@nurulaqilah1428 Год назад

Hi this is such a great video and tutorial, but can i use this to create a navigation map for wheelchair user?

@nchonganyichristiana9407 Год назад

Nice one, I'll definately subscript to your channel sir

@jaiminmodi5573 Год назад

Hello Sir, Very Important... Can these all features work OFFLINE in Android as well in IOS ? Please reply. Means for any fixed map can mapbox provide offline navigation?

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

Great video! But could you please tell me where can I find the .env file in your GitHub?

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

The .env file should not be pushed to public source control so I have not shared it. You add that inside the assets/config/ folder and then add your keys in there.

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

Thank you! Great video I must say, but could you please explain for me that how the final _fills would work?

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

It basically represents a set of coordinates that defines the path between your current location and the destination. When provided to Mapbox controller, you can create a route using those coordinates.

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

hey when will the turn by turn vid be out?

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

Video will be out very soon. Editing work is going on.

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

What font and theme are you using in your Android Studio?

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

Hey, satyaprakash! I'm facing a bug in the map the line layers are not updating as the user location move on the camera. can you please help me with this?

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

Hey there! You need to make sure that you rebuild the widget tree every few seconds to show the lines again. Another way is to use the turn by turn navigation. Check out my other video here where I show exactly that - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-J1yLPFbjOkE.html

@SugerNoor1996 Год назад

Hello everyone, my app crashes when I navigate out of map, when I set my location enabled parameter in mapbox to false , the problem is fixed. how can I fix this?

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

great tutorial! can you please tell me how can I change the default Map UI in our projects?

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

You do have some customisations possible in terms of what you can show in the map. But I think the best way to customise the UI is with Mapbox Studio. Let me know if you want a video on that, we can do it sometime too.

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

@@ABSatyaprakash Yeah, sure I would be happy to see your new content on Mapbox. keep growing😉❤

@Mary-xi7yv 2 года назад

Thank you so much for the video, but I have a problem that instead of the map, there is a white screen and after like 2 seconds the app closes and the requests for the restaurants' directions get canceled with an error saying:This request was canceled...This is expected for tiles that were being prefetched but are no longer needed for the map to render. PLEASE , CAN YOU HELP ME ?

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

Could you open an issue on a discussion thread in GitHub discussions with your stack trace?

@Mary-xi7yv 2 года назад

@@ABSatyaprakash It was a silly mistake in the code😅 But I was wondering is there a way to make the icons on the map responsive when zooming in and out? Also , can we make the line goes under the icon and not above the icon?

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

@@Mary-xi7yv Alright cool 😇 Yeah sure you can. You can reset the icon sizes whenever you are zooming in. For getting the line under the icon, you can replace the first and last point in the `geometry` Map, with a nearby point to the source and destination.

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

When you move or drive does it update the route in real time sir?

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

That's something you will have to implement - just periodically update the route every 5 seconds or so - using the current location. Look at this repository for example - github.com/Imperial-lord/biking-stations

@joker.amateur Год назад

Bonsoir. Merci pour ta video, stp comment simplement placé un marqueur sur la map

@Mo-gv4hj Год назад

Hi AB thanks for the tutorial - is it possible we can have a chat I have a few questions regarding Mapbox and H3 geospatial indexing

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

How to get the near by places such as cafes, hospitals etc based on my current location? Can we do this in flutter and mapbox?

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

Check once on the Mapbox documentation. If they have an API, then it cab be done of course.

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

Hey ! This is an awesome video ! but can i do the same for building a map that displays parking lots ?

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

Sure, I will publish a blog on this one soon. Here is a teaser for you - github.com/Imperial-lord/biking-stations.git

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

what if i want to favourite one of the cards and add it to firebase?

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

It's very easy. First of all the data for restaurants is given as hard-coded. Once you have a DB with you, you'd prefer to store and fetch the data with your DB. Now make 2 collections - 1 with the name restaurants, the other with the name favorites. Fetch restaurant data and use the app like before. Now you can add a little * on the card, and when you click on it you can save the docID for that restaurant to your favorites collection. Additionally to increase the efficiency use a state management system like Provider.

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

Can you share any library by which we can add map in windows application.... I need something with windows support.

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

I think if you are trying to go with Flutter for windows application you won't find much support from the community yet. I'd recommend you go with electron for now, because then you can directly use mapbox.js libraries.

@charlesifoegbu Год назад

Great work.... My app keeps crashing when I click on restaurant table; this started after show user location on map at 27:34

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

It is showing the error Gradle threw an error while downloading artifacts from the network .. Exception: Gradle task assembleDebug failed with exit code 1

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

Seems like an internet issue, open a thread in GitHub discussions with the complete stack trace please. I will take a look and get back to you!

@evelinmoraga Год назад

I try to deploy the app by following all the steps and using the source code, but it gives me the following error: "Null check operator used on a null value". Could you tell me how to correct it? Thank you

@mjfan3375 Год назад

did u find a solution for it? i get it too...

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

TrackingGps has a problem. It keeps rotating wildely do you know how to disable rotating gesture

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

Not sure if I understand, can you elaborate?

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

Any idea about adding 3D/tilt ?

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

Could you elaborate your use case a little more?

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

@@ABSatyaprakash I'm working on a Flutter app which has indoor map of a large space. Map is 2.5D vector, designed using Mapbox studio. When I'm using the map url in the project, there is no option to change the camera angle like they have for Native. So currently, it's a flat map. Using 2 fingers, user can't change it from 2D to 2.5. Any idea how can I achieve it?

@user-pk4ul4cb6z 4 месяца назад

i am getting this error while running mapbox for ios Launching lib/main.dart on iPhone 15 Pro Max in debug mode... Xcode build done. 13.6s Failed to build iOS app Error (Xcode): Building for 'iOS-simulator', but linking in dylib (/Users/apple/Desktop/Mkgo_ios_Testing_version/MKGO_Testing_Version_ios/ios/Pods/Mapbox-iOS-SDK/dynamic/Mapbox.framework/Mapbox) built for 'iOS' Error (Xcode): Linker command failed with exit code 1 (use -v to see invocation) Uncategorized (Xcode): Command SwiftEmitModule failed with a nonzero exit code Could not build the application for the simulator. Error launching application on iPhone 15 Pro Max. Exited (1). how I can solve this error what this error if for any solution for it because i am not getting any solution for it

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

Hey I got a some problem in Direction Api can you please guide me?

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

Sure. What's the issue?

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

34:33 the API URL code: when I directly paste the URL from the web the code is working fine but I try to run the code by using source.latitude and. source.longitude the API is returning null.

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

@@mashoodhussain7655 What is the result of debugPrint(url) for you? Is it the same as the URL that you have when you directly paste it?

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

Thanks,@@ABSatyaprakash for the debugprint(url) idea finally, I found the bug. The APIs URL is not working fine because I was using the Location coordinate of USA (as you define in your code) when I set the coordinates of the locations near me the API URL started working as expected. Thanks again for that kind of support and the amazing content.

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

@@mashoodhussain7655 I'm always happy to help 😀 Stay tuned for more videos 😄

@ahmedm.6225 3 месяца назад

I am from Syria and I do not have a credit card to sign up for Mapbox. Can anyone help me? I need to use it for my graduation project, not for business purposes. Please help me.

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

Hello, How can I contact you please, I need your help

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

Reach out to me on LinkedIn or Twitter.

@okeyshourovroy2769 Год назад

Mapbox search is not as good as google. It doesn’t show expect locations in search.

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

hey AB Satyaprakash, I pulled your code from git which you have updated 12 days ago, actually I am getting an error while running it, can you please look into this. This is the error "[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: NoSuchMethodError: The method '[]' was called on null." , "E/flutter (25407): Receiver: null E/flutter (25407): Tried calling: []("routes")"

@ishantrivedi5588 Год назад

Not useful, you did all the setup and startup settings before recording the tutorial and started rushing over the things. every concept got over my head. sorry

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

please can I get ur email cox I need ur help with creating a map in my project I find ur video useful and understanding

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

Head over here ( github.com/Imperial-lord/mapbox-flutter/discussions ) to Github discussions and we can discuss there. I prefer this over email because communication is way easier. Happy to help! 😄

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

@@ABSatyaprakash the link is not active error 404

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

@@emmanuelpaakofi592 Try again now. I edited. Seems the ) got included in the link.

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

@@ABSatyaprakash sure thanks