Admin Panels in FlutterFlow and Web Performance in FF.

well wonderful live stream where it will be known Andrew got his Swagger back I don't know I feel like the last two weeks have been off there's been a lot on my plate and I've been um yeah it's been it's been good it's been fun going over sort of design principles practices processes uh that we at Koo Implement and that everybody can Implement right this is this these are things that help you make you successful um regard less of platform regardless of tooling uh it allows you to implement these processes where you can actually uh deliver successful products success yeah consistently that's it consistently Kareem thanks for joining man um but there was a question on Twitter on the Twitter this week about web performance and one of the things I wanted to do uh during the noode UI uh course or one of the courses is go over how to set up and communicate two two flutter flow projects together but while I'm doing that I as I've been setting up my own platform I've been trying to implement uh consistency in web performance how do I make it performant so uh so I wanted to Showcase sort of the progress on uh what what I've made I guess so far in the noode UI platform and also just talk about as we build out this admin panel I have a parking app so uh no code UI has a parking app in the marketplace and so I'm going to take that parking app and make an admin panel the parking app allows you to sort of check out uh like you know reserve a spot reserve it for a time period um and then allow that like that time period will be anyways I'll showcase it and then we'll we're what we're going to do is we're going to create an admin panel where you can manage sort of parking sessions and parking space or parking lots essentially um it's very common if you live downtown in any large area um this is a very common thing right I live in San Antonio there's a dozen parking apps uh for different parking spaces and also the street so um awesome let's go ahead I'm gonna share my screen here and forgive me uh I will be solo and Ryan solo today Ry solo so but we're going to dive into and hopefully this is going to be very beneficial for you know future viewers I'll try to manage the the chat as well as um yeah my my whole little project as well so okay this is my platform that I'm building out I have all of this stuff is real data it's not fake um posting some videos on YouTube and I've implemented some things here to help improve the user experience right and one thing that I found out is creating short sort of like Shimmer States or skeleton loading animations is key okay it's key to just every aspect of user experience so as you can see like here I have a skeleton of this content I don't have three round dots or three loaders or four loaders you know it's it's a skeleton and you can do a shimmer animation or whatever um but that helps so this loading time isn't that bad right like there's some loading time here for sure but it improves the user experience when you use a skeleton uh component right so you have to build those out yourself and I I'll do that in the parking app but it definitely does improve that user experience even when we dive into like intro to design thinking right decent performance okay how do you get this and also it has to do with like what your computer is for sure how much bandwidth you have on your computer so I've noticed that when I'm rendering a video right on my computer which takes a lot of bandwidth a lot of G CPU um my flutter flow apps you know like my this browser specifically is you know not as fast not as great so um yeah so this this let's see yeah cool I'm just sorry I'm just trying to read the comments uh but these things will help you and there's also some wonderful tips and tricks that you can Implement and we're going to do that through caching through uh querying correctly and utilizing primary instead of shrink wrapped so I have this like um updates right it's like a platform updates it's loading all the updates from the instructor it's just me because I'm the instructor and this is also my account but when I post new courses or something students will be able to see uh yeah updates for me so new courses uh updated lessons updated quizzes Etc here uh they'll be able to enroll in courses and view those courses here right they'll be able to take a quiz rate a quiz or write a course I guess all sorts of fun stuff but let's go ahead and dive in to creating this admin panel for the parking app so I'm going to just close out of this I'm just stop sharing my screen real quick um so I can close out of that and let's go ahead and bring up this parking app admin oh okay give me a second well I can share my screen window here platforms web enable Mac OS enable sweet all right so this is the the mobile version what I've done is and this is what we typically do when we uh build out our applications on flutter flow right we we typically are building a mobile application for a client um or ourselves and then we're building an admin panel or a a desktop application for somebody else right A different user so in this case like this parking app this is the this parking app is the consumer facing application right this is where somebody will download they'll automatically be able to like pay for parking uh log in pay all that fun stuff manage their vehicles manage their parking sessions Etc but this is just you know in part um and I'm going to bring up my simulator let's try to quit that and bring it up again oh cuss Sam is not wanting to start up but let's go ahead and start this and we'll just do a a Chrome browser okay good size for the bottom navbar um so what we did was we built this entire project out for the mobile version and the reason why we do this is so that we can understand all of the collections that we need right so we have proper database structure here and then instead of until flutter flow sort of allows collection sharing like in a library which I'm hoping will come uh in the future so that you could just like create this all of these collections sort of as a library and then just like a design system you could just feed this to as many projects as you want um but since we don't have that now what we do is we build out the mobile app first come up with all the database structure that we need uh you know like push notifications Etc and then we duplicate that project and we create we start creating the admin panel okay so I'm going to try to share my screen or yeah I'll just try to share this this uh platform so let me stop screen sharing and reshare entire screen yes okay so as you can see over here we have our parking app just like this is our phone um yep we're just design no code UI we'll just sign right in we could also just pay for parking but as you can see we have current Park whoop see we have some loaders here so we need to implement some caching here we have current sessions we can reserve a spot right so we can go in here and this is where we're going to manage we're going to manage these um spots right from an admin panel like you want to just sort of manage these so we can pay we've already implemented some of the some math some really fun math here where we have a parking rate and then we're utilizing some uh code expression to times that parking rate by you know the amounts here just like yeah just predefined amounts we can choose a vehicle Nissan Rogue we can proceed to check out right we add tax here let's go ahead maybe two hours yeah proceed to check out boom we have taxes fees pay with the credit card I payment set up because again like this is a market Place item so can't really set up all of those um like even push notifications if you don't have push notification set up if you don't have a blaze plan the the template is like broken when you download it so we don't want that but this what what we do want is we want the ability to create this admin panel so let's go ahead and do that and the first thing I'm going to do so again duplicated the project that's all the mobile app functionality we can mess all this stuff up because we're going to um in this admin panel we don't need the ability to book a parking spot but what we do need is our web application so let's go ahead and do that and in order to get started I'm going to utilize this web application flow right here I'm just going to add it it's going to add four screen five screens yeah four screens and a side Naf okay I'm gonna say admin panel literally I've done this three times in the last uh month and a half this exact process because this flow the beauty of it is it already works like it's it's it's already hooked up so what we'll do is um I'll go web flow so I'll say U main parking uh main [Music] sessions main users um account okay so this will sort of be oh obviously let's let's be consistent with our naming account okay and then we want main parking to be our default page so let's go to app details instead of main home let's go ahead and make it main account okay Navar exists page okay we don't need our app our navbar now let's go ahead and turn that off perfect and then we can just adjust this so I think we have a we have a logo somewhere let's see yeah right here just go ahead and we'll copy this and then we'll adjust it oh let's go to side na here right okay we can just remove this padding can make this a little bit all right and sorry if I don't see comments um I will try to keep it so called no good app hello how do you choose good size for the bottom nav bar okay Reuben I'll get to that question where do I usually deploy my web app I deploy to the well I deploy it to the flutter flow uh subdomain but you can also hook up a custom domain super easy so that is also can be done all right we're going to do parking app uh we're just going to copy this because we don't actually need this here Bo awesome and maybe make this a little smaller parking app and maybe we'll do yeah that that works okay let's do uh parking we have sessions and we have users I'll just add this and again this is just us coming up with all this we're just adjusting this temp so we're not duplicating this work um in efficient development again if you want to man go ahead if you want to create this from scratch every single time go for it um we'll beat you every time because we will actually utilize the the resources available I think it's very important to utilize the resources available but make it your own okay I say this to my my uiux students all the time don't just utilize the template make it your own you can adjust these things like crazy um that's the beauty of flutter flow is that you uh you have total freedom you have total freedom to just to to you know to go crazy with this stuff so we can like come in here we can upload some custom icons if we wanted to I'm not going to because I'm going to make this a Marketplace item as well so don't want to use licensed icons but car utilize that there say clock time man date maybe sessions yeah and then this one will be group go ahead and use that nice and this guy this is going to be our account page so I'm going to say account and oh this one actually be way cooler just alerts but oh well all right okay so now if we reload this we're going to be able to see our web app here instead of this custom or all of these things and then we can dive into sort of creating uh our proper you know layouts hey no oh here we go just remove that let's go Local Host sweet all right cool arcing page one sessions account all right yep cool somebody's already edited our account so what we need to do is just adjust this page to have our actual profile settings and yeah so let's see do we have a profile page already do I yes I do right here so let's go ahead and grab this it's already in a Max width container we're just going to bring that over to our account page over here and let's say my account oop again spelling is not my friend Lo your place okay um add your account below sip all right we already have that there it's already in Max so the reason why I did that is because it's in a Max withth container and that Max withth container has alignment to the center here yeah uh Manny this is correct parking mobile app will be the customer facing and then the admin panel will be for the app owner or you know the manager right you could invite you could have multiple managers for this admin panel uh they can they could manage the sessions right um you could review transactions I think I have a transactions collection here uh right here so we'll be able to manage transactions and see when when people have bought stuff um you could link a payment ID to this transaction um you could see ve I mean vehicles are really just private they shouldn't be seen you know from the admin panel but parking locations sessions and users so we have users sessions locations and transactions so those are those are the things the parking locations is where that's what we're going to do for this main parking screen okay so we're going to do that we're going to say uh parking locations so maybe instead of parking we say locations I don't know um below are and I'll just zoom in sorry for that okay below are your locations that users and parat okay go ahead and grab so again a few things to note when doing stuff querying right on the uh on the admin panel and web specifically mobile is typically like really fine uh I haven't had too much like performance issues I've had some loading issues with like images like we have a social app but beyond that we have like you know some loading issues and query and stuff cached data is is killer uh being able to sort of cash your your data um has been killer for my performance because oop just expand this little guy because you don't always need to be making Network calls you don't always need to like every time I load this page I don't need to load new data period right you don't need to have this backend call this parking locations back and call on a stream you don't need it on a stream you don't need live updates you don't even need it on a single time a single time would not make it live updates here but every time you load this page right you would be getting a sorry I'll remve that now uh you would be wearing that data again reading that data so it costs you on the database side but also it takes time Network calls in order to do that so what I did on no codei was I cached the data that is basically there it's not going to change like it's like my courses they're going to be there if if they need to be updated right they you know I will I will alert people that they need to refresh their page uh reset the cach right clear the cach uh but we can cash that data sit it here and then it's not loading every time we we load the page it's just sitting there um which has been which is extremely beneficial all right let's see we're going to now just grab a table UI elements content View use yes I'm utilizing this because it's uh yeah why why rebuild why rebuild okay these are parking locations so let's go ahead and do that cool and all I want is this or I guess I can I can just remove this Bo sick I don't need this or this sweet and then this little guy can remove this and actually this awesome and looky there we automatically we already have a pretty decent table view where we have these guys and we can now query this data because this is already in a list view here so let's go ahead and query our data query collection I want parking locations list of documents let's go ahead and do uh 24 limit uh let's do a single time filter rty values We'll order by the last activity right so let's go ahead and do that cool awesome you don't have to do the the limit and again we could um do a data table here and we could have pagination or we could have infinite scroll scoll here now the important thing with infinite scroll and again that's a a thing to sort of be reckoned with um let's see where why do I have okay sorry um you want to expand this list View and you want to remove shrink wrap okay sorry my my camera's in the way so this is down here we want to remove shrink wrap make primary which means this table is going to be scrollable okay the the column outside is not going to be scrollable that's okay that's why we provided this border this container that has a border right so it sort of alerts the user okay this content can be you know this content is unique it can be accessed Just Adjust these here sweet and then we're going to I don't think we need an image maybe if you want well yeah let's do that I think we have an owner reference here so let's go ahead and see who say owner uh date created last active status uh we really need a location so let's go ahead and remove this guy sweet and we have that let's go ahead and make these guys a little smaller and we don't need this one so big let's make this one five no let's make it four and let's do the one up top as well or instead of ID we're going to say location or address right because we have addresses here 12 sorry I'm just these are little things I I created these templates on flutter flow well before we had spacing on rows and stuff and I just I love spacing on rows so um too many errors we have Point okay okay two same back Manny correct you have two oh that's bad that um yeah two projects in flutter flow accessing the same database and also you can send push notification since they are so like my sessions right if I wanted to if I needed to the admin panel send something a push notification to the user we could do that right we we have access to that user data so super cool um but yeah let's go ahead and make this specific so we're already querying our backend uh let's go ahead and do uh query enable query cache so let's do uh page level we can create this we're going to say Arcane locations all right we don't necessarily need a unique key here um we could what I've done before is I've override cach on data change right of of the collection I don't think we actually need that right here what we'll do is we will uh set a refresh button up here let's say that you can clear the cache so let's go ahead and and hook this stuff up so we have parking locations document here we're going to do our name and let's go ahead and and set our default values so we don't have some Grays here now we need this row to reference a user okay so this is how you reference another collection we should have users uh let's see oh I don't even have a user don't even have an owner never mind well let's see what what we do have what do we do have we have another reference no we don't all right cool well we don't need this but I will do it for the session okay I'll I'll showcase this for the session so what we'll do is we will I'm just going to copy and paste this we've already gotten so far um we'll do this on the sessions page Boop nice um active sessions we'll just change this little guy it's giving me an error because I'm utilizing a page level cache and again guys um you know you may may blast me if uh you're a developer and I'm not doing this correctly so I'm sorry if I'm not doing this correctly but this is how I found success in implementing um yeah basically implementing things that that function well as a web app so uh we can do this create and uh sessions cool perfect awesome string property yeah that's going to be coming from the sessions document um location all right let's go back to parking and let's finish this so I just wanted to do that remove that and that we have our parking location so our name o yeah maybe we have a parking name and an address that's great let's just duplicate that let's say name here name we probably just need this at like a three address let's go ahead and do that so we have location here we should have an address here data structure field love this so let's go ahead and combine text here because we have um we have a data we have a a data type that it parses I'm pretty sure there we have Google Maps integrated as well and so it parses the place picker information into a data type and so we can combine that text here so let's go ahead and uh combine text and now we can access that address perfect we'll do data structure field we will say uh street address then we'll just separate it here with a space um I'm going to just copy and paste this because we're just going to use the same and just change the value the last field here so we have street address then we need uh city right space and state oh no not that state okay and then here and we're going to do zip I have zip and postal code I don't know just for for if you want to use this app internationally you know it could work so awesome we have that let's go ahead and do this um oh this is great as well so we have created now we just have last activity so let's do last activity and let's do a daytime format uh let's do a let's do relative because yeah it's easiest so this is last active Okay uh let's do spaces so our in this address let's go ahead and select that ah let's go ahead and select this bad boy here we have uh the amount of spaces so spaces or available I guess right because each parking lot has a a number of available spaces boom and then we need a yeah uh build spaces okay this is going to change right spots filled and then I don't even know if we have a status we'll see let's check it surely there's a status there's a price let's just put price here perfect okay decimal automatic display as currency boom sweet oh again we also need to set up default values I think we should be good because yeah I think we should be good because I've created all of these so the idea would be that we can we also have set up a creation right so you can you can create these parking locations from the admin panel all right let's go ahead and set that up I'm going to just I think I need to deploy my indexes no okay cool cool sweet just go ahead and refresh that on the debug and I'll check some comments Andrew birfield thanks for joining Bruce also thanks for joining um I would love to know more about your um yeah manage and validating cash interesting I I have not run into that so um cool okay we have parking sessions here A bunch of them we're not having parking locations I'm guessing because the last active filter is not actually there it's probably not even yeah so we can just do name we'll just filter this by name okay let's do that okay perfect I swear I have to I'm just going to deploy indexes again I don't know why it's not making me do that cool all right let's go ahead and do that update that all right and then I think that uh let's see Kareem you said web performance specifically first six to 10 seconds loading first page um yeah that is a good question unexpected no value perfect because I didn't set so whenever you get this red screen of death I know most of you do know this right you all do know this um it's because there's no values I tell you man it doesn't matter how much I develop how long I develop I so run into this I was running I ran into this yesterday and it ticked me off to no end I could not figure out where the N value was coming from uh it was on a screen that uh I had like a create an edit flow and every time I tried to create something it just gave me this thing over and over and over again it was a nightmare I was Furious in all honesty I was Furious so um but a developer helped me out and now I can create lessons on my learning platform which is great so yeah just if if you run into that stuff lookie there we got it perfect um we can adjust this so it's not so small and then we can make uh yeah we can make these let's see see left active all empty that's why we weren't actually getting anything here uh same thing here nice not a bad not a bad right no lagginess here we do have a lot of um sessions so I can also what I'm going to do is I'm going to remove this stuff and let's go ahead and adjust I don't actually need this Max width here I don't where I don't want it for now I did implement it in the original sessions which is fine I guess it does does work it's nice to have that ability right to have that Max width if you want it and also that container if you want it um yeah let's just go ahead cool and let's see address what are some things address is is being funky L active we don't even need so we can just remove this yall that'll be good all right 22 one one now it's yeah we'll do two on this okay all right so this is the first step right wearing your data obviously caching it so that it doesn't have to load every single time uh you you access this page which will also save you reads but it it'll prevent that lagginess and when you utilize this uh yeah so like what what I'll do is in instead of that loading animation what we're going to do is we're going to create a uh component and we're going to set up and this is what I did in no code UI I have a component with different empty States and a conditional Builder and I pass a parameter in that way I don't have to have like 10 different loading States right I have like a card view I have a list view with an image a list view without an image a list view with a progress bar but I'm going to Showcase what I did and I think it's sort of fun and I also utilized enum which is which is sick okay did not realize how how fun enums are so this is what we're going to do first we're going to create that uh that loading view right that that empty or the loading State we'll Implement a shimmer animation on it then we will adjust we'll do an a create edit for these parking locations okay and I'll I'll Implement that so you can see yeah what it looks like but let's go ahead and add a component and I'm going to just do a blank component I'm going to say loading State okay create blank perfect okay then I'm going to add a conditional builder in here let's search for it conditional I'm G to pass a parameter in here okay I'm G to pass this parameter I'm gonna say loading oh yeah state type okay and it's just going to be a string perfect but I'm going to do I'm gonna I'm G to create an enum okay I'm going to say loading States okay and then in this I'm going to say uh list single list uh full I don't think I'm supposed to use uh underscores okay yeah that's that's good um card uh user right so we have user and uh single text okay cool we're going to just do a condition for this Builder and I'm going to say State type equal to we're just GNA find that enum so let's go down to list single perfect a current variable equal to oh maybe we can just do an enum then that was that's annoying that was antil climatic can we do an enam yes okay perfect that's what we're going to do take that all right enum uh type loading States required sick hey you learn something new every day come on there's never never too too uh never too late to learn okay now we can now we can do [Music] enum component type yep uh type is set now equal to we should get the values here right yes perfect come on okay and we can add another one okay for those of you just joining what we're doing is we're just creating a single component for loading States and these this loading state is just going to be you know blank like containers okay and then we're going to add a shimmer animation so that we don't get those uh crappy you know out of the boox loaders you get a more professional feel when it's loading so okay single we're going to Do List full and I'm just going to do these two for now and what we're going to do is going to grab a row in here and grab a container and on that container I'm just going to add a little bit of spacing okay and we're going to set a height to 24 we're going to set this to our alternate can't really see that here so um I'm just going to adjust this border [Music] radius to that and we're just going to set that we can adjust this one perfect we could even um you know you could set some item spacing like 24 and then we could expand all these so it's a little more responsive right and this one I'll set to like three two maybe come on two three four hey okay I don't know why that's not expanding like it should but this will be our loading State and maybe we don't want uh yeah this is alternate okay we do want alternate let's see that so this will be a single right and condition Builder list single and then we have our list full so what we want to do here is obviously a container and then our list and we're just going to duplicate this yep perfect lucky there and we can even like add in spacing if you need I don't think we do now on these parking Lo locations we can set our backend query loading widget so let's go ahead and do that component View and UI Builder loading State pass in a parameter right I'm going to say look at here List full come on that's so easy I'm implementing that in my other project I didn't do it that way in my other project I did freaking streams stupid stupid don't ever do that so again you learn something new every day I love that for us okay custom functions need to be checked let's do that Shimmer animation for using a shimmer animation from lah this is a good question um Daniel yeah good question uh I don't quite know what I actually have in my application is I don't use Shimmer at all uh but we we'll we'll check it so we'll do this first and then we'll see what it's like with the Shimmer how about that so we have this cool yes that's about what we want and let's do it also for our sessions just close these guys let's do it for our sessions and we actually want this one's a little different right so we have a little bit different thing so maybe we have a little circle here um which is fun so these active sessions they do have a user reference so let's go ahead and query that we're going to do it sorry document from reference right users we're going to take this and say user reference here okay now this user reference this is another thing this user reference is not going to change it's always going to be there so we don't only need to do it single time right what we need to do is we need to cat this sucker to this little list View and we can do that by let's go ahead and making this a component right let's best practice best practice let's make this list for your component so list sessions boom now we can adjust this here okay I'm going to uh pass in my and I again please forgive me if this is not best practice because pu just said it wasn't so I may be doing this all wrong but this is how I'm going to do it because it's the easiest you easiest thing so I'm going to say session reference and I'm just going to pass in that parking session here we don't need this user reference anymore because I'm just passing in the session reference document and then I will this document reference here will be from the component parameter session reference okay user ref awesome single time query and again cash that sucker we're going to do it component level we're going to say uh linked user or user rep I guess uh session we're going to give it a unique ID you need to give it a unique ID or else you're going to see the same user everywhere so we're going to do it from the session reference uh document ID so that's going to be our unique identifier perfect and then we can just go ahead and do this uh us your document photo URL let's go ahead and give it a default value oh stay List full string would be expecting List full why don't you use Shimmer okay yeah uh Joseph I will I may use it right I may use it uh we'll see uh it brings up an interesting point because uh like Daniel said right what what performance issue does it have do you need a shimmer do you need a shimmer or do you just need an empty State a skel in right uh Instagram Twitter they all do this right they use Shimmer so we'll try let's go ahead okay string property or uh let's go ahead and do this session reference uh let's see location is that what we had location here pass in uh no location okay sweet and again we're going to do do our username make sure to set a default value uh ghost user and our Leal email here which we don't need our email I'm not going to do an email because I think there's some other people here so we'll do short description uh yeah I don't I don't know who's like created stuff with this so don't want to put their emails on blast yeah let's go ahead and do session reference Time created yes for this one I do want to showcase the date so let's go ahead and do May 2nd Thursday May 2 let's do that now let's do shortened through May 2nd perfect and for this guy let's see Time created location description price obviously you need a price or no let's do in time we will also do uh we will also do um end time perfect okay we need more than just the date we actually need the time as well let's go ahead and make this a rich text we can do two one of two things we can do combined text or we can do Rich Text uh so I guess we can do combined text here and what we're going to do is we're going to get that session reference we're going to do the date right so we need the end time and we need that date so Thursday May 2nd but we also need little space or actually comma space and we need this in time but we need it in the time so instead of Thursday May 2nd we need like 9:47 a.m. perf okay all right we're going to need to do the same here sorry if this is yeah sorry sorry this is not what you expected but hopefully for new users this is beneficial so we're going to do that uh Time created Thursday May 2nd nice um comma space to to give us some separation uh Time created oh n not 9:47 9:47 a.m. because we're in the US sweet and here we can do price do price here so let's go ahead and do that price number format decimal automatic display as currency perf okay do this one in two okay this is two awesome so we have this um I think we have an extra one uh let's see sorry this guy is three 4 22 two yeah that's probably what we need just need this last one to be two sweet all right now let's pass this reference unique key so oh nice we're already passing the session document here okay so we have that session document let's do a unique key as well so reference so document ID perfect got we want each of these to be unique all right so now we don't have to query right we don't have to query um this user every single time we view this we just it's it's stashed right it's it's not live live data um it's just there so um cool cool right perfect let's see all right we have a good many people on the on the Twitter so thanks for joining on Twitter um it's our largest platform right now there looky there you have let see this one ugly parking session nice nice right ugly parking nice okay we can probably add so I'm gonna I'm GNA go in and let's go ahead and add that loading state so this one um yeah let's go ahead and do well here I'm going to add a add a second one so and what we'll do is we'll do um we'll just call this one a card or something so load me State full let's do uh with user I guess right something like that so what we'll do on this one on the user one and what I try to do is I try to name these user List full list just so I can I can better understand what each one is um so what we'll do here is we'll we'll set this up and let's go ahead and do that 24 we're going to just batch this guy in a row Shuka there you go oh got reduce this guy bring him in that row here you can remove these for now okay cool and this oh these are so weird we're going to just reset to this okay and let's go ahead and we have this row so let's do this and sorry duplicate make this into a column duplicate and then for these we'll just reset this we don't need that we can set the spacing on the there set the spacing on the column itself can reduce this and bring it over there perfect um again I don't know why this is being buggy seven yeah okay something like that and then at the very end we also have 24 we have an icon over here so now we can just duplicate this sweet and what we'll do is we will uh wrap this guy I'm going to wrap this and this is how I this is how I do my Shimmer animations so uh forgive or yeah this is just a fun way to do Shimmer animation I'm going to I'm going to wrap this in a stack and then I'm going to add a container and on this container I'm going to do infinite and I'm going to bring it down all the way here yeah we'll just do that and then we're going to make the opacity like 2 oh 02 01 maybe yeah I'm going to do my Shimmer animation on this little guy guy uh reason being the Shimmer like takes over uh the whatever like if I put the Shimmer animation on this user list um the Shimmer would only like this this layout would only show when the Shimmer is over it and so what we're going to do here on this container is we're going to do Shimmer Loop and it's G to it's going to run over this well it's not running over this because we need to change this a little bit let's go ahead and do that make it like that yeah it's it's very slight now okay see if we can here let's maybe we can even make this zero opacity and we'll still get it I bet you we can I bet you that's the case oh not the case not the case okay let's do that okay this is this is exactly what I wanted I wanted it to not work okay we have a small Shimmer let's go ahead and see if the oh okay this is empty now good all right let's go back to our sessions and let's change out our loadings we're going to do our component View and Builder loading State pass that oh I love this car oh sorry it's not card it is user okay all right let's see if that works and the reason why I'm not using an image back there um is because I want it to adjust to the theme so if you use those like components uh then it can adjust to the theme light dark whatever you can build out you know however you want to build out um and yeah that enum trick is actually a really good one so until we have like variance within components um I think that's gonna that's gonna be helpful okay nice nice see also we have this user here so whenever we get this uh session data this is also loading so what we can do is we can go back to that loading State okay loading state I'm just going to copy this right here and on our single so we have just this uh list single right maybe we don't need this uh and what we need is this ah well it's just going to be right there I'm going to say uh yeah list user okay and then we can go to uh oh this user uh oh one second let's see oh okay duh that's that's not a problem it's just showcasing that one perfect let's go ahead and stop viewing that in Builder come here and on this back in query let's make another loading right let's do this component View and UI Builder loading D and then we're going to make it our first one so list single cool and right there sweet document ID nice okay and that should that should be a little better so okay I'm we're 162 nice we have four minutes left I don't know if we're going to actually get a um a create session but we did get hey we did get parking right we adjusted this um any any last moments of you know things that I should do there's that looky there see this this um this ghost or like that that empty list is is so much better such a yeah such a better experience than those funky little blue you know loaders so nice we have prices dates cool all right so yeah creation of a uh parking location is obviously necessary I actually think uh oh no I don't I don't have that in the mobile app because I actually just uploaded a CSV but let's go ahead and see what we have create edit vehicle yeah well anyways I hope that helps uh hey we did get stuff done right we did create an abmin panel in an hour um and we did get the ability to view that in an hour and also provide a decent experience for those things right that help that loading um this is just because again no value so if we come to our list sessions we'll just need to make make sure that we have uh no location perfect something here something here and something here okay cool all right yeah let me let's see um ponent that can we Implement a user tagging feature in FF uh this is a good one uh yep though out of context can we Implement a user tagging feature in FF uh yes you can it's not as easy as like tap uh the at sign and get the user but you can create this um we actually did it on a live well we did it on a tutorial on the Google flutter channel so uh I can I can try that come up with a tutorial on how to do this but again it's not like tap you know you you tap the at and you get a list of users so we don't have that ability quite yet but you can add you know you can tag users yes um yes so instead of having like we're not doing Shimmer this is a good question so reduces I think Joseph had the question um can you explain more to it why you add this stacked to do the Shimmer so uh two reasons so you could all right we have our Shimmer here this is you don't want to do you want do Shimmer you want to do animations on the least amount of things possible right so I'm not going to do it on every single one of these containers that'd be annoying a f that would be annoying so what you could do uh we have this stack here and then we have this list here so let's go ahead we could do the Shimmer animation on this column okay so let's go ahead and do that we're going to do this Shimmer we want it to Loop apply same duration okay yeah we need to change this slightly like maybe make it I don't know just something a little different okay not really seeing it ah oh maybe it doesn't work like I thought oh well um yeah interesting interesting okay well the least amount of things possible so instead of making them on each of these and maybe this explains my point just in just as well um instead of yeah animations on just these when you use the stack and this container method um you can do it on one thing so and you're just overlaying this and then you know doing that Shimmer animation it does have like you know a little bit of uh background but if you make it the same color as your background right so here I think we have secondary background as our fill that works because it is you can't even really see it let's see sessions here yeah I mean you could sort of see the Shimmer but it's not really yeah it's not really there so you're doing it on one instead of having to do the Shimmer animation on multiple containers so hopefully that works um CH is there a template yeah so this stuff is not going to be I mean this is a this is going to be a paid template sorry I have a paid parking app template on the marketplace and so this is going to be the admin panel for it um when you buy the parking app template you'll probably get the parking admin app template as well something like that so um yeah yeah cool cool awesome well guys thanks all for joining uh we've had a good number of people on Twitter so I know YouTube seems a little uh lack a days ofo but 167 is the number pretty good um I'm very happy with that and thanks for joining these live streams uh I am in the midst of both creating a learning platform and creating more content that is more tutorial based uh so I have a lot going on and I I I'm just I'm excited about these live streams still and I'm having build ship on in two weeks so May 16th mark your calendar we're going to be talking about how to implement uh lemon squeezy in a mobile application so they just launched on product hunt as well so if you go to product hunt uh oh this is going to be a private tab so you go to product hunt go upboat their AI assistance build chip has done amazing job creating uh relevant content and relevant workflows um so I'm going to be doing a good amount of tutorials on that but you don't have to wait for my tutorials okay I'm probably not going to be as good as Steve from the digital Pro so go to the digital Pro and watch these tutorials on build chip AI assistance all that fun stuff he does a fantastic job and I don't think I can compete with him on that so go do that but we will have build ship on and then next next week what I'm planning on doing is implementing a white label app or like showcasing a custom you know custom theme that a user can Define for themselves I don't know if that's G how that's going to work but I think it's going to be fun um utilizing either constants or App State uh or you know a document as well we could do a fire document for that user something like that so yeah it's going to be fun uh hopefully it's helpful and again I'll uh I'll I'm in the process my goal for launching the learning platform is like end of May probably end of May let's say I have pretty much the stuff the the the uh the infrastructure set I just need to uh update the content I need to create more content uh and then have it you know available so thank you all for joining I really appreciate it again

Channel: Kaleo Design x NoCodeUI

Views: 2,315

Keywords:

Id: oy0dv_hJ_DA

Length: 64min 2sec (3842 seconds)

Published: Fri May 03 2024