FlutterFlow | JSON Maps Marker Detail and Clickthrough

hey guys welcome back today I want to show you how to deep dive into each individual marker that was a retrieved through API um so as you can see here from the last lesson we built a nearby restaurant search where it will show nearby restaurants however we want to build this further out where we click into each marker and we're able to expand a bottom sheet that allows you to click into the detail of those restaurants for example getting the opening hours and photos so to get started firstly we want to grab the Google Maps in a stack so we can display two things on top of each other next you'll need to add a container so this will contain the information at the bottom and then we're going to center it to the bottom and just they make with of infinity and then we'll add some padding to the bottom let's just say now let's quickly add just simple simply a text of the restaurant name that we want to display the major problem with flood flow when retrieving information through API into a map marker is that when you click each individual marker you flood flow doesn't inherently have the function to identify which marker you've clicked on so for example it doesn't know that I've clicked on this marker with an index of Phi for example from the data so we need to hack the system in a way to tell flutter flow that hey we've clicked on this marker retrieve the information from this marker in order to do this we need to firstly have map Center on move so this is quite important so have this on and then secondly we need to write a custom function which in a very simple term searches the markup based on the map Center so this will tell flutter flow hey look through all these markers which of these markers relate to the center of the map and select that that index of data so let's get started straight to the custom function so here we need to add a new custom function let's call it index marker identifier and then our return value is going to be an integer because we want to know what index it's in and then there are two inputs it's going to be we call it Center marker coordinate and the other one is going to be it's going to be a long type that's the flooded flow that long Center marker and the argument second argument is going to be list of location and that's also going to be that long based on our Json outputs so here we will write a get AI to help us write a set of code so I've got an AI to help us I'm going to write just give a prompt of return index of argument one which is the center in argument two and this is the code and it looks about right the main code is here if the center marker coordinate equals to the coordinate of the list of location return the index of it I'm going to copy that function and we'll save the function and check for error suppose we want to show the restaurant's name in the bottom sheet what we need to do is leverage our custom function we just recently created so firstly we want to put the API results and we want to use the Json path of the name and then what we need to do is identify that index of the Json path for a specific index and here the index will be based on our custom function that we created it was index marker identifier and now input for the center marker is going to be our Global properties sorry not Global properties it was going to be the map current Center and then a list of location is going to be the list of Geo points we use as a pin so here we need to use the custom function again remember that convert our Json into a list of lat long so here we need to convert input the action outputs lat and long so firstly we do the lap latitude and then secondly we do the longitudes based on our API results cool so this basically identifies it what is the index of the pin we just selected and that will pull the name of the restaurant of the pin that we just selected confirm let's make some UI changes where this doesn't show on load um it will only show when we click the pin so let's create a App State we just call it bottom sheet and it's going to be a Boolean so it's yes or no and then on page load we are going to set that as a false so it doesn't show on page load cool and then when we click the PIN so you've got to go to the Google Map widget and when we click the pin on marker tab we want to show the bottom sheet so we're going to show Upstate update App State Boolean set value to true great now we need to set this container here as a conditional value so only displays when the App State is true two true great let's quickly test this out I'll do a refresh so here you can say I'm going to search an eBay restaurant I'm assuming New South Wales click search and then we'll click this exact pin and here you can see the bottom sheet popped up and it says sir Stamford as circular key so this is the restaurant for this pin now we need to add an action when a user clicks into this bottom sheet to go to the detailed view of this restaurant so let's create a detailed page first let's create a blank page very basic restaurant detail and then we're going to pass in a parameter which is how to make a super simple let's just say we'll pass in the name of the restaurant and then we're going to say it's a it's a string and it's required I'm going to confirm and then go back to our map view oh wait uh we're gonna say set this into the name of the parameter we are passing into so what we want to build here is that when a user clicks into this Banner it will go to the restaurant page and pass in the information about the restaurant's name which is set as a parameter on the next on the detailed page so what we need to do here is I'll just quickly copy this formula here the index formula which we created because we'll need it so copy variable okay so when now we're going to set action so when a user clicks into it I want to navigate to the restaurant detail page I'm going to pass in the name of the restaurant so we want to pass in the action outputs need by places API and we want to get the index of the name similarly how we did it for the bottom sheet so we're going to click name and then we'll say item index and a specific index and here we just paste it the formula copied which looks for the marker with clicked and press confirm okay let's test this let's search Sydney New South Wales and we'll click this Stanford a circle Key Restaurant bottom sheet and this will navigate to The Details page showing sir Stanford a circular key so you can further expand this by passing in the hours and other details reviews and photos and other details that you want to bring in so this is how you can show API core information on Google Maps in addition to clicking individual markers to obtain the detail and dip and pass that information to a detailed page on flutterflow remember to like comment or subscribe for more videos on flood flow

Channel: Steven Liu

Views: 2,362

Keywords:

Id: wvyiD314RLA

Length: 9min 29sec (569 seconds)

Published: Thu Aug 31 2023