flutterQuickie - package: flutter_map Tutorial

all right so to get started here i i do have the basic app template that you get when you make a flutter app i didn't do anything it's just a new app i named it flutter osm tutorial you can name it whatever you want all that being said firstly i'll add the packages so firstly we need flutter map installing i'll get the package and then let us go to vs go i'll go to bob specky ammo and i'll add it right under computing icons also while we are here we need to change of just this line into the android xml so copy it go to android app source main androidmanifest.xml [Music] all right then we can come to package and then underneath it we will control v8 we are done cross it we don't need this anymore also let us get the lat long installing now we need that long two actually so we can come here lap long that long too by the way this lat long package will be responsible to get our latitude or longitude or actually to get any latitude and longitude uh and the flutter map package will be responsible to render the map on the screen so save it and what is up here [Music] all right now we can go to the main.dart and firstly what i want to do is i want to get rid of everything right i'll change it to material app and the home should be maya underneath this i'll add a stateful widget and i'll name this my app and i'll get rid of the constructor here and i'll change the container to a scaffold alright now what do we need firstly in the body parameter i'll add a center center child a container and its child will be a column children all right now in the children firstly i want to add a flexible flexible and the child will be flutter map now for options we need to add map options right yeah map map options in the map options widget we can add firstly the layers we have a lot of things that we need to add in here we can add the center first so center will be our latin long so center will be the center uh coordinate of of the map that will be shown in the screen so what i'll do is firstly i'll go to edge and i'll get the lat long of the dhaka so this ctrl c and i'll come here and what we will do in so what we do we we bring flutter maps and there we have options for the map options and firstly we do the center and center will be lab long and latitude will be latitude that we just copied and the longitude will be this all right now we can go back to the flutter maps here what we need is we need this layers so i'll just copy this the title layer option this is something that you must have this is you donated it it's it is what it is you just add it so in the vs code firstly i'll set the zoom let's say 8 just after center and then after maps option i'll come down and add layers and in the layers i'll ctrl v so tile layer option and now you can see the map yeah that ain't very deca-like now is it oh by the way if you want to zoom or do whatever you want you bring your cursor here you press ctrl and then you pinch into your mouse and then do whatever you want that end looking like daca to me does that all right whatever so here it is here is our maps now what i want to do is just after implementing this basic map i want to add a marker a marker that will show me where my latitude and longitude center is so within this layers after this style layer option i'll come to add marker layer option and here we need to add firstly the marker and the marker will be a marker widget and the point will be our lat long so lab long and i'll add this laptop here so just copy this control c ctrl v and for the builder i need to add a context and it will pass an icon icon i cons dot pin drop what is up that marker ctrl x so in the marker we need to put some area first and then inside it we can obey this all right we are done so now if i restart this yeah so here is our uh city daca and this is our marker so if i zoom in this is dhaka all right what i would like to do now is i would like to add a few different uh coordinates here right so what i can do is i can come up just above the scaffold i'll add a var marker equals to now bar marker it goes to type of a marker and it's a list now in the marker what i want to do now is marker dot add all right so the thing is marker equals to the list and within the list what i want now is i'll just copy this first uh this marker so i'll copy this from marker until marker ctrl c i'll come down here so ctrl v ctrl b ctrl v i have three markers here and i'll put this marker ctrl c to here so i don't want this marker anymore and i'll save the copy yeah marker now within this three marker firstly we have daca i want to add astana lat long so i can copy this copy come down here ctrl v take the longitude come down here and paste it now go for moscow moscow so ctrl c come down here and get this ctrl c paste it here also what i would like to do is i will change the color back out to colors dot green copy it paste it paste it and for aston i'll change this to blue and for moscow i'll change it to red circle save it hot reload it and let us see what does it look like oh by the way since we are here our zoom level needs to be changed now because we are really zoomed in so i'll change this to two let's just see what's up all right that is it dhaka astana or almaty whatever it is and moscow so with that i'll conclude this video and in the next video i will come up to show you people how you can add buttons to move from one coordinate to another and also show a polyline between the markers alright see ya

Channel: Fluttercraft

Views: 72

Keywords:

Id: s4xx9XNCkP4

Length: 11min 9sec (669 seconds)

Published: Sat Dec 04 2021