Getting Started With Flutter Map

so a couple of days ago I had this idea of building an app where you would actually see a map like this one you would have an input box like this one you would enter a word for example gato which means cat in Portuguese it would press enter and then you would be able to see the translation of this word over each country in their respective languages just like you're doing right here so you see sha in Francaise in French sorry sigato in Spanish cat in English that was my idea I had never built an app before I had never implemented anything with flutter and yet I was able to get it done in only one day because flutter is very simple to get started but not only that is Library flutter map is actually very easy to get started and in this video that's what we're gonna be talking about so without further Ado let's just get started foreign everyone so we have here our flutter app nothing there just a blank screen IntelliJ on the left they're already connected this is the iOS simulator as for a flurry developer you already know that of course why am I saying this this is a remain there is nothing here as you can see we just have a scaffolded the stack with no children inside and in the pubs pack we're gonna import some dependencies the third one is going to be the flutter map um library of course this is gonna be inversion I think this is yes exactly and also the lat long tube Library which is necessary for floor map to work properly which is in version 8.0.8.1 and I'm just gonna get this okay I think I already had them no problem eh and the first thing I want to do here is actually display a map I think that's the simplest thing we can do in order to do it I'm just gonna pause it here for a little second and show you this this is the this is an article that I'm writing with basically the same content that you're gonna see in this video but on medium so if you prefer to read instead of watch the link for this article is going to be in the description of this video don't forget to check it out and this is actually the basis for this video so you're going to be following through this article all right so the first thing you're going to be doing is displaying a map I'm gonna get the the body here to display a map I'm going to explain this code in just a little second don't worry about it and let me paste it here okay so we have a body with a stack and the child of the stack is this widget a flutter map so this flutter map is a widget that receives two different parameters the first one is the map options and the second one is a list of layers and let's preload that application and see what we actually get here and this is what we actually get this is already working we already have a map in our application this is open street maps all right you can zoom in you can zoom out you can move around that's pretty cool right pretty simple it's already working this is really nice but let's go through the code and understand what we did here in the flutter map we have the perimeter options which receives the map options and this object receives other two parameters right the center and zoom the center is an actual lead long object telling us where this map is going to be initialized and the second parameter is the zoom right so if I restart this app right now you're going to see that the center of it is right here in London because these are the coordinates for London and this is the zoom the default Zoom if I change this to let's say 7.2 and save it again and reload the app we're gonna see that the app just started was just initialized with London is still in the center but with the zoom very much closer to to the land right and besides that our footer map also receives children and these children are the layers of our map so our map is actually a composition of layer Zone one on the top of each other and right now we only need one which is like the base of our map which is the tile layer and the style layer receives a polymer recall the URL template and this URL template you can see that we're actually getting from open street map but if you pay close attention to this you're gonna see that we're actually getting static images using a template here right we're replacing this placeholders not us flutter is um or flutter map behind the scenes it's replacing displace holders with some information the first one is the zoom that is being applied the second one is the X coordinator of our map and the third one is the Y coordinator of a map in the position that we are right now just to illustrate this if you got this URL and actually accessed it that's what we're gonna see you can see that for this one we applied a zoom 6 with the x coordinate s30 and the y coordinate as 23 and the same thing for the one below but with the 24 and these two tiles you can see the entirety of Portugal and part of Spain right and why am I telling you this because this is how our Maps actually work if we zoom out and actually move around you see that as we move parts of the map are being loaded in real time and these parts that are being loaded are actual static images that are coming from open street maps so you're probably been through this situation where you don't have a really good internet connection and then you're trying to load Google Maps in another country let's say and part of the map loads but the other doesn't and then you have sometimes a blurry image sometimes you don't have anything that's why because why you move your app you're actually downloading images uh on demand and if you don't have internet or if your internet connection is actually poor you're not able to do it and you end up with a map that is kind of broken and now that you understand how Maps basically work we just came across our next problem which is for my use case for the out for the app that I was trying to build having all this information is actually a problem right because I want to place words on the top of the map over the map and if I have all these words around and colors and information you have the border of the stakes have the border of the countries you have the name of the countries the capitals and as you zoom in you get more information cities roads reverse all this information is actually Irrelevant for me I don't need it right but I have a problem because these images are actually static there is no way I can tell open street map with this implementation that I don't want to receive this information it's just fitting me with images uh that are static so these labels are in the images itself and well it doesn't help me with my problem and with a few Google searches you can find other tile server URL style server providers like this one a few of them are paid a few of they are free and I came across a really good one or one that I really liked which was those provided by stamen or stamen I don't know how to pronounce this word but they provide three different designs for maps the first one is toner terrain and watercolor toner for me was exactly was what I was looking for because as you can see it's very simple I don't have too much information here um actually I still have the labels in this one but if it look closer you can see that they offer six different flavors and one of them is this one called toner background and if you open this you see that you have only the map here without any information besides the border of the countries and in the United States you also have the border of the of the states but it's not that relevant for me so this is actually the closest I could get to Something Free that would solve my problem so I decided to use this one so let's get the URL for this template which is this one that is already my article and I'm gonna replace this one and let's see what's happened so I'm replacing this URL and I'm gonna reload the app and what we're gonna see here is that is new design is being loaded it's coming directly from statement they are feeding us with this static images from their side right which is pretty nice and that's pretty cool let's just stop for a second and actually contemplate what we've done um and understand where we at and where we want to get because as you remember what I'm trying to do here is build an app that I can place objects or things or stuff or anything else over it on a specific coordinates right so what I have to do is Place words on this map on the specific coordinates let's say in the center of a country or in the center of a continent or anywhere else in the world right um and in order to do it floater map the library also provides what they call layers and this is one of them this is the tile there so it's the basis right but you can add others on top of it as we were talking before and the first one we're going to look at is the polygon layer so let me copy this code here and and once again I'm gonna go through it so you don't need to worry that I'm going too fast perhaps I'm going too fast but you can check in the on YouTube to make it slower or faster you have this option on the player of YouTube anyway so this is the polygon layer and the polygon layer is used for drawing polygons over your map at specific positions these are the vertices of your of a polygon here I'm building a square as you can see right but before I go through the vertices let's take a step back and look at the polygon layer which receives a parameter called polygons which in this case receives a list of polygon objects and this polygon object receives a series of points to build or to draw or a polygon in this case we're drawing a square that's why we have four vertices here and we're also saying okay this is the color of our Square it's going to be blue with an opacity of half and it's going to have a border stroke whose width is two and the Border collar is going to be blue as well and yes it's going to be filled right so let me save this and let's see what happens okay so you can see that we actually built a square over Portugal here and this is transparent let me put it back here okay and this is transparent because I set the opacity here at 0.5 if I had not set this thing and just save it again you're gonna see that it's um opaque um square right there a blue opaque Square let me get back here put the opacity back and perhaps I don't even need a border collar and let me get rid of this as well okay and now I just have I square a transparent square or a semi-transparent square it doesn't matter but that's what a polygon is for let's say that I wanted to have one more um Point here one more coordinate here I could put I don't know let's see what happens if if I put 35 you can see that now we have five vertices in this polygon and this is actually nice that would take a lot of effort and a lot of points but what you could do is actually go around the whole border of the country and and only fill the country that's very useful depending on your on your use case and yes I'm not really sure how you can find this coordinates but if you ask Chad CPT for example he can help you with that like get me the the coordinates for feeling Portugal it's it's going to help you with that I'm sure because I've done something similar did you at least get the coordinates of each country um all right now that we've seen how the polygon layer Works let's go to the next one which is the polyline layer and the polyline layer is actually to build lines or to draw lines in our map okay so you can see that in this case this polyline layer uh receives a list of polylines again and these polylines are very similar to the polygons but it's just a line right and you can see that it's connecting three different places here so it's coming out from Lisbon passing through London and finally arriving in Amsterdam so it's connecting this three capitals you can see here we also have the color so you can change it I don't know to yellow and let me save it and also the width let's make it very thick I don't know five that's not very thick perhaps 50 here now that's pretty thick um nice and okay gets thicker as I zoom now that's interesting but this is the poly line that's useful if you want to trace routes let's say for example or just lines or anything else you may think of right let's go to the next layer now and the next layer is the circle layer and let me copy this this is very similar to the polygon but instead of being a polygon it's a layer it's a circle I mean all right so in this case I'm living in the in an area here in the Netherlands called tihoi and what I did here was basically putting a circle over this area in the map you can see that the point is where the center of the circle is going to be at the radius is the size of the circle in this case I'm saying I want these radios in in meters and that's what it's doing so five kilometers this is a circle of five kilometers and the color of the circle is red and the border of the circle is red and the stroke width is two again I can make it thicker or thinner and that's what it looks like and yes I'm pretty sure you can think about a lot of user cases that you can use it so I'm not gonna go there and the following one and the one that is actually the most important for my use case is the one that is the marker layer that basically allows me to uh Place anything over my map so let me place this here and what it is doing here right now is basically placing the flutter logo over London so you can see that this marker layer receives a list of markers and this marker specifically is set in over London again and it has a width of 80 per 80 and it's basically the flutter logo right but I could have something else here and this is important because this is the layer that I need for building my app because I want to be able to place words and these words are actually gonna be widgets right and with this layer you can place any widget on the top of your of your map or over your map and let's see how we can do it and I actually left everything already done here so we could just copy and paste so I'm gonna get this that this function that is going to return a text style I'm gonna paste it here so you can see that this returns a taxi style whose font size is 12. let's make it a little bit bigger 15 and the background color is black and the color of the font is white and after that I'm gonna get this other function that returns a container and I'm going to explain after I show you this working why I placed this inside a container because you can see that this container receives a text as a child right which is actually receiving the word that is gonna uh be placed over our map on the countries in the countries or over the countries that's difficult when English is not your your native language I never know which prepositions to use but yeah never mind um that's the line it's going to be centered and the style is going to be the style that is being returned by this other function and now that we have this let's continue and let's get the function that is actually build our marker using this view text widget function and let me just place it here build markers so you can see that it's building a point using this coordinates sorry it's building a marker using this coordinates as the point with a width of 100 something with a height of 12 and with the butex widget function being returned as the widget that's going to be placed over the map and now that we have this all we have to do is replace here with this function here that is going to receive coordinates in the word right so I already have some examples here so this is calling this function that we just implemented let me replace this here all right so we have six or five five different um markers here and we're basically calling the build marker function which is this one with the coordinates of each country so Portugal England France the Netherlands and Germany and then with the word that is the translation of love in uh in the language of each of these countries let me save this so we can actually see what is happening here so you can see right now that there is a problem these words they are cut and this is because this uh marker is shorter than than the actual font size because the font size is 15 but the but the marker is 12 so let's change it to 15 as well and now we can see the whole word being placed over the map over the countries here and then you can see also that we have multiple markers over our country so in Portugal Amore in France I made a horse I don't know how to pronounce it love in English I don't know how to pronounce that in Dutch yet because I'm learning but yeah lift lift the uh I don't know and live in in German I'm not sure if this is correct but who cares right and and yes um that's basically it we have a map we have an app that is displaying a map and on this map we place this stuff in this case words you could place anything bangs or anything else there are things that we still need to do here to achieve the same thing that I achieved on my own application which is for example when I zoom in and and out here you can see that the size of the words are always the same and if I zoom out too much you see that they overlay each other and that's something that I overcame or I solved in my own applications so when I zoom in and out you can see that the words are actually getting bigger increasing size or decreasing in size according to the zone and I also placed other things like the flag um next to the to the word and of course in my application it's not a static it's working as expected so it's connecting to Google translator and actually translating the the the words and placing them over the the countries in the map and I also have the input box but all of this can be the subject of the next video if you enjoy this one so if you enjoyed this one and you want to see more videos like this please don't forget to subscribe to the channel to leave a comment in the comment section to like this video and my name is Hanford Deli and I'm a software developer and in this channel I yeah that's it see you around

Channel: Coding with Raphael De Lio

Views: 5,262

Keywords: mobile, mobile development, flutter, flutter map, getting started with flutter, getting started, android, ios, ios development, android development, application, app store, make an app, make a map

Id: YuwhlhaM1eM

Length: 20min 3sec (1203 seconds)

Published: Tue Feb 28 2023