Flutter Flow : Custom Markers on Google Maps using Supabase

all right so on this video I'll go over how to use super base to show custom markers on Google Maps and so I actually have a a market a Marketplace item I guess you could say on the floter flow Marketplace so it's free of course and yeah so I guess the main unique things that has you can load Network and local set images and so you have a super base rows that you'll pass so you can query this on the actual widget or have a marker or you can query on the actual widget or query it at a higher level so like the the page yeah and they are any top level widgets yeah then you also have a marker action call back and so you can use this to so anytime you click on a marker so let's say you click on this burger icon for Houston hot chicken so when you click on that it will return that row associated with that marker and so that way you save like to page state or widget State and do with it as you need yeah so yep and then so I guess the first thing is of course it's for superbas so you'll need a superbase account let's go so this is so I'll link this here but you superbase to show custom markers on Google Maps um yeah and so you just create a table so first you need to set up super base of course so I'll I have the documentation here and yeah so you just follow um Google's or not Google's flutter flows uh documentation on how to set it up it's pretty straightforward you just sign up and you pull these from the settings it tells you right here actually API URL Anonymous key in the settings integration section yeah you just paste it in your settings on floter Flow and then so in super based after you've done that you go to the table editor mini tab and create a new table call it Place location or whatever you know and Y I'll actually show you here in a minute yeah and then you'll need these columns and so actually instead of lat lat and long LNG an icon name I rename those to latitude longitude and image URL I believe and of course you need Title and description but those will be the same and yeah just make sure the data types are the same and you'll click save and yep and then if you don't have any data you can insert it um here and then yep oh yeah also make sure to set a read policy on the place table and I'll go through it here as well I'll show you I'll show you like on super Bas so it's not like it's not uh complicated yeah and yeah so let's go to super base actually so I have a place and actually so the image URL that we do need longitude and title description you can change these but you just have to change my code once you copy it to your app so once you do like once you click add now and you add it to your project you just have to change that in the code I'll show you how to do that as well yeah anyways you'll need description title image URL longitude latitude this is everything else that they'll give you with like a place picker from flutter flow I mean it's from Google but it's their widget I guess they created so these are the other values it gives you that that's an easy way to add locations as well yeah once you create this enter some data you can go to authentication to set the policies and so you have place here so new policy the first one you can do you can get started quickly and the first one enable read access to everyone so they have these templates you can use so you can say use this template I already have it but I'll go through it and then you click review and then you click save it won't let me do it because of course I have it already and then you also need to do one for enter but it's the same exact thing new policy get started enable enter access for authenticated users and you can also add other checks as well but yeah what else yep that's it and then yeah I believe that's all I missing anything yeah that should be it and then of course if you follow flutter flows documentation let's go back so you go here follow floter flows documentation actually I'll click on it you'll click I thought they would have a screenshot but anyways after you add maybe they do have it here database okay so they walk you how to do all of this as well yeah the video show you how to set it up so I did have screenshots basically you go to settings and flutter flow and then yeah you just add your Anon Anonymous key and API URL to flutter flow yep so once you have this in a project you can go to widget pallet okay and then components and then yeah super base map so you could drag this anywhere I don't want to drag it yeah I have a blank page it's like a blank project and so yep you just need to make a query and so you can do an on initialization so if you click on homepage can do it from action so on page load and if you do do it like that I'll just show you query rows Place do like that you can set action output variable and you can reuse it across the page but yeah we don't need that for this example at least um yep and then so I just have I'm just on the query Tab and I just it's the same thing super base query Place list of rows you can add your filters you're ordering yep for this example I'm just going to keep it simple and yep so yeah once you add the query I'll just remove it just to show you this will say unset and so you'll go to it'll say places rows and this is from homepage query and you'll click super race rows they have these other options but for this example we just stick with all of the items then always check these allow Zoom show Zoom controls yeah feel like you would always need those and then you can set the default Zoom I set it at at 11 and then so here's the onli marker so I'm setting it to Page State I believe from this example let's see so if we go here you have to look at the top level widget on whatever page on yeah anyways let look let's just remove it so look ad field I'll do selected place and it'll be a super base row and it's just one item so we we want to do a list and we'll choose the type of row that it will be confirmed and then so you have misspelled it yeah selected Place go back to the map and I give you this action you can also there's also an action parameter so you click open and I have it to update the page state so let's actually delete that just to show you add action State Management update page State at field selected Place yep and so selected place is the page State variable we just created and we're going to set it to the call back parameter so Place row is the name I give it in the custom widget so we'll set it to that yep and also tell it to rebuild the current page but you can have it not rebuild it depends on your on your use cases but yeah and also here you can see that it says call back and this shows you it just gives you a small details on what this action that you clicked on is via even also tells you how to access the Callback via and yep and so you can run this now when I first made this tutorial back like in November you could not um it wouldn't show up on test mode or run mode now it does but it doesn't render the images and yep yeah I'll just go to the code real quick just to show you all right so we're in the custom code and I'll show you how to let's say you rename the The Columns in super base to change that what it references all it is you just have to search in here for them but so image URL latitude longitude yep so you look for Place question mark dot or place dot that's the fastest way and title description so you just change it depending on whatever you name to call yeah and yeah you can even add another action for so they have a tap on the info window but I didn't do that because I don't see the point yet but yeah you could change with it returns but I don't know I couldn't really think of anything else that made the most sense yeah let's see yep and now I'll just download it and show you what it looks like or actually there's one more thing so you also want to create another page like a blank page and add like flutters actual map so you just search map and drag and drop that here and then also like like any images that you'll use because on the custom any custom thing it won't add that to the project unless there's a page that's actually using that and so this is called I don't really use these okay yeah images.png so if you remove it from this page then you want to go be able to use it you can use Network images so you don't have to add them here be when you do add it to the database if you're adding local images you'll just add images.png that's all you add yep and the reason we're adding Google Maps is it won't add the keys unless it sees it on the page as well so you don't have to connect the page or anything but that's just so flutter flow sets up other things for you but yeah yeah all right so I always use Android Studio I'm just used to that but it also is more powerful but it does use more like resources on your computer yeah when you first on you have flutter and everything set up on your thing on your computer get dependencies this is through intell J Android Studio it's pretty similar but you can use the flutter flow Mac app and they'll also show you how to run it locally and these are showing up now because I removed the project URL from super base and the Google Maps configuration and that's why it's giving those issues yeah actually I can close this we don't really need and yeah I'll just run this real quick or actually I need to run I'll stop this and I'll I'll bring up the emulator and I'll run this that way you don't have to sit through that but yeah all right so the app is loading right now and we'll just see and so I have this in Arizona that's why I said the center oh I don't believe I mentioned that but anyways there's parameters to set the center and the easy way to find that is just to go on Google and search like Arizona Tempe Ariz I don't know how to pronounce that my bad if I don't say it right but what ever city and state you're looking for and there say Center coordinates or latitude longitude yeah this is the Houston hot chicken and this is H basil these are the actual locations but yep and so you'll see both of those locations here but title and description name I don't remember I believe I had it for something else before I used it for this example but yeah so y that's pretty much it and yeah when you do click it it will set it to State and you can reuse it I'll make another video doing something with that maybe saving it to a table or something yeah I believe that's it I guess one more thing I'll show you is so I do have Community Showcase I do have it for Firebase I didn't put it on the same Marketplace item I guess you can say because the thing is just like it was just showing those errors on flutter flow it will show the same errors um if you're maybe only using Firebase or only use base that's why I didn't put want to put one or that's why I only put one on two different things but they're pretty much the same code besides the parameters they pretty much work yeah and then I'll have another video for this but they haven't improved this been a couple days so I don't know if they're seeing that saying it's the same thing basically yeah I'll link all of the all of this this is also on my medium Mark was also on here but I'll link this YouTube video on there as well and then o link all of these articles under this YouTube video description so this is the article that's on there yeah and also shows it shows you how to do it from scratch this is before it was approved yeah yeah that's it thanks

Channel: Chris Coffee

Views: 732

Keywords: flutter, flutter tutorial, google maps, google maps en flutterflow, chat app with firebase flutter, conectando flutterflow y google maps, flutter google maps, flutter google map sdk, flutter google maps current location, flutter tutorial for beginners, chat app with flutter, flutter google maps and live location tracking, appwrite with flutter, flutter with appwrite, get user location in flutter, flutter mapas, como configurar google maps en flutterflow, flutter location

Id: 45B-TQoYeFE

Length: 14min 13sec (853 seconds)

Published: Sun Mar 17 2024