How to Use Mapbox with Flutter - Tutorial for Beginners

hello guys welcome here in this video i'd like to show you really quick how to implement a macbook's map into your flutter application so let me switch over to my computer and i will show you how to do this what is mapbox macbooks is a map provider for developers as you can see it is trusted by huge companies like this and it has a lot of interesting features like this heat map there is a macbook studio where you can customize your maps for example you can change the colors the icons and so on so it could make your app look more professional and more customized so now we know what mapbox is but before we can continue i like to ask all of you who is not yet subscribed to this channel to hit the subscribe button right now and like this video thank you thank you so much guys you supporting me so much with this and now we can continue with the video and i will show you how to implement the mapbox into your flutter application okay let's open up android studio and create a new flatter project after it created let's open up main. the main.dart file from this file we need to delete some things for example we don't need these and also we don't need that one and we don't need these comments as well so we will need only a scaffold inside the build function and we will write the map widget inside the body of this scaffold all right so we will use the flutter map package the map box has a flatter implementation but i found that flatter map package easier to use so let's go to the package page and at the installation tab you can see that we need to paste this line into the popsec file and when it's done as usual we have to run pubget then we need to paste this import line into the main.dart file and let's see how to use this flatter map package as you can see there is this flatter map widget which we need to use so this is the widget that we have to paste to the body part of the scaffold widget okay after we paste it we can go to to mapbox.com as you can see after i signed up this is my account page and from this account page we can get the macbook studio and inside the studio we need to create a style so i've already made a style but this is how you can do it so click to style and then you can choose whichever type of map you want so i chose this outdoor map style and after you're done with this you can see that there's an option for sharing develop and add the developer resources we need to click to third party and it's important to choose this carto it's very important and then copy the integration url and as you can see we have this url template um parameter and we need to paste this url that we just copied here um we don't need this subdomains line but instead we need the additional options so just write that here and it will be an object and inside this additional options we have to write the access token um yeah so when you sign up for mapbox you will get a default access token but as you can see if you scroll up and click on the web you will see your own access token there so you can just copy and paste here and then we will need an id this id will tell the map what kind of data we want to show so let's close that and go to tile set as you can see you can show countries satellites streets terrain traffic so you can pick whichever you like i chose this macbook street and we need to copy the thai set id and paste it into our id property all right so we are ready with that section but as you can see we have some problems with that lat long parameter so i searched for it and i found that we need to import this package um lat long slash lat long dot dart so i have previously um imported something but that was wrong so i just write this one here instead and after we need to write that last long at the beginning of this parameter um and this part of the code is responsible for the marker but right now we don't really need this so if you want to upgrade this map and work with this in and in a real application you can use markers and a lot of other things so but right now we just don't need that oh okay we don't need this title for the home page so we can just delete this all right the up bar is also unnecessary okay so now we can run it as we run it on the emulator we will have three problems so first of all the first problem is this so we have a socket exception because it cannot look up this api.macbooks.com so why does it happens it happened because we need to paste a line into our androidmanifest.xml file as you can see in the flatter map package it says that we need to paste this line to be able to run on android so i really just paste uses permission here and okay the second problem after i rerun this app is this one so it says cannot run with sound new safety okay so we need to um disable this some new safety so we can do this by adding a flag no sun no safety you can add it to the terminal call as well like a flutter run and then this no samuel safety but it's easier to add directly to android studio okay so we have to stop running and then we have to go edit configuration and then the additional run arcs we have to write this no sun no safety okay apply and oak okay and finally the problem is that with the emulator we cannot run this properly because the emulator um has no proper connection to the internet therefore i needed to switch to my phone instead and as you can see it's working on my phone we are in london by default as we um said this in the code because we added the coordinates of london so we can zoom out as you can see it's loaded nicely and yes it's working and basically we are done with this you can play around with your new map if you want more app ideas like this check out my free ebook 35 up ideas for practice when you just don't have any ideas on what to code find the link in the descriptions and that's it this is how you implement a mapbox into your flower application i hope you like this video don't forget to hit the like button and subscribe to this channel and i see you in the next video [Music] you

Channel: Merci Codes

Views: 6,389

Keywords: programming, coding, mapbox studio, mapbox, mapbox with flutter, flutter for beginners, flutter app, flutter tutorial, flutter mapbox tutorial, flutter map, how to display map in flutter, map in flutter, map in flutter dart, mapbox without token, flutter maps tutorial, flutter open street maps, mapbox styles, how to use mapbox with flutter, how to use mapbox with leaflet, mapbox api tutorial, mapbox access token not working, cross platform mobile app development, learn flutter

Id: hZwrcOTxDJI

Length: 11min 33sec (693 seconds)

Published: Tue Jun 01 2021