Video: Flutter Google Maps Firebase Markers
Hello an alpha code greeting, this occasion we will use Flutter to communicate with Firebase so that markers that we have stored in FireCloud show or paint on the Google Maps map for this we are going to make use of some libraries like fire cloud and router google maps basic this is what we are going to have as a result we have a map where below shows us the markers and we press brings us up to him and up we're going to have a few ButtonToggles that allow us to turn the right to the left and we can reset the camera let's say in a certain way take it out of the satellite out of position in this case we already press it in Europe and we can go back to any of the markers pressing on the part of down as I can see some container if we press on the button it tells us Site.
example Barcelo Maya in Cancun let's make sure that this time we're going to as IDE we will use Android Sutdio, they can use VsCode, Intell. those who do not have Flutter installed in a Android Studio go plugins give the Flutter press install and asks them to restart it IDE let's say the video and it already appears let's select the first option the bones we give a name of a application any name can be something about what we are working in this case flutter maps a storage folder in the bottom where do we want to store our draft IDE VSCode an example for people who work with him and Visual Studio with low view command palet luther new project and we give the name of the project and we select the folder this applies for the two editors remember that we can work flutter from the moment I think three editors like the visual studio with android We wait a moment we are in the same structure in any code editor create the project and we are in the same structure and we will work the same let's try it out, with Android Studio Flutter doing it from another study is the same as I comment you do not have any difference in just as by changing this Once we are going to finish he does not generate our project here is charging us is doing look for bookstores, what is necessary to load the project so the base structure previous to all this we're going to address this in the tab of Android where it says very Gradle we press button right and we say open terminal let's open the terminal and there we go to to write the command this command this command is in the description of the video shows us the sha1 certificate with this certificate is that we are going to communicate the Fluther with FireBase this certificate is pretty important here what we do is open the terminal he does not open it we paste that command We wait a moment because it is processing and once we show the sha1 we copy it we open a code editor we copy it and sometimes he had made other projects he says is optional but the truth I did not communicate with Firebase, from that moment I always generate the SHA1 According to him it is only for authentications with social networks, but as I see it is not like that.
well here it's over we're going to copy the SHA1 you have to be very careful because we must copy it correctly that does not go to miss any number we open a Notepad for example we paste it and we are going to copy another part let's go for the pp remember that that what Let's verify that there are two Gradle files, one inside the app and another one outside app We open where Manifest says and we are going to copy the top part that we select the name of our package name of our package there in the code editor we're going to hit because we do it like that because now we will need it to be able to register the application we open the Firebase console, the command can be seen on the screen, I also leave it in the video description enter the Firebase console must have a gmail account we are going to give you here a name anyone this name does not they interfere in nothing, they choose their country in this case we do it in colombia and select accept the terms and you we give create project this part is the as part of configuration of our entire structure of from let's say our database of certain way we give it continue let's where the android symbol and asks us that is good or android here we are going to paste the name of the package that already we have in our blog notes it has to be as it is as it is there you can not miss any name because he will not tell us application and let's copy the sh to one the sha1 the second part is optional This is important that the sh 1 and we tell you to register application let's proceed to download the google service json that's a file usually if it's in windows is in downloads they copy it and they stick it in the folder of your project within it droid app there you must paste it it is important that it be on that route because otherwise we can see that it is already there the file and json and what we have left is to create, say, certain way our base name of data but here we are going to give you next sorry and we are going to copy this part since it tells us that we should copy this that we should stick it on the Gradle but in the Gradle that is which is outside of app not the one inside but the one who is out there right below where it says dependencies dependencies and what hits we close he asks us for other permits but that we do not really need that part not the last line yes, now we're going to Apply we give you next press on omit I give a name of our table if you can give any name but If you are going to follow this course, I suggest you that is the same name so that have problems with the code in this case of the table we are going to call makers bookmarks I repeat, do not change the name because later it will not work, then already in project you change the name, but you also have to change in the part of the code markers, here is id we leave automatic give it a name for example on behalf of the site let's see that the second letter is capital letter, we write anything, example Cancun search for a location Mexico and here we are going to give him location but look here we select there are several things to select and among those Gpoint this is a tool let's say the he developed google for everything he has what to do with geolocation georeference and all that part the one I'm selecting coordinates open Google Maps I go to some point I give double click and above it seems to the coordinates what what I have to do is copy them and stick them you have to be careful also when copying and paste the coordinates of not taking us to some coma or a point of more or something A) Yes we give him save we go down and we give him save and he automatically creates us the let's say the Table in a certain way which is called makers and the fields let's say we are going to add to a document and we are going to give another one another another coordinate other site but you have to be the name of the field name site for example beach la we select geo point and we're going to give you other coordinates may be a little more we double click we copy other coordinates if you want to add others and others markers can do that same process we test with two markers you can add more in the same way it would be on the top it tells me add document follow the same steps now what we are going to do is a copy in the AndroidManifest file I can not remove that yellow shading, but we're still going to paste the key of Google Maps Android key that says to stick the key here inside those quotes you paste the in the description of the video I leave you how generate the key a google key maps for android is important to be for android let's give him permissions we copy and paste the line and we give it to be file occasion and we are going to modify our file yo I think we're going to do it with the Notepad let's do it here in the BuildGradle We are going to give you some permits we need to cry in laapp we go down to the last line we give we write multiple enable true and that part is very important that the write because if you are not going to give error when compiling and we're going to hit to the end of dependencies after of when the bracket ends we are going to paste that line that apply with point google dot gms point google is the service list and the other one that s that enables them the truth that the checking versions of the plugins and let's give that trump those two lines all the lines I'm going to leave in the description of the video equal by arriving they can see all the code and Well, the copies there on GitHub and description of the video can see the full code your can you work we are going to configure our pubspec.
yaml file we delete all the comments all that is green are the comments we delete them so that clean our code and we are going to make use of the bookstores by example of FlutterGoogleMaps Firecloud let's see that the bottom part was a space, that space can not remain because this file generates an error it is very delicate it has to have to be at friend at the same level of the word Flutter if we leave a space two other spaces in some that line It does not work anymore, it will give us an error let's give Packages get in android studio we give you the package if you are working with visual studio or in VSCode Crtl + S verify that you do not have any compilation errors let's make use of other libraries that good here we are going to do the google + Flutter which is the most important and others as you can see there I had some spaces that can not can not happen because it will give error they have to be at the same level as the word of the word flutter here I am doing it geof luther fire location and phone to wilson recoder all these are versions current as of February 19, 2019 if this video surely see it in a month two months may have changed the I'm going to leave a link where they can check which version is the that are currently, for this date where the video is this file is the default one The main point to give for this occasion if I'm going to do things that I never do leave it I will do the test I will run the compiler, I hope the app will run on the emulator or device I'm waiting for the application to run on the device because I want make sure if I want to make sure that there is no problem with the dependencies whenever we work with especially with the library and Google + Flutter and others like Geo FlutterFire and Cloud by versions it is common that it does not compile, if this is the case, verify what is the current version of the library it is best to delete the main.
dart and start clean, but to verify that everything is fine, let's leave it a moment compatible with another library then it is best is to compile the entire application and this is good, let's hope that we upload the app it takes some time and we show there in the lower part is showing what is happening we see that some files are deprecated, or are replaced other commands other lines it may not show one of these four errors let's say are two errors they really have to do with key 9 but in the end if he keeps compiling as the bottom part we see we do not have problems really what it does is that You can not check that version specifically with key 9 the problem is when everything is red and the most competes say say fails for combine there as we can see was running the application that he brings by default we do not have a problem I repeat, there is a problem when everything remains in red and it does not compile and if there is a problem meanwhile since compile we have no problem and now what we are going to proceed is to clean our main file Crtl + a + delete delete code from main.
dart to create our own main.dart this is optional. we are going to import the libraries that we will use in our project can autocomplete with Crtl + Space code we import let's say of the three files that we are going to three bookstores that we are going to use that are materials that are the basic Google + Flutter and CloudFireStore this FireStore for what the markers that we have stored let's give the boy main arrow symbol app the 2 that in red because it is not created we give him stl and he automatically we generate this code let's write it send pp let's replace where it says return container by app material we create appBar we remove the message from Debug mode that comes out by default false mode, do not show it flag that shows up on the part Upper right all right let's tell him that the home is called My Home, it can be or name you want, identify what you are working with this is left in red because we have created this class for this we are going to make use of Flutter property stfull Widget receives parameters remember that above we made use of the Simple WidGet that does not receive parameters and here one that does allow us parameters that r we declare some Boolean variables for the ToggleButton turn right, left, reset the position of the satellite camera what we do is use the buttons on the map more interactive our map we declare all of these true or false, bolean we use it to initiate the internal coordinates in the code of those coordinates and we are giving it internally let's declare a current position variable current location and let's clarify a variable sites type arrangement leave the names equal to the video so that it does not generate problems Inside some empty keys fix arrangement that we're going to include there a fix populate current sites let's instantiate the Google Controller here we are already making use of the bookstore from Flutter_Google Maps google + flutter and we're going to create it at the start of the app what it does is that When you load the map, call us certain classes or functions that we have created for this we are going to tell you that the ToggleButtons show load people Sites at the beginning of the app go to FireCloud look for all the markers you have and I showed them I painted them on the map populate the map markers do not worry if it shows red line, this is why we have not created the class we create at the end of the code this populating sites is going to take the variable that we had created a site empty type arrangement, which we will then fill with our FireCloud bookmarks _ _ let's call the library of FireStore contact the BD database in FireStore and look for the table called Markers and everything you have, bring it to store in places inside docs, you can use another name in my case use docs _ _ we continue and let's make use of a condition if () it's not empty so we cycle through our arrangement _ _ and if it is less to the full length of all the files increase it by 1 and all dot point documents read that point in what he does is tell all the records you have of all the markers and let's give it the semicolon you arrive brackets add we are already filling our arrangement data red line because we have not created the method or class iniMarkers, we are going to create it how to start the markers let's say When you start the app, bring the bookmarks location let's create the iniMarkers _ we include site parameter clean old markers, which are in cache and paint the new markers _ I need to load the ones that really are in the database this is to make sure that of soon not for some reason that of memory some cached some markers that are not current but we use property MarkerOptions _ coordinates latitude position remember it by pressing space control can auto complete and he suggests code to implement let's call the arrangement single quotes _ name as we created it in FireCloud it has to be as it was created _ _ latitude and the same thing we do for the length _ is going to do some information for example name of the site and some word these markers you can personalize with another icon, or image.
can be a car can be two _ _ brings the bookmarks by default but they can be customized here we delete those parentheses that I have wrong and let's leave each bracket semicolon parentheses we verify that we do not have any error there in the code and we are going down let's create the clientCard widget or siteCard we passed within the parentheses parameter sites _ _ we continue _ can investigate how to work with Cards in Flutter _ _ _hum _ _ They can show icons or any image. Y there are other videos in the Alpha Code channel Col Flutter where can you see how to create those Card and use routes _ _ _ … let's make use of this card when we press the card it shows us the name of the site and some detail _ we use the onTap property, which is very similar onClink or OnPress an effect let's say that turn 90 degrees and make an approach really all this it helps a little the presentation of a map is not going to be the typical map but something more beautiful some animation the zoom in marker to the site this is zoomMarjker remains in red because it is not created, do not worry do not worry pass the line in red meaning there is an error the error is after created and here we are going to tell you let's say the properties of that container how wide how high if what circular rounded edges because let's say if we want a color of background color what text color yes we want to add an image and you can customize how you want How to customize a card and within this we are going to give you the name of the site but already bringing it directly from the database Y remember that in in the table we have site name were two let's say two fields one called site name and the other called location a BorderRadius White color you can choose any color centered with the name of the site _ single quotes I have an error because I did not put it in single quotes.
another the keys and you're _ _ _ to that symbol we verify that we do not have any error in the line above I have an error but _the we correct let's create the zoomMarker class this what it does is that when I click on that site, make me a animation a turn say 90 grams and average of consumption for example of 17 that is believe me those are effects r _ giving a little more design to our map let's make use of several properties so that you have there the knowledge of how apply them all this is used with CameraPosition – camera position and what I'm telling you, look if you is in a position that rotates 90 degrees and then zoom in through a zoom zoom 17 is closer to the site a zoom 34 for example the 5 is pretty far either to see is to say everything a whole continent or several countries with a are 5 are 17 is practically there where is the house where are the localities let's tell you initial marker _ Turn _ where I give a latitude the length of the site that I want I use Google Maps that means when I press the button take me to those coordinates saying and turn right and then I'm going to create spin the legs are effects are really effects that I say for example turn -300 of 360 degrees or turn 90 degrees to the right zoom in they are perfect all these effects can be omitted they really are not necessary just if you want to place those buttons from turning to the right to the left are effects that can be implemented in the map but you can ignore this code for those who want I'm going to leave it as cleaner here what we do is copy and paste and change the place of and turn right and the left and let's change it where it says of 250 mahal takes place in berlin the 0 and then it is there is 90 plus accrual the 90s _ we change data and what comes is to paint the map we are practically already in a 70 80 by hundred of finalizing our project already we are finishing I invite you to subscribe and the bottom part is took a moment just click on subscribe to be notified next videos here we are going to paint the map we are going to tell you that a title bar with what to read and inside test anything my map of anything in this case _ .
.. … .. well let's continue here is giving me error because I miss putting it in single quotes single quotes I'll correct it we make use of the body or children a been that state means you are that property is very used because we can locate it on any side of our screen on what we need and that map I want it on some photo You can do it if I want to take care of The whole screen can do it if I want me to deal with determined in certain position of the screen they do this is pretty used is one of the most used Widgets on Flutter the one that we add a container with some measures of width and height if we're going to leave it minus 80 – forgive and 80 and a double infinite and we are going to call a son in favor … … let's give it a position when just let's open the application he does not reach a initial position in this case we are going to give you some coordinates Paris example.
… remember with 'google maps' can look for the coordinates and what they do is write them or copy and paste them we are going to give it a zoom of 15 and we're going to give you some properties like is to enable localization the type of map to be hybrid that have to enable the compass or the compass in a certain way track camera position they are properties of the maps … remain red because we have not created it now we create it and let's make use my location enable is enabled it means that a button on the Upper part top if I pressed him he tells me what is my current disposition. where I am positioned the other is the type of map there are many types of potatoes and like 4 satellite as is the hybrid the normal others is showing them the normal compass enable true and change position Here we are going to tell you what I loaded all that on the map so load all that part if for some reason not those two points I'm telling you, it's as if it's not this does not charge if this did not load then it extracts a text box that tells the user something in this case for example check that you have data activated or that have failures but all the gps is active from your cell phone to your device mobile some information so that the person have that knowledge and let's give it a dance style to be let's say for example 20 a type of font of 20 why we go to the font type of 20 and we're going to let's give something is let's position the 3 buttons from above at the top is the little button that will turn right to the left and the reset camera we are going to position the part of the map I want to paint them then I have to give some measures and 11 margin let's say right left up and down so he sees the 20 this first one this first has to do Really this position we are going to do it first before those three buttons we're going to position in the two containers of the lower part that is, the containers where I have the markers He will show us the name of the site for example in my database I have Let's say Cancun- Playa Maya in Quintana roo are Mexico's place whatever you want what he is doing is 20 m each .
… press he will have the map here I'm doing this part that is the one in other words going to go go through a list and paint them on the Map after this is after painting this part is each of the markers and we are going to position the three buttons remember that this part is optional not I know if you want to make another screen that would be ideal where show what your cards are and with the picture of the site and take them there they go to make use from this part from this just between this part of the code from where he says positions … so that it offers them in another side these names of these sites … we use a CardView saying with the relationship symbol is go and bring me the list of the listing of the markers and paint gives me the let's say sample the bed on the map …
cards we created from the part of up with some sizes and they are small really let's make them small so that do not take up too much space on the map that we had previously drawn here we are only bringing from list two points we are going to give you two points and what we are going to do next after we create them container … is to position the three buttons of the top part to turn to the right on the left and start of camera as the position and with this we simply have left create the controller and we have finished the code already practically in 8 minutes we are in 8 minutes of finishing the entire code the other videos are going to continue with Firebase everything that has to do with CRUD, notification, login … Other themes interesting notifications and other things I remind you, I invite you to subscribe down subscribe simply to that of a click and now to be notified publication of the other videos it is possible sometimes in the week we go up a video or two videos At least one per week but they have good content of the previous videos have to do with the previous ones were with mysql flutter mysql php we made a LOGIN and a CRUDMYSQL and now we're getting into the subject of Firebase, which is very interesting .
.. As they are from Google, they go hand in hand. It is very fast and it is very stable then to carry an application already suddenly to a scalable level or something I would have to see the budget if it is viable this platform or not. but let's say by speed for comfort to work and for agility for many things and it's pretty good because of the subject of costs you have to think about it a bit but but good and everyone look at that part we are going to work and we are already in bloom but where are we making use of the we created a FloatingActionButton right turn left remember that all these classes we already had created on the top same this code you can create it make use of some kind of structure additional can make an MVC or block pattern to order the code for time we only do everything in one file single file … If you want to see videos where we explain how to handle the routes part then there and you can see how to implement all of that .
.. … container to copy and paste and we do it with the other two which is to turn left turn to the left and turn to the right and here what we have to change is turn right turn left we change where it says men change where it says initial marker is going to spin right for example there is how it can be broken and lass the other can be broken and rain the raid and logically it has to be called choosing left the other right turn it has practically after three minutes we finished the video with the tests for the comments them You can leave them there for the channel and there we will be publishing the code and the links for that have more information on how that we do this is what we do … we leave documentation Flutter and they can be guided there before compiling or something in the bar the part of the right side both and android studio with visual studio and check for errors, red dot on the left side .
.. .. end of all our code we have mccray class today we passed the controller parameter and setState for this and you have to remove some league from Red in each stop in red controller because it does not happen to the parameter inside The parentheses We copied, we stuck, she left here I have the error that this title does not it includes it in quotes to chairs and we are removing that error and we have one error as in the top two mistakes we are going to verify all this is very important to verify missing single quotes above in the title Market Stall and here I have a site error I'll finish it if … … ready it seems that it has no error we give you compile let's compile and this I'm using it is so that let's verify that we're not going to have any error here the application is important to go to device to the cell phone and give it permissions well here we go that already loads us in the bottom part are the markers that I told them about the cancún if we press in leads you there we turn we turn to the right we rotate alex and the sorry to the left to the right we press another marker and we see that they are working at the moment it only shows us two because the database we created it two we press the camera reset button and we takes to the part of europe towards germany france we can press again cancún and there it is if we press one of the markers he shows us a information of what site it is that is the name of the site as such below, the route for the site that we are to support so that Well, I invite you to subscribe to like it and see you in the next see you next video.