How to Use Mapbox with Flutter - Tutorial for Beginners

Подписаться 1,4 тыс.

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

50% 1

From this short tutorial you can learn how to implement Mapbox into your Flutter application! We will use the flutter_map package to make the usage of your access token easier.
📕 35 App Ideas for Practice FREE ebook: www.mercihohmann.com/app-idea...
☕ To support my work, buy me a coffee: www.buymeacoffee.com/mercihoh...
👩‍💻 Continue coding with these videos:
Weather App - • Flutter Tutorial - Wea...
Instagram UI Clone - • Flutter Tutorial - Ins...
🌟 For More Follow Me on Instagram - / mercihohmann
Timestamps:
0:00 - Intro
0:12 - What is Mapbox?
0:42 - Don't forget to subscribe
1:08 - Create a Flutter app
2:35 - Installing the flutter_map package
3:36 - Connect Mapbox with our app
6:21 - Importing the latlong package
6:55 - Additional clean up
7:59 - Running the app
8:05 - Error #1 - socket exception
8:49 - Error #2 - unsound null safety
9:55 - Error #3 - no internet connection
10:16 - It's working!
10:49 - Get the free ebook
11:00 - Thank you for watching!

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

2 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

This is so much better than official docs of Mapbox, very straight-forward, thank u very much

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

Thank you so much ma'am I have been trying to do this for a long time now, but with this tutorial, it was easy for me

@vladarskopin3314 Год назад

This is SO COOL. I tried it and everything is working! Thank you so much Merci!

@reynaldoguarachitola3736 3 года назад

good work !!! just I needed this

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

Thanks Merci! What a wonderful tutorial

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

Hola Merci Codes, estoy muy agradecido, el tutorial funciona a la perfeccion. Tenia tiempo luchando para implementar mapas y tu tutorial me funciono. Te amo. Saludos desde Venezuela.

@juanmacias5922 Год назад

Great tutorial!

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

Thank you for this. It was really helpful.

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

This was super easy to follow, thank you!!

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

Great Tutorial! Thank you! for flutter map version 0.13 and higher you need to import latlong2 package, its in the same stackoverflow post :)

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

Thank you for this nice tutorial.

@user-fs9tc4st5j 3 года назад

It was great, my love

@necvir Год назад

Hi, im from México, i love the way you explain your work. Congratulations!

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

thanks alot for good content Merci Codes

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

welldone merci you are too much good. today i found a new mentor for flutter application devlelopment. thanks for this video Teacher

@jafar9714 3 года назад

thx so much!!!

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

Thanks !!!

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

Thank you so much,God bless you

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

Thank you cery math. I am started learn fluter. It so cool

@MohamedAli-gz5mc 2 года назад

Thank you very much

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

very good, tks

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

Hi Merci, good video. I actually follow this video since I am studying Flutter with the Mapbox API. I do have some inquiry if you have any examples of FlutterMap with accessing onTap to place markers on the generated map or any follow up video to do this? That would be great :)

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

its workin!, thank u so much from Venezuela.

@11edneud 22 дня назад

en qué ciudad está?

@alikazemi2028 Год назад

thank you so much is very helpful 👌👌❤❤

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

Thank you very much here in Brazil, you helped me a lot!

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

I'm happy to hear that!

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

Thanks for the video! I didn't have problem with "--no-sound--null-safety".

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

Thanks

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

Great video, thank you!!!

@wattahamjed6897 3 года назад

Thank you soooooo mach my love

@0Schranz 2 года назад

great video! thanq!

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

I'm glad you liked it 😊

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

Was this code written during the release of null safety for flutter?

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

thanks

@Andreshaking Год назад

Very Good Merci do you beautifull

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

Thank you for the awesome tutorial. I found that we dont need to specify accessToken and id at all because with the URL it sends all the data thats needed

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

Thank you for this intuitive video. So how can I do if i would change the CameraPosition?

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

thanks for all ı used thıs on my senıor project love you

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

You're welcome! I'm glad I could help 😊

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

can this be used for indoor maps as well?

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

M'am can i use mapbox to calculate area of polygon drawn on it, i'm waiting impatiently for your reply, advance thanks,

@tinotendachimbwanda4681 3 года назад

Nice Tutorial Merci. Can you cover also the flutter_mapbox_navigation package

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

Hi Merci, Thanks for this tutorial. I have a question. Can you make a video by using location and mapbox.

@thomasbortolato1800 Год назад

Hello can i helps me with this error Error: No named parameter with the name 'layers'.

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

How can i make this maps work offline ? just a surface of 6Km vs 6Km

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

is it support for both android and ios?

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

Website is not available

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

Nice tutorial. Is it also possible to highlight maybe an certain area (or darken the area which is not selected)?

@SugerNoor1996 Год назад

Hello, Mapbox crashes my app when I navigate out of my app, when my locatian enabled is set to true, anyone has a fix to this.

@user-dq1sw3kt8g 11 месяцев назад

how to download offline maps in using mapbox in flutter?

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

everything ok, but the problem the map occupies the entire width of the parent widget is correct, but the height does not, it reaches certain dimensions and you see the background of the parent, it should occupy the entire screen . Help

@TrikNgonlen Год назад

A W E S O M E !

@ritikraj1067 3 года назад

Thank you for such a wonderful explanation!! can you make video covering .... flutter_mapbox_navigation: package ?? plz!!

@tinotendachimbwanda4681 3 года назад

This one is much needed Merci, Please Cover

@Ali-cb3xt 3 года назад

👍

@shahrazkareem2281 3 года назад

thank you for sharing the information , but can you make vedio about firebase .

@mercicodes1531 3 года назад

You're welcome! Yes, that's a good idea 🙂

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

it is awesome, but is it really 499 dollars for commercial use ? it means if i create an app and commercialize it i pay 499 per month ????

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

Amazing video, but I cannot open the link for your ebook

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

Thank you! Try the following link. 😉 www.mercicodes.com/app-ideas-for-practice

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

How does pricing work? If you thousands of users updating their location every hour, is it still free? Their pricing page isn't clear.

@lucefan2816 7 дней назад

It is free?

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

Don't disable null safety. It is supported now.

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

It is always better to use a new page to showcase some packages or features. This could easily set as new home destination,... just saying.

@weirdduck4578 3 года назад

Also no offence but you should buy a new mic

@mercicodes1531 3 года назад

😂 Thanks!

@AlfaSanga 3 года назад

Do her a favor, bought one for her 😊

@haroonrehman8156 Год назад

7:28 You're ignoring major important steps.

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

quick update for the tutorial just use : latlong2 package to fix latLng.latLng( ... error and thank you for this great tutorial

@jetardeshna3449 3 года назад

Great tutorial. To the point, but doesn't skip the details. I only have one question: Do you know if using this will incur any billing or not? I've created a similar app and I've moved the map around a bunch but I don't see any logs in the 'Statistics' tab on mapbox.com Does this mean it's free for unlimited user / loads or does it get counted towards the Free tier usage? Any info would be helpful. Thanks!

@mercicodes1531 3 года назад

Hi! Thank you. On the pricing page (www.mapbox.com/pricing/) it says you can have a lot of monthly users for free in every kind of APIs. I see my numbers on the Statistics tab and I haven't been charged. Although, that's strange that you don't see anything there... Anyway, I used 3,100 tile requests in the Static Tiles API during the creation of this app which is still nothing compared to the free limit which is 200,000. Hope it helps! :)