Flutter: Custom Markers with google_maps_flutter

what's up guys today we will deep dive into Google Maps by looking at custom markers in particular I'm gonna show you three ways to customize the markers into your flutter apps the first approach is very simple we just take the default marker and we just customize the color then the second approach takes images from the asset folder of your apps convert them into icon and then show them as a marker on the map and finally the third approach which is the most complex but as well the most flexible let you create custom widget now convert them into images and finally use them as a custom marker for your flutter apps and now let's get started and let me walk you through the starter code for this specific project as you can see I've already prepared some boiler pulled code for this project in particular I prepared already three different screens however I didn't add any implementation for the custom markers and I'm gonna show you how to do that step by step during this video now in the main you can also see them using flutter config in order to load the API key that we need in order to show Google Maps however I will not show you step by step how to set up Google Maps if you don't know how to do it you can just check the video description and there is the link to a different video that explains you step by step how to do that as well now just make sure that in the asset folder of your app you have at least a couple of different pngs because in the second part of the video we will create markers using images then in the pubspect the yaml just make sure that you have all the right dependencies including flutter config and Google Maps flutter and now before we get started with the first example just make sure that you have enabled the asset into your app because in the second example we will need to use the images and now let's start by taking a look at the first example using the standard markers and to prepare the UI that you see on the right part of the screen we are using a stateful widget in its state we are declaring two different variables the controller and the camera position and the first one simply follow the first example in the documentation of the Google Maps flutter package so we basically create a completer and whenever we initialize the map we will pass a Google map controller to this completer while the second variable is simply a camera position which Define which is the initial position that we see on the map and as now on the map we have 3D from markers and you can see that they are coming from the map or markers that we have here inside the build method the first first one is a simple red marker which is the one that you get by default we just specify the marker ID and the latitude and longitude while for the second and third one we are actually customizing the color using bitmap descriptor and the default marker with you method and then we can choose from a range of different colors then in the build method we are simply returning a scaffold and we use the Google Map widget from the library to create the body of the scaffold so we just use this to display the map on the screen then in order to create the markers you just need to set up the marker property equal to the map that we created above once you do that you will have the three marker showing up on the screen and each of the three marker will have a different color because we customize the data now that's all for the first example let's go on to the second one which is where things start to get more interesting because here we're gonna start to use images and we're going to convert them to markers and before we get started we need to replace the widget that we are returning as a home inside the material so we use the asset marker screen which is where we will develop the second example let's get started with that as you can see here inside the stateful widget we have the same completer as before however now the list of markers is empty and we're gonna customize that sooner then we have the camera position and we also have a Google map widget however you can see that in this case there's no markers property yet but we're gonna change that sooner fact before doing that we will develop the generate markers as synchronous method and here we will pass an image we will convert it to an icon and then we will use that icon in order to generate a new marker then we can show on the screen then in order to do that we need some sample data and these data are stored inside this list there are multiple map and each one will be used to create a different marker in each of these map is storing three different value pairs the first one is an ID the second one is a position and the third one simply tell us which image to use from our asset folder now you just need to make sure that you have enabled the asset inside your flutter app and as well you need to make sure that you have some PNG files available you can use the same that I'm using or you can choose which image you want to show and now we can go back to the generate markers method and we can start to implement the logic for this what we do here is the following so first we create a for Loop so that we can either it through all the map that are available in the list of sample data then for each other map we are going to create a different marker then to create the marker simply we need to create an icon first so this icon is going to be a type bitmap descriptor so we apply the following as synchronous logic so we use bitmap descriptor we use the from asset image method which is available from this class and then we need to set up the configuration and the asset name the configuration just take the image configuration with data you could customize the size however that won't make any difference and then you need to pass the asset name which anyway is stored inside the sample data that we have above so we just take the data we select one specific map and we extract the value for the key asset button and after we do that we're gonna have available one bitmap descriptor icon for each of these three different map that we have inside the data list now remember that the asset path is simply an image that we are storing inside the asset folder or the app so make sure that you have enough images then let's continue because as of now we have not created the marker yet in fact we just have a bitmap descriptor we can use this in order to create the marker and then every time we click the marker inside this Loop we will need to save the marker inside this map that you see here because this is the map that then we can convert to a set and then we can use inside the Google Map widget and also now it's empty and there's no markers at all and in the generated markers method we are gonna do the following in order to save the marker inside the map so we take the marker map and we specify one specific key so we're gonna have one different key for each of the marker and basically the key is simply the index of the Looper and then we are going to assign a value to the key and the value is simply going to be a marker object for the marker we're gonna set a marker ID equal to the index of the loop and then we need to pass a position that will Define where to display the marker on the map and again the position simply come from the sample data because we are storing the position value over there then we need to add the icon which will represent how the marker look like on the screen and we can simply use the marker icon that we generated above then you can add more property to the marker for example the info window will be a box that you can see on the screen whenever you click on the marker on the map so for now we're just going to pass the text widget inside this info window so perfect at this point we have all the markers and we're gonna store all of them inside the map however in order to see them on screen we need to use the set State method in order to trigger a rebuild of the UI and as a next step we need to use the generate markers method inside the need State method of the stateful widget in this way every time we add this widget to the widget tree we're gonna invoke this method and we're gonna generate the markers so let's Auto restart now you won't see the markers yet on the screen and this is simply because October generating the map of markers we are not passing it yet to the Google Map widget so let's change data let's set the marker property and let's set it equal to the marker map however remember that you will need to convert the markup to a set so let's take the values and let's create a set out to them and after you do that you can see that on the screen there are images and each of this image is a different marker and now the images that you see are simply my logo however you can convert any type of image to a marker and show it on the map then after we do that that's pretty much all we have to do for this second example however if you want there's one more method to develop and this is the generate marker method with this asynchronous method you can generate one marker at the time but we will not iterate through the full list of marker however we will only create one marker and now I'm gonna add a to-do here and I'm gonna suggest you that in order to learn the most you should try to develop a floating action button that you can click on invoke this generate marker method and add the marker to the list of markers so that you can show it on the screen so if you want to do that just pause the video and go on developing this method after you develop this method you can compare Your solution with the code that I prepared and you can find all the code for this example in my GitHub repository and you can find all the information to get data into the video description as well now we can move on to the third example which is the most complex of this video and this is where we create some custom widget and we convert them into markers so let's close this file and let's save everything then we need to go in the main Dot and we need to change the widget that we return as a home so this time we can set the widget marker screen as a home screen for the app and then as you can see this is completely empty so once you have to restart you won't see any mark on the screen however I'm gonna show you step by step how to convert widget into markers so let's get started now so first thing here you can notice that we have quite a few different Imports and this is because we need to use the render layer of Latter in order to convert the widget to an image now as a first thing let me show you which is the widget that I'm going to convert to an image however keep in mind that you can convert any different widget to an image so I've already prepared this and this is the custom marker widget as you can see it's just a box with an icon and a text widget inside so we just pass the price and then we can pass any number and we will simply convert to a text widget as you can see here in the stateless Widget the price is the required input and then we are simply returning a size box with fixed height and width and that we are stuck so we align the icon in the bottom part of the stack and then we have a container as well which is where we show the text widget then the background color is simply set to Black and we just add some padding and some margin and this widget is very simple if you want you can customize it and make it a bit different or for example you could even use a circle Avatar or other Widget the process to convert into a marker is going to be essentially the same so let's get started I'm going to show you how to do data now let's go on and let's show the map on the screen again now you have this error but you can ignore it so don't worry about that we'll just not restart and let's start to implement the logic in order to create the markers now consider that even here we have a list of sample data so if you scroll up you can see that we have a list with three different Maps each of the map include the information that are required in order to create one of the widget so one of the markers then we have an ID we have the global key which will help us to identify the widget on the render tree then we have a position which will Define where we position the widget on the map and finally we have the custom marker widget which is simply the widget that we want to convert to a marker however keep in mind that here you could pass any widget in fact in the last one we have a circle Avatar after we take a look at this data now we can start to make changes to the widget marker screen now if you look at the state objector we have the compiler we have the marker list and then we have the camera position differently from before we need to add one more variable here so we're gonna add the is loaded Boolean which by default is set to falsa this Boolean will let us understand whether we have created the markers yet or not so if we have created the marker we can display the Google Map widget otherwise if the marker are not created yet is loaded is equal to false and we will just return a list View and then we add a few children here and now you're probably wondering why are we creating a list View and which widget are we gonna add here so basically here we need to add all the widgets that we want to convert into markers and the reason is that we need to add the element to the render tree and after we do that we can extract an image and we can convert the image to an icon that can be used to create a marker now we can create a loop and so we iterate through all the elements of the sample data list remember that each element in the list has a widget and a global key so we take these two and we will use the repaint boundary widget and this will create a separate display list or the widget that we want to convert to a marker and if we don't do that we won't be able to take the widget and to convert into an image and now as soon as we finish to prepare this European boundary widget inside the Looper you will see that the three widgets that we have in the sample data list are showing up here on the screen however when the user is using the app we do not want to show this widget like this we simply need to create the instance for this widget however we need to hide them to do so we just need to take this widget and we need to move them outside of the visible area of the app and we can do that using transform.translator and then we need to set up the property of SATA and with offset widget we can simply Define how much we want to move the widget away from their current position on the horizontal and on the vertical axis in this case we will simply take media query.context and we just use the width and the height of the screen multiply by two and as soon as we do that and we have to restart the widget are created so we are preparing the instance of this widget however we don't see them on the screen perfect and now we can continue to The Next Step so what we can do is to go inside the Google Map with Jetta and we can start to set up the markers property so let's just take the markers let's take the value and let's convert them to a setup in any way so far we won't display any marker because the marker map is empty and as well is loaded is equal to falsa to change that let's start to develop the method that you see here at the bottom we will start with on build complete method which is an asynchronous method that will start the process in order to create the markers now before we implement the logic let's invoke this method from the init state and here actually we're only gonna invoke this method after the widgets are rendered on the screen to do so we can use widgetbinding.instance dot add post frame callback in this way we will wait for all the widgets to be built and then we will call the on build completed method and at this point let's see what happens so I'm just gonna add the print statement here and now we can check if the method is getting invoked see that we simply need to Auto restart and open the terminal now let's click the hot restart button and you will see that there's a message appearing in the debug console and this is the print statement so perfect it seems that the home build completed is working fine for now so we can continue let's remove the print statement and then this is an asynchronous method so let's start by using future dot weight here we're gonna run some logic we're gonna wait for it to complete and then we're gonna move to the next step what we do is the following we take the list of sample data we iterate through all the values for each of them as you might expect we're gonna generate one single marker and we will save it into this marker object now to generate the marker we're gonna use the generate markers from widget method which we have not developed yet however for now let's start to pass the data as an input for this and then we use the await keyword because we need to wait for the marker to be ready and then we're gonna save it inside the marker map inside that map we set the marker key equal to the ID of the marker and the value is going to be the marker itself in this way we will have all the markers available inside the map then as soon as we finish to generate the markers we use the set State method in order to update the value of the is loaded Boolean so we take the parameter and we convert it to true so at this point we will display the map now in order to make everything work let's prepare the second method this is an asynchronous method and once it gets resolved it will eventually return a marker as an input it will simply take the map that contain the data for creating one specific marker and implementation for this method is the following as a first thing we take the global key from the sample data and remember that each Global key is associated with other paint boundary widget because that's how we created it inside the build method a few minutes ago then we used the current context in order to understand in which build context object the widget has been built then we use the find render object method in order to retrieve the render object associated with the instance of that widget and this will return a render repaint boundary widget so let's just make sure that we cast everything as this specific widget type now let's just quickly recap what we are doing inside the build method we create a repaint boundary widget and we create one for each combination of global key a widget that we have inside the sample data and now what we're doing next is to retrieve this data and we are saving inside the boundary object and as a next step we need to take this and convert it into an image and we can do data because the render repaint boundary class as the two image method that help us to take the object and to convert it into an image we take a look at the data type of the image return and this is going to be from the dart UI library now once we have the image we can convert it to a byte data type and now let's create a new object of type byte data we can do that because the image class from dark to UI has that specific method that can help us to convert the image to byte data so we can just use that and we need to await for the future to be completed now let's also specify the format and we just use UI dot image byte format.png so we specify that we want to create a PNG image finally we can simply return the marker here let's specify the marker ID which again is going to be equal to the value that we are storing inside the map data so the sample data then we can specify as well which is the position so the latitude and the longitude of the marker and then simply we can take the byte data and we can use them in order to create an icon for the marker to do so we do bitmap descriptor Dot from bytesa and then we simply pass the data however we need to cast the buffer data from the byte data as a uint 8 list perfect once you do data you can return the marker and then we can use the marker inside the unbuilt completed method and as you can see all the markers right now are showing on the screen and they're actually a bit too small but you can customize the size by passing the pixel ratio in the two image method if you pass pixel ratio equal to 2 it will double up the size of the image and as you can see now they match the widget that we created so we have two different custom marker widgets that are also displaying the price they were passing as an input and finally we also have a circle Avatar which is the third map that you see in the list of data so ideally you can convert even other type of widget so as you can see it's working fine and so this is how you create markers from custom widget now let's take a quick break and if you are interested in learning more about how to use Google Maps into your flutter app and as well how to use other Google Maps platform services including places API or Direction API I've also prepared a full course on that do check the video description and you can check the curriculum as well or the course that I prepared if you want to learn more about this specific subject

Channel: Max on Flutter

Views: 10,863

Keywords:

Id: MrnA6vpTXik

Length: 20min 30sec (1230 seconds)

Published: Tue Feb 21 2023