Build Location based apps with Google Maps in FlutterFlow.

yeah anyway nice nice well everybody yeah congrats on making it to Thursday um right because we need congratulations for that because uh of course 2023. um my gosh long week lots of stuff going on uh lots of fun stuff flutter Flow side yeah so much we're gearing up for New York City live in person ffdc Michael number one wow I'm into ffdc meet in person come on yes now I'm pumped for that if you uh didn't see Michael I have quite the hilarious at least in my opinion competition with his uh his wife yeah partner um I don't know what the correct term would be on the live stream I guess partner I should make it more ice cream also yeah yes but that's fantastic let's go wow um we're gonna try to make a map of where people are coming from yeah ffdc's who are excited very excited it's going to be fun yeah we're looking forward to it so lots of fun stuff happening lots of new features coming um that are going to be very cool help everybody build um in a nice a very timely uh hello to I believe is I'm gonna mispronounce it Carol Carol Carol yeah uh had a great suggestion or comment question on Twitter I don't know if you saw that uh Andrew regarding this views and reordering this views so that's very timely I'm just I commented back oh reordering list views oh I think the question was how do we reorder list views in an easy way and I said wow that's very timely of a question oh yeah hopefully I don't build in beta and show anything off that may be coming yeah I am an app today or that's what I was gonna um yeah let's plan on just building that we just implemented canvas kit for everybody so um the flutter flutter flow should be faster for everybody which is great Andrew Birchfield welcome he's from Texas I have to always welcome to Texas guys you know when Daniel gets on here I'll welcome him as well I just met with a few flutter flowers in San Antonio yesterday actually oh nice so that's awesome that's very exciting yeah a little startup that uh we have we have you know San Antonio just so you guys know a little Texas um history or or fun facts San Antonio is the seventh largest city in the United States wild and mind-blowing to me yeah I never believed it I was like no no it was maybe maybe in the past no it is like one one and a half million people I guess is the seventh largest city so wow anyways but that being said um we actually have a tech Hub here which is cool like we have little little place called geekdom downtown they do like a bunch of um startup incubators and they have a little funding thing it's sort of a spin-off of Rackspace Rackspace is a huge cloud storage so that started in San Antonio so that's our little like San that's our Tech you know that's our our Tech sector um nice but one of these startups was like yeah we want to build our app on flutter and we want to hear about flutter flow and so like I just met him and uh we sort of went through like oh yeah this is how you they're using templates uh love love to see the templates being used um this is how you hook up your Firebase this is how you hook up the data and I just ran them through some stuff and I'm gonna meet with them later down the road um and try to consult them so that's a lot of fun I I enjoy doing that in person I don't always get the chance um and my time is very limited to do those sort of things but it's a lot of fun I told them to join this live stream because they're they're doing it they're doing an on-demand service application so awesome um it's awesome yeah where they're gonna very timely very very timely yeah Puja um thank you this t-shirt is an Ode to you you're the one that came up with it who just said love the T-shirt um so this is pooja's design I just sort of implemented our own typography to it and that was it all right cool well today during our live stream um I wanted to go over something that is annoying probably one of the worst widgets in flutter flow um which we can say but there's still plenty of functionality okay so look I like to be honest um but I also I want to show off what you can still do with flutter flow and the map Widget the Google Maps widget um there's a lot of limitations we would love to do a lot more we were just looking at some of the stats around the the maps widget and the number one custom widget utilized is a poly lines um package that you know where people can draw on maps essentially so you know people utilize it people really like they want more integration with Google Maps in their flutter flow applications so we are working on improving that I think the number one wish list item is custom map markers on the community yes so yes for sure we've talked about that we've scoped it a little bit I don't say much um but yeah I just wanted to Showcase I think it's still really cool what you can do I'm going to share my screen if you were having to go set this off all by yourself and pass data from the map over to right like all that stuff so totally totally crazy so I'm gonna I'm gonna do a couple things I'm gonna start my my test mode um so we can do this I put this all together so I sort of built the application and and made sure it worked I was telling will I was like yeah I was building it last night and as I was building it I was like oh I don't know if we're gonna be able to do this like I'm running into some problems here and problems there but I treble shot it trouble shot is that how you say it troubleshooting shoot it troubleshooted yeah yeah I did some debugging they'll figure it out so um yeah so Google Maps right whenever you drag in your Google Maps widget onto your page I'm gonna share your screen oh yeah thank you hopefully that works yeah whenever you share your uh whenever you drag a map widget onto your page you'll get some errors that says like please Implement your API Keys okay so when you do that all you have to do is come over here go down to this Google Maps I wanted to not show those API keys but anyways please just forget do not remember do not pause um yeah uh all you have to do is copy and paste some API Keys into this section for Android iOS and web and the way you do that easiest way right you can go to docs which will lead you to um this little guy I hope yeah this this little documentation page this documentation page is very well written it sort of walks you through this stuff some of these screenshots are older um but it still leads you to the same thing right you can come over here to your API library and we already have Maps right here so we have Maps for Android iOS JavaScript and then we're going to utilize the places API because we are going to be creating locations right so we need to places so we can search the places um so I did did this right you enable this um you enable that guy you enable this guy you enable the iOS and then you can come over to your credentials and you can grab these API Keys okay so you can you can just copy and paste these over to your flutter flow project and there's just there's three inputs here you just copy and paste those keys in there and you should be good to go I like I said I just did that last night so nice that process works and it is a little Annoying I think like there's an a newer um places API or something and like I had the old one uh activated and not the new one but then once I activated the new one um everything worked so nice um but in the future that's something we're able to automate depending on how you set up your Firebase and things like that um and one quick thing I did want to note that I noticed when you showed docs was we are working through the docs we got a lot of requests um noting the issue with the gifs or videos how you couldn't like stop and start videos so you'd have to sit there and watch so the docs are being replaced with loom videos so you can go through pause them whenever you want um just so you know so expect that through all the docs just something to note and I think you're following the Google Maps dude and that's great because Loom gives you analytics on what's being viewed so for sure don't game the system anybody but uh you know it gives us ideas about what people are looking up what people are struggling with for sure all that fun stuff so yeah so this application and part of this live stream will be building out some of the ux around interacting with maps because you can do so many cool things with maps right like you can obviously you can view um a list of of map points right you can click on a map point and get more details about that thing how do you do that do you do it on a separate page do you do it on a bottom sheet do you show a list view do you have a map analyst view um all of these things and I want to just go through that so some of this will be building um I have in my collections right I have locations and I just call it locations um it could be anything it could be gas stations or gyms or uh hot design spots coffee shops you know work work remote places um it could be anything you want so I have locations here and obviously important thing is location address just a lat long um and then I have some name description stuff I have users right so in order to create anything in Firebase you need users and you need authentication so I have both of those things um and then this little guy is just where we're going to create locations and I'll go through that process um and then we're going to see the locations here what I would like to do is also as we validate that this works right the vet then build out some bottom sheets or custom dialogues we could probably do both I also want to showcase some long press actions you know maybe like some animations and cool stuff I don't know we'll see uh we'll see how much time we have but in order to get your locations right so we have locations here I've already pre-created a few locations but in order to feed that data into Google Maps we obviously need to do a back-end query right so we're going to just do locations list of documents um I'm gonna do that and that gives us the ability to feed that the marker documents right I think this starts out at none so we'll just do that we don't want that we want multiple so we're going to do multiple we're going to do a marker type of document here right and we're going to just select this documents list from our backend call right there and then also what you want to do is you want to set the initial location okay you can you can set this from the the user's current location um or what I did was for the sake of this demo I just did the first document item index you know the first created document location so it's just going to zoom in on that when we come up to the map um you have a few different abilities over here we obviously want allow interacting with the map we want allow zooming um we'll show the zoom buttons we could hide them if we wanted to put like a Fab down here or something um we could hide them for now but that's that um we're just going to validate that this all works so I'm just going to come in here and I think I can sign in yes I'm having trouble with this last night let's see Andrew all right dude I know this there it is a beautiful login screen too oh thank you it's you know one of those templates you just automatically utilize didn't have to do anything um actually that one I need to fix I I used it and I was like oh there's some stuff that's not working here or it doesn't it just doesn't look as good so all right we have our two pages um we have the ability to create a location so we can just do this and we'll name it uh live stream demo site um this is a really cool awesome Place everybody should form two all right we're gonna upload a screenshot um we'll just do like we'll do this this is a really nice screenshot um boom we're gonna select a location so we have that places API um I always like searching my favorite coffee shops in San Antonio so I'm gonna do right all right coffee San Antonio right there perfect we have bright coffee is the name you could also like you don't have to have a like location name you could grab the location name from the places API and then we're going to create that location location created cool okay we have it right here awesome but we don't have any interaction right we're just uh we have two locations on the map now and so now what we want to do is create a little bottom sheet when you click on this map icon we want some more details to pop up let's come back over here and it's it's wonderful right like it's very easy to do this um all you have to do is action and then on marker tap right we're just gonna trigger a bottom sheet you don't have that bottom sheet yet so let's go ahead and create that bottom sheet um ad and I'm just doing command K right I just want to really emphasize that command K and components um see do we have anything that works not really but we could do I get start with this one as now we'll start with this one as a base boom all right um location to answer your quick question while he's creating that bottom sheet the map box static widget um typically I would use that if you're planning to only show One location for example maybe you had an about page for uh a restaurant app right and you just wanted to show the static location of the one restaurant or whatever it is you could just use the matbok widget widget Mac Wow map box widget to just pop that in there right um to show just for reference where that that location is I'm pretty sure you can adjust the marker color as well as a custom marker image I'm pretty sure so um that is a benefit there again if you just want to showcase on a map more of like a stylistic choice versus the Google Maps which is more interactive than maybe more useful to a user if they're trying to like navigate to a location or see more specific location details yep yeah that's that's an excellent point so uh you can do some small editing of the Google Maps widget and then also the static map widget static map has more customization options because map box is better um More Design friendly um but less functionality in actual flutter flow so we're just going to we're going to create this little guy we're going to do 12 and 12. cool um yeah and then we're going to feed a location right we have a component parameter here and we are just going to say location ref you can do it you can name it however you want this makes sense to me cool and then we're just going to feed this data in location ref get property document uh cover image perfect and I'm going to do name here and all of our places will have names for now but let's go ahead and set a default location name and description I mean this is taking us way less actually than than the hour but this is gonna be fun it's gonna be um there's that and then maybe we can even do the full address let's just try that let's let's see what we get when we do the the location address we'll see I don't know I don't know what this I think this is gonna you know what I think I need to save the address anyways we'll do that later we'll do that later okay so we have this little guy I'm gonna remove that and I'm just gonna drag this in I'm gonna say close this is just gonna close our bottom sheet cool we will use a bottom sheet I think there's there's different things that we can do I wanna showcase some some crazy functionality what I want to do is create a line Target and long press and have like actions come up you know like animated that would have been cool like Pinterest which we may do anyways but let's go ahead let's set this up select the map it's interesting because you could and then there's so many sneaky ways like the hero animation on components there's so many cool things you can do we'll do it we'll do it we'll create a list View and we'll showcase some some fun stuff so we're just going to add an action on marker tap we're going to search Bottom sheet we're going to show that bottom sheet um select the component um we will need I mean you don't have to have the accent or the the overlay you could do it without I guess um you could also design that however you want but we're just going to pass that location that marker document boom current index sweet enable drag because we want to close it um cool let's do that and then let's come over to our test mode and I'll share this tab I love the restream allows you to do that just Easy Share the tab cool nice and another good question here is that's loading up can you separate the Latin longitude I think you could write a custom function to do so just by yeah planting in the lat long and then asking um the you know Chad GPT companion essentially to separate it so that should be an easy solution to fix that yeah you can totally do that actually on two of our uh we've done our Claire has done like two mapping applications applications and they they do that on both of them so nice totally able to all right so now we have these locations right we can click one and then we get cool a little that's awesome that looks great yeah we passed the real data in the map view it's sort of weird like you can still drag it and stuff which is a little Annoying um interesting yeah it's a little Annoying I tried to adjust it where you couldn't do that like you block it essentially but it's just nothing really worked it might be a a dart issue because the same thing happens with YouTube videos I don't know if you've ever experienced that where you can click through any content one of YouTube videos in the background nice um I think it's just a dart cool well let's do a few more things we have time right I mean we have 40 more minutes we did that in 20. sort of crazy that you were able to do that in 20 minutes nice um I mean it took me maybe another 20 minutes to set up the create form and do all that stuff um but we were able to sort of synthesize that down very easily utilize the Google Map widget in 20 minutes very cool um so let's go ahead a very common thing within map view view well yeah with maps is also a list view so let's go ahead and Implement a list view we can do that of one of two ways you can do a totally separate page we're just going to do conditional visibility so let's go ahead and we can wrap this little guy in a conditional Builder do we have that wrap now okay we'll just um I'm gonna do that for now I cut it out we're gonna do conditional Builder boom and we'll just paste it back in it looks like we're still seeing your test screen just yet oh my gosh it's terrible my bad guys nice all right there it is let's see the Google Map cannot uh detect altitude I think that would actually be a device specific feature even then I don't I'm not entirely sure I don't think that's a um necessarily something that comes out of the box with Google unfortunately right I think Apple has an altitude detector but again that that's going to be a little Beyond scope of a of a tool like flutter flow um at least at this stage right that's a pretty niche but you could always look on Pub Dev and see if there's a package that supports that the amazing thing about flutter oh totally totally what I'm doing here um as you're talking and you can even answer questions um yeah like Andrew Birchfield you can definitely use super bass um well can you use super basically this I'm sure you can you're just feeding in a list of documents yeah you can even do an API yeah yeah because you're just you can fill it yeah yeah it's dynamically filling the data yeah I haven't even touched Super Bass so I probably need to implement it more but I just don't so um all right show map and I just created a page State show map and I validated that with just an action on page load to set the page State when you load it sometimes it produces a error right when you don't do that and then we'll just do this we're going to set this condition show this condition on page State show map equals true all right yeah cool and then we could let's see we can do a Fab or we could do an icon up here or we could do a Flo we could wrap this in a stack um I will just do a Fab for now Fab is a floating action button we'll just throw it down there and we will do a little icon in here drag a little icon and we're going to do a list View I'm going to make it our informational which is always white and we'll do 32. and then all we're going to do here let's see every condition in the condition Builder must have a child all right we'll find dude I'll give you a child give you a child that's a little weird all right dragging a list view here oh nice yeah this is always such a clean UI with the Fab oh yeah there you can just tap and toggle between it always looks so clean I agree all right we're gonna just do a list view here box Shadow I mean we could just drag in a um template I'm sure we have a location card that we can utilize here that just has an image title and let's see card something like this right here yeah or here and we'll do that boom we're just gonna utilize that cool and it's going to adjust to my little theme because I have that widget use my theme on so we're just going to do that um and then we can make this list View oh you know what let's go ahead and do this now that we have this conditional Builder since we want to feed in the same data to the list View and the map view let's go ahead and up that uh back in call and not do it on the map but let's do it on the conditional Builder that way we can feed that data into both places pretty good save you some reads that is a great idea and we'll do just paste that perfect sick yeah you can like cache all the data here pretty much yeah yeah I mean say locations documents oh come on I will I'll we'll do that in a second let's see if this actually works I hope um or we could just do the cash yeah um Okay Google Maps all right we're back to that so let's let's show that in the Builder all right marker drop down location documents we still get that perfect all right so that hey that's a good thing you learn let's not do that we're just gonna keep that back in column in Google Maps huh but we will we will cash it app level query name locations we're not every time we trigger that we won't like new read new read new read so awesome cool we could also do like a single time a query but we have that let's come over here to the list View and we'll just paste that back and call there as well to do it's crazy too the number of people that are interested in building these types of applications and they don't recognize how easy it is to to get started with something like this right so many people are interested in building um I know one of our sample apps the basketball court Finder right this can extend to any subject any topic right uh College finder coffee shop finder like so many things so uh it just goes to show again how quick you could set this up um given maybe you spent 20 30 minutes outside of this video just setting up the project itself yeah yep exactly and for IOS and Android and web at the same time yeah exactly which is pretty cool yeah I told that the the company I met with last night I was like guys you can like you can have an app and you could have a website and people could go to the website and you know create the requests and then download the app whenever they want to track stuff you know like you could you could force them to download the app if you wanted to uh all sorts of things we're in the two 70 ellipses besides that okay cool and then last thing we want to do we have the list View and the map view we want to update the page state with this little guy um so let's go ahead and do that state and then I think we're gonna actually what we want to do is we want a conditional Builder because we have to have that for a toggle wool so this is how this is how you do that within one action right you set a condition sync condition is if page state show map equal to true and you don't even need to use that condition if you didn't want to just the same up a click yeah you could um set false and then boom set to Trio so if it's false we're going to set it to true cool also we're gonna we're gonna update this oh man I was hoping that we could just set this icon from variable but I'm I'm thinking of components so let's see if we can you can just wrap that aggregor conditional yeah I'm gonna I do this oh yeah sick cool awesome all right and then we're gonna do we're gonna copy this condition right gonna do that and we're just going to bring it over here to this conditional Builder copy and paste it oh awesome and then we'll do that and a new icon there nice that's great a little map here and then maybe what we want maybe maybe what we want is a little animation on page load let's see if we can do that let's let's do a little fade let's do a little scale I don't need hide before animating why are you setting up those animations demons are the great question do you guys have any info about Dynamic links in the future uh given Firebase is going to shut them down so they are going to be shut down in um on August 25th of 2025 so you do have a considerable amount of time now that said unfortunately Firebase right they came out and said that they don't have any plan for a replacement or anything there and I think that's going to continue to evolve as um all of the specific devices you know uh expand upon their app stores and things there so it'll either be a third party solution or something that we'll have to work on internally most likely I don't foresee you know Google or or Firebase just coming out with a solution right at the end of the day Google might be trying to push Google Play Store applications a bit more given that's their their business model so we'll keep you all updated but nothing to worry about within the next several months I would argue um nothing's going to be changing yep all right so we have um we have this little guy and we have this little map icon not bad not bad huh Beautiful beat up animation too oh I like the spin yeah oh I didn't even do it on the here I'm gonna do it on the other one nice I I swear I had it on that I do have it I do have it okay let's see if maybe it's just an instant reload that needs to happen um a little spin on the icon all added I have one minute left on this test mode so we're gonna have to do a new one um but I think this is a pretty common oh sad my yeah it is very common uh setup though yeah like you could build this so quickly it's unbelievable yeah I mean we did it in about 35 minutes you know um we could and on this list view maybe this one will do yeah we'll do like a long press or something changes over to light mode um you know and you could also you don't have to do if you wanted this uh view right the list view or the map view to be based on um like you're like if it want to be persistent right you could just instead of doing this on a page view you do this on an app state right instead so that would be one way to sort of set things up yeah nice yeah all right cool that that works Andrew I'd love your opinion on something too because I know like what we built was a pretty core component of most applications um I feel like in flutter flow and and based on your experience let me know what you think but I would say there are probably five to six key things that you need to learn that essentially every app that you build will have them right whether it's this map functionality whether it's creating a basic onboarding flow whether that's creating you know like knowing how to do manage photo uploads there are probably maybe I shouldn't say five to six maybe there are like 10 things yeah that every app that you would want to build unless it's something crazy you know never before seen they pretty much all have the same thing which is really awesome because I think as soon as you learn those key skills in flutterfly you can pretty much build any app you want very totally you can even use things from other projects you can utilize these templates extremely quickly because you know how to set all these things up so yeah one one of those things I think that people don't uh utilize enough and mainly because we don't tell them enough I I try to go over it on uh our live streams and I've done it before but I need to actually like put together a little video and best practices for themes so you know to help you guys save a lot of time in adjusting colors after utilizing our templates and stuff we've set up our themes in a very specific way um that is intuitive to me but maybe not to everybody else because we don't explain it but uh when you come to your themes we have these 12 color or 16 colors right I can count um 16 colors for you to use and these eight over here are very specific so I have six brand colors and the top three are my primary um opacity right and then my accent one two and three are that same one with a little bit of like 30 opacity and you can change these to a you can adjust these however you want they're not extremely important but they typically do relate to one another these you know these two and these two and these two relate to one another now I switched that up when I get over here um because this alternate I utilize for my line colors or another neutral color essentially um so these are my dividers these are my input borders these are my button borders um anytime I use a line or a divider it's my alternate color right and this is a slightly darker gray than my background color same thing with accent four accent four is going to be my overlay so it's going to be probably my secondary background or primary background at 70 opacity so that's when I have a bottom sheet or when I have um a dialogue come up I have an overlay beyond Behind there that shows me that I I'm not interacting with the content behind that um that view uh then we have obviously primary secondary text primary secondary background please utilize these correctly um they're pretty straightforward um your semantic colors are just for your um forms typically you can utilize them however you want really um this info one this is another important one I keep it white at all times I use this info button for my button text right so like any primary button right so like if I come to my theme widgets these primary buttons this has my white text and I also apply them here and you don't have to you can set this stuff up however this is how I've set up all of our themes out of flutter flow um title medium and title small have that info so these could be your button texts um you can make this title large as well the button text whatever you want however you utilize these guys up here um but I have my label text be all gray 16 14 12 and then my body be my primary text 16 14 12. um so if you set up your theme correctly right and you utilize colors basically in the way that we do and you can add custom colors that's the benefit of flutter flowing matters many custom colors as you want um but if you do this stuff correctly this base stuff correctly whenever you drag in a theme widget like this guy it'll just adapt to your theme and you don't have to like drag it in and then be like oh this you know it doesn't work in light and dark mode or I need I need this is a blue color and you know I wanted to be my primary color you don't have to worry about that this is already set up so that's a trick uh that would save you a lot of time had a great suggestion there too maybe we put a little information icon um next to all the titles right like the semantic colors so that way users know what are semantic colors used for yeah documentation we probably do a link to documentation that just sort of outlines what I just went over because we do need to do those I mean seriously um I think it's going to be very helpful so that's one of them just utilizing themes correctly any application you want it to look consistent you want your brand colors to come through you want to utilize neutral colors correctly these are basic UI ux like principles and it's not just developers just designers or just experienced or just beginners everybody needs to know this these are these are principles that um when you when you implement these things your applications will look more professional your users will be more at home with them they'll they'll be a little more intuitive maybe not a lot more intuitive but they'll be a little more intuitive and a little more consistent and look you know if you're looking to scale an app to sell it you want that professional look and feel so this is what we do for a living I love doing this um but yeah little things like that so keeping in line with the the themes uh and then be understanding the basics of hooking up data I would I would say that's another one right has data whether you grab it from Super Bass apis or Firebase um understanding the basics of that is definitely important I think one of the one of the things I've experienced a lot is every single dialogue or almost every single dialogue that I create needs a new version and an edit version where the new version like they create new is empty and then the edit it's like oh I gotta add a parameter and then I gotta add all the things I mean it's just like you just get so used to it but the number of times you have to do that anytime you have a dialogue I dude I agree with you I am trying um so I'm reading this book um called Automation and it's the guy from jotform he sort of like he wrote a book about how to automate processes automating your everyday life applying no code principles to life and I was like man this is great it's not like a brilliant read or anything but the guy has a lot of like really good generic thoughts not generic I'm sorry uh good thoughts that are like once you think about them you're like oh yeah duh that obviously like what do I do a lot of and that was the first scene that came to mind I was like I hate creating a create form and then an edit form and then you know hooking that data up and I was like confirmation yeah everything needs a three automate that yeah like and and you have to do it every single time like hooking up data in flutter flow dude okay is is great it is great but when you do it a lot you're like oh like maybe if we could make this process better it helped me think about from a product side how do I improve this process so I'm going over with the developers on how do we can improve that process so in the future hopefully it'll be easier to connect data to your application and hopefully what I would like to do is create some we have template screens but if we had like template packages or template bundles where you had like this screen right maybe a map list view with a Details page and they were all linked you know nice to Firebase or Super Bass they're all linked to data right and then you could essentially just drag it in yeah you can just drag it in and then boom it automatically works you know something like that uh same thing with authentication like any authentication process has a create screen a login screen a forgot password maybe a create profile you know that's four screens that we have templates for but you still have to sort of hook them up yeah like setting up all the sign-in and sign up processes yeah that's a great that's a very great Point um just more Innovation I guess coming to flutter flow but I think you brought up some great points right like the key here is really focus on some of the fundamental things because so many people just jump right into a project start throwing things on the canvas and they're like wait a minute I thought this was supposed to be quick and easy and it's like wait you missed the entire Point there's you know learn the first like five things go watch those butterflow University videos and yep um from there you'll be able to build just as fast as well maybe not as fast but pretty close to Andrew and I right yeah um when it comes to flutter flow yeah and that's that's the thing I love like I was telling um one of the people I was meeting with last night they want to build like an insurance tool and it's like oh yeah like what you want the basis of what you want is just like a form that people can fill out feed a fill a bunch of data now it's like that part yeah you can do that in flutter flow but it's insurance so you have to like meet up with privacy requirements and your database has to be secure and all of these things like I was like that is hard like that is that is going to take you the majority of your time and money doing that like and that's a good problem too right yeah like that's good that people can focus on the more challenging parts of their business right like they don't have to seek out a Dev Agency for extra they don't have to worry about like they can build the core fundamental of their business and focus on the hard part yep yeah that was that was my pitch like the other startup was that on-demand Services app they were like oh so like when do we have to pay for flutter flow I was like dude build whatever you want right now pay when you deploy right I was like you can do I mean we set it up you can do whatever you want I don't suggest that I think flutter flow is an amazing CMS tool that allows you to just deploy whenever like oh you have a bug fix boom deploy like never in the history of app development has that been the case it's always been like hey we have a bug all right send it to the development team sometimes it's offshore right so like who knows when they're gonna get back to you um they send it back you know test test and they're like hey could you deploy it and then there's some back and forth and then it's like finally deployed three days later yeah what I can do that in like 10 minutes now you know or 40 really to because it takes time to compile and send to the App Store but um it's amazing what's possible for sure anyways um all right so that's the basic uh basics of maps and yeah maps and data and then a little bit of interaction um we could do a few different let's see if we can do a few different um implementations of this interaction right this is sort of this one sort of sucks but um if I had to be honest with you um can we try a can we try one where there's a card halfway hidden at the bottom of the screen and then when you click on a place the card like pops up and chose the place like highs and then pops up it would just be a slide it would just be a slide animation right okay maybe all right my guy you know what we can do that we can do that um it's going to be the same concept all right let's see yeah first all right we have like what 13 minutes you want to do this in 13 minutes you want to do it yeah you could yeah let's do it 13 minutes okay what we're gonna do um I need to make sure that this let's just say like 800 for now there's a great two funny well one funny question uh but I'll read it right after this other question how do we create a scrollable row at the bottom of the map screen uh you would just put the map in a column and put the row or you could do a stack yeah the row on top of the okay and then Andrew's comment what's a fair price for flutter flow to designers versus developers has the industry been created that case study yet so we've talked about maybe putting out a case study uh and that's something we might be working on we're working on a new agency experts program and that will really incorporate a ton of like information around that what we've seen as standard too so something to look forward to in the future sorry I'm just I'm doing a little responsive thing because I think it's a lot more fun on responsive things but uh it doesn't have to be um oh search for the thing you've done me cool and uh Okay then if you want the map to focus on the current card in the row then that's going to be pretty tricky you could try doing a page view and the page view would allow you to swipe through cards but then you could set to where like when you tap on the map it would go to the index in the page view that's pretty tricky stuff um but you might be able to do that yeah it is it is tricky um I was just I had to do that or somebody had asked me the same thing and I was like oh yeah that's could be done I guess um but it it's really hard like you have to do a page view or something because we don't have scroll to write like a specific thing like we have a scroll to the beginning or end of a list page view you could do it um you just scroll to the index but yeah let's go ahead and do the thing you want to do um which is I'm going to close up some of these guys um and so we want to wrap this container in a stack right because you're going to need a stack am I correct yep yeah and I was just thinking you put all you need to do is put a container and then just apply the initial state of the animation apply the initial state of the animation and just start it and reverse It Whatever a thing is clicked on yeah I think maybe we'll see we'll see let's go ahead and um set this this and uh maybe we'll make it like 4 30 right also Dimitar is challenging us can I challenge you to build a project in a live session versus one on one to see who will create the project faster better and prettier wow that's tough because Dimitar might sneak in some custom code and that's where we oh dude yeah no on um Dimitar uh we don't compete okay the the best um philosophy around a good team is that there's no competition we we help each other out so um yeah stop trying to True Brew some oh look at this huh I'm increasing the size by uh up and down arrows wait a minute I just do that oh yeah dude look at that height on the far right wait how are you having it do every 10 or does it uh shift up down whoa I mean you know I'm just saying it's live go try it yourself um everybody's at Google Cloud next so the email Mark the email that was supposed to go out last week is just like sitting in the queue just sitting there like done people are just like I don't know anyways okay uh I apologize I digress um we have this home page and you want it to sit maybe we'll sit in the middle down here we'll add a a little animation on it I think you need on action trigger yeah yeah I got you I got you slide so we'll do uh 400 or 300. um maybe we want the vertical slide to be like the initial position of the vertical slide yeah so this is uh 200 I think this is 430 so let's do that and then let's see what it looks like yeah okay so maybe we do 370. okay so it's it's like kind of floating down there a little bit you know what um yeah we're gonna have to uh I think it's still under the page maybe do like two 200. well we'll do three throw okay at 3 30. there it is huh okay maybe we'll do this delay watch this yeah come on okay okay that's sick yeah and then what you could do is trigger it on the yeah on top of the map this is gonna be sweet so we're gonna do this but one thing we need to do right we don't just want to have a container flow top with nothing inside of it so what we will do is we will take this little card I'm just gonna hopefully copy it Maybe oh look at this oh freaking love it so now you can toggle on and off oh you can there yeah come on come on fire floats keeps getting better and better man I know that's crazy I know so we're gonna adjust this card we're gonna do the same thing that um we did in the task thing last time so we're going to adjust this uh we're gonna do 120 we'll do 12 pixels underneath all right and then we're gonna this container oh okay I'll just do that perfect all right we're gonna set up a page date right with that data so we're going to say location ref it'll be uh document um location boom and then we'll just set this stuff from that so page date location reference get property document cover image and then what we'll want to do what we'll have to do we'll have to wrap this guy in a column because for some reason that just there's some there's some funkiness that happens um but anyways condition yeah essentially so location reference is set we only want this to show when it's set [Music] um and the problem with this well the problem with this is if nothing is selected what do you do with this card you know so like you have to yeah you know maybe a maybe an x on here we probably need an x on here where we um what do you mean I'll show you I'll show you okay well can you just set uh like default variable values that way if there's nothing selected it'll just be like no location selected uh I just meant the card itself no no the animation that we do so that's going to bring it up but when there's no um thing selected how do we how do we make the card go back down like if you wanna I'll show you I'll show you okay yeah so we'll do that I'm just gonna do this little guy here description really awesome okay and we're going to obviously make this a little smaller [Music] um bring it down to like this all right so 230 . 30 and then we need to set that animation to like 170. or maybe 90. okay and then we have this set only be shown when the location ref is set okay okay and so you have that fade in can you when you have that column that's conditionally shown in height can you let it fade in oh yeah totally my guy like 100 that way it doesn't just appear yeah boom nice yeah we got you nice tied before yeah yeah or however animating on page load it should oh it'll be fine all right so when it when it's shown um now we need to adjust this map view action and instead of this we're gonna remove this little guy and we're going to say anime right nice animation I want to bring this little guy up start animation unblocking Zoom okay and then we want us we want to update the page day page state I want to set this location ref with the document and I think you'll need this set you'll need to update the widget State first before you animate the card up right because we want the call we want this thing set before we start animating yeah yeah let's do that let's do that and then let's go ahead you want to do like a timer just do like a three second timer it'll go back down for now I mean yeah we could we could I'm just trying to think of something yeah I think having an implied um clothes or something would work I like that yeah better you know yeah where just like an X nice yeah just like a little man I I adjusted this and I should have adjusted it to be like this instead but close [Music] do that we'll make it and then also we're just gonna adjust this um it'll move this name up no no just make a container a little taller yeah we'll make that container a little taller yeah because you might have to worry about the height of the container now for the animation totally right total we need to adjust that as well so sorry guys thanks for uh bearing with us as we do this cool cool all right let's see hopefully this test mode still works oh we need to uh I think we need to set the initial State revert yeah yeah do you have it in reverse animating no I do X yeah reverse animation anime and into one I love this reverse yeah so I don't know what will happen if we click on multiple like we haven't set that up like it would probably if you tapped on another one or something you'd have to like set it down but I mean yeah for the sake of this okay so we have our card down here oh oh let me let me share this tab it worked just you know I have a card down here so oh come on sick I was thinking like a postcard or something like imagine you like wanted to click on locations to pop up a postcard like you would just tap the location and the postcard pops up from the bottom and then it goes back down or something I would just do a dialogue myself yeah yeah no that's this is a little crazy that's yeah yeah fun it is fun um cool let's see oh and it's also nice that It Centers the map you know yeah I wonder it's like it's nice okay we just need to make this a little bigger sweet took the x does it do anything oh yeah nice yeah look come on cool that's pretty that's pretty sweet yeah pretty sweet yeah there's all right we've been I know there's we have 52 people in the live stream right now more people have joined at the very end right before yeah but many people are asking for a hint of of a list but I don't know if we should show up to them oh no no let's do it I you know what look will and I are pretty busy um but a list view of items right that's that's what you guys want to see you just want to see a scrollable list right here we may have to change it we have to change up our design because we have a Fab down here but we'll do a list for you it's not that hard no it's not that hard can you do that right click replace on the column view that you have yeah yeah we could let's see if this works on a on desktop yeah oh no look at that that's sweet that's awesome pretty sick okay all right so let's say oh man I'm just gonna have to duplicate this page because if you wanted to right oh you just don't want to mess it up yeah yeah I don't want to mess it up exactly sure that's fair we'll say home map um we'll do that we're gonna remove this little guy yeah we're just gonna because really what you want you do not switch to the other column if you want right or the other yeah we're just gonna we're gonna remove this Builder um remove that Builder we're just gonna put this map view here I'm going to remove this Fab boom and then I'm going to wrap this oh my gosh I have a map view and a container in a container okay so we can wrap this map it in a stack perfect and then we can do a row all right we're just going to do a little row down here Boop sick uh we'll do it at the bottom of the screen and then we will do our uh list view over here I'm just gonna grab uh we do want this give me a second sorry show that like this okay cool we're gonna grab this little card here oh we could actually just duplicate that but we won't okay we'll do that um boom we have this little container within the row and what we need to do is unexpand it although we can't find it because need to set us an implied width so let's just do like 300 we'll do 150 here all right what's 60. and we can unexpand it perfect all right uh we'll do this is gonna look really disgusting but oh well all right do this little guy maybe we make this a little larger like 340. on mobile it's going to expand Beyond but oh well nobody nobody really cares we'll do that and then let's set this row add in this back-end query yeah let's go ahead and do this again you could probably do this better if you really wanted to um we're not going to worry about it we're just gonna all right look at that wait oh sorry are you adding up the row on top and then the list view or what are you doing uh so I did a I did a stack on top or I wrapped the map in a stack nice and then I threw a row in here um and then I I'm gonna remove this side padding yeah so we have a stack we have the Google Map behind we have a row at the bottom and then we're we're querying the the row as well with these um data points again you probably want to query this data on us on a top one and then just feed that in but for the sake of argument here it is and then we just want to make this list scrollable because you want to be able to view all the things here um and then you probably want this to go to a detail screen so we won't be able to view this um you won't be able to like click on one of these and then go to the map I don't think maybe if they're linked but let's just let's go ahead oh no a new you guys made us stay on so long we hit a new test session oh I was maybe we were talking about different things later I was talking about the the list view people were interested in seeing the the new list View oh that oh my gosh oh my gosh I didn't even have to do this I was saying wait a minute I was like where are you going with this what are you doing what are you doing um I was like just go back and convert the current list we got right um yeah give me a second description I just want to do this that's funny I was like wait a minute what's happening here this is getting a little crazy for those of you um all right all right okay let's see um I'm not in beta so I have to actually yeah should I minimize it yeah let me let me um yeah we'll we'll do that one for now we'll sit here that was that was slick though that was pretty quick for that reason yeah you're able to see we showed like three different UI four different map UI designs that we built within the hour that all work okay it's all work they all interacted with uh a back-end you know they they did some pretty pretty cool stuff okay um I think this dashboard no sorry just trying to figure out which one's in beta that I can work on that I won't break for people so int and uh [Music] Michael is so right he's I love that Andrew just builds whatever is thrown at him nice that's that's yeah I enjoy it all right so uh we have a list view here good um yeah oh you shared and then you're gonna have to move us you're gonna have to hide us though we're gonna have to expand all right you expand expand expand this one all right yeah so we have this wow look at that I haven't done it so yeah what does it do oh you gotta move that over yeah I don't know I don't know yeah you got to move your container over probably you should have more yeah those icons in there yeah so as a little icon right oh we need to adjust that this is why it's still in beta guys just so you know um so that we can test it this is very important that we test so where can I buy this Here Andrew special edition can't be bought unfortunately oh yeah yep hey but when you guys come to ffdc we will have some some pretty special t-shirts there true so this is true all right well this is um I've never used this so I don't know we could we could test it I guess yeah you can do you don't have well yeah I guess you'd have to do test mode unless you wanted to just do like three static items in a list and then click but well view UI button yeah that's true you might want to do that if you don't have the test mode well can't will it work in preview well that's what I'm saying preview would work but you need to create static data because it won't know how to pull your Dynamic data ah interesting oh hey look at that what the is that look at that stop wow this this is sick I'm gonna have to go to that kanban board and it looks it looks funny on our screen right now because your mouse cursor is sticking to where you're dragging it but you are dragging it on the screen yes it does it does follow yeah yeah yep so it's pretty slick stuff Yep this has been like the most requested um yeah widget for a long time so man I'm gonna now Michael I will say I don't know if this is as this is the same as your Trello clone you can't be like dragging between different list views and stuff like that I think that's where might be if I draw that line but you can reorder within the same list yeah sign me up for new Force that's awesome sick sick guys well thank you guys for joining I hope this was beneficial we did have a lot of people this is great um I hope this was beneficial um and fun so we'll we will let's see next week I should be back um borrowing any delays on my flights I will be back I'm a visiting family next week um but yeah should be good to go so awesome awesome yeah thanks everybody yeah I'm gonna oh there we go yeah we'll see y'all uh next week and we'll see a lot of you at ffdc so really looking forward to that hope you guys have a wonderful how about 10 more tickets left um before we're sold out for ffdc we opened up additional tickets so anyone you know interested in person please invite them to sign up will close within the next few days so yep um you know make sure to send that out too yeah awesome all right cool letter y'all have a good one

Channel: FlutterFlow

Views: 19,873

Keywords:

Id: s--_SIrf2VQ

Length: 71min 57sec (4317 seconds)

Published: Fri Sep 01 2023