UI/UX Best Practices for Flutter web apps in FlutterFlow.

that's nice all right yeah we are all right cuckoo oh where do we get that chat okay I'll just keep watching the chat again here perfect yeah maybe it was a one-time it was one time thing you know who knows um one hit wonder but I think it'll be fun nice hi Colonel um it's two there it is do you have um two live streams going by chance on YouTube I see UI ux best practices and then I see the UI ux live stream and destinations I'm gonna I'll end that one yeah okay perfect awesome streaming on the best practices for a web so I'm sure that's the one yeah fuku perfect everyone how's it going welcome back hopefully you tuned in yesterday for uh flutter forward we're able to see some flutter news yeah yeah I mean we had that whole flutter conference was so cool I mean Tim snake and just demoing the the different applications that and the possibilities of flutter 3.7 was really awesome uh watching that authentication um demo though made me appreciate overflow so much I mean yeah it was not necessarily painful but like I was like all right I'm so glad I don't have to do this like this is incredible I could just toggle the switch on and get authentication so I mean like they said authentication is hard flirt flow makes it extremely easy which is a lot of fun so very cool in that way and it was really fun to build that AI art generated generation app um with shelvik and Sophia so yeah if you didn't tune in yesterday you can go back to the flutter YouTube channel and watch the floater forward um you know full hour-long live stream there uh and then what Andrew was referring to in terms of the AI app we released a full tutorial about 30 minutes featuring some of the flutter flow team members building an AI image generating app so you can find that on the flutter YouTube channel also reposted in our community so Community dot flutterflow.io you can find it there you can also find it on our reddits on Twitter so we try to spread all over the place and you can actually you can try out the project but even clone the project isn't that right Andrew yep you should be able to do that both of those things awesome so [Music] yeah well thank you thank you everybody for joining uh us and this little UI ux live stream where we hope to teach and you know pass on some knowledge and best practices that we Implement in all of our applications in flutter flow well you know hopefully I'll sample apps um if you weren't here last week and missed an intro um I've been doing product design for nine years I've worked on 150 projects before joining flutter flow um I had a whole agency that helped launch products uh into the marketplace and so I have all that experience um I would just like to share some of that um with y'all I really enjoy flutter flow I enjoy building in Florida flow I think it's the future of development um I think the product development cycle is broken and I think flutter flow can fix parts of that uh that's a personal opinion you know I don't pull flutter flow to that but it's a personal opinion I really love it um and I love what you can accomplish uh so I want to I want to teach as many people as I can how to build in flutter flow and how to build these sort of complex layouts especially with the web now being a little more stable and rolling out a bunch of improvements to that so and there's more to come so some of this stuff will be dated in a few months that when we improve uh our responsiveness but you know for now you can still build robust applications um I'd much rather build a web app and flutter flow than in competitors personally I know I'm biased thank you yes no I totally agree and we've heard that a lot actually for people which is pretty pretty cool and especially as we release new new features and continue to build that up I'm I'm sure it'll only grow yeah yep so I want to I'm going to try to share this let's see so this is just a small um oh I am sure that give me one second okay this is a small uh itinerary for us today I want to showcase uh sort of a demo of a web app that I've built in flutterflow that is totally responsive and it does a number of things that are that are very cool one is kanban board in desktop and it's tabs and mobile um it navigates from a page view in mobile to a modal in desktop um so there's plenty of cool things and again this is like in product design um designing responsive apps is really hard and designing well-designed responsive apps is hard right like so just passing on any knowledge that we have to help you guys improve your design and the way that that your users interact with your apps is the whole point of this um at some point we will probably try to get them to backend and how to set up stuff that's not my area of expertise uh will is a lot better at that than I am and we have developers on our team that are way better than both of us so at some point we'll try to do that um but will and I both like building in flutter flow and so we just want to pass off some of that balance and you know the love of it so I'm going to demo this comboard kanban board um I will switch the views to watching this guy cool yeah perfect okay I will zoom in first I'm going to do this take up more of that screen oh no why do I have this oh I bet you I fudge something up anyways so this is an application we built I built in flutterflow um you can see it live and I'll post the link in the chat as well you guys can really mess around with it hmm so let's see here it is and if you don't know what a kanban board is super popular just think of it as like a task manager right so not a little more complex than maybe just a to-do list where you're just listing items uh you can organize it in different columns rows and draw that you continue to describe it there super valuable for most those companies and and a lot of applications built with kanban boards yeah totally and if you're familiar with Asana jira uh Trello um notion as well as this sort of Congo board view um very popular but you know hey I want to see if you could build it in Florida flow was able to accomplish that it doesn't have drag and drop which is like you know one of the things but you could build this for um you could you could build that in with some custom stuff no problem but as you can see this sort of uh responds down let's see it goes to tabs and you can change this you know like right now I probably have um this little guy yeah so it's just on mobile so we could actually showcase this or we'll remove that on the small tablet as well as this mobile we'll do that there kanban tablet that there so nice that'll give us a better View here and that navigation sort of disappears that's one feature of this app right this is one page I mean you would just go from a list view that's horizontal we created all let's see I think that's a spacer so in this list view we have a card and in each of these cards we have another list view where we actually are grabbing that um the the back end query and we're filtering by the progress or the status of this task and I'll actually showcase the app right now if that's cool because it's really cool to see sort of this in um live so me track this guy over nice so this is that view um you have a team projects you can dive in this is another thing that I want to sort of approach how to build this so in desktop mode sometimes it's you know Superfluous to go from page to page like it does in Mobile and so what I typically do with my web applications is my detail views will appear in a modal or a bottom sheet or like in a sidebar which we would call an in drawer um currently it's a little harder to accomplish that in Flair flow but bottom sheets fairly easy um yeah and the and you can actually see this so when you scroll this down and you click this actually does navigate to a page and I'll show off how to do that um but for now you you have this you have your completed tasks you have a whole activity stream which is fun you can add different users to the project I don't know if it works on the my tracker you can view tasks you can post updates you can also add people to a task so that's another view we can see our notifications this is my favorite um this took me a while to actually build um but I figured it out and we would like to I would like to do a tutorial just on this like how to do notifications for multiple people um and how do you mark it as read unread stuff like that so but this is sort of the finished project you can create tasks like um our live stream right this is really great we haven't started it our due date is today let's create that task start the live stream the task and there you can see we have activity here that I've been moved in progress this is a lot of uh well complex stuff but it's a lot of fun to build um and this is something that we're trying to demo as a flutter flow sample app so you guys will have full access to it um it is a public link so I will also share the project link you guys can clone it um if you guys want to mess around with it so nice please just remove my Firebase if you could um that'd be great um but yeah so little things like if you saw when we clicked the task um on mobile um oh this is actually a tablet view so we don't have it here um so this this view is actually for the tablet and desktop and then we have a view specifically for Mobile on this page on the project page though we actually have oh I probably didn't do it here either because I do have a grid view here hi we'll cut that there is a way to where you can use the same um card and access pages on mobile and back bottom sheets on desktop it's a small conditional based off of um screen width so I'll I'll just show you what I would do if I was going to do that so here we have our navigate to a bottom sheet and let's go ahead and zoom in we'll add a conditional here condition is screen width greater than or equal to specific value we'll just do 768 which is typical like tablet uh portrait View and then we'll move this guy up copy that paste it here move it down there and then we'll add an action here navigate we want to go to a project Details page we'll just pass that reference in there cool so this is how this is a conditional you can place on a single card if you have sort of a grid view or maybe a long list view in desktop and then you have that same list view in mobile and you want to navigate to a page in Mobile which is a common navigation practice and then on desktop you want to pop up a bottom sheet now I use bottom sheets for detail views like I said like user details project details this was like a task detail just because there's simply not enough information to utilize the whole screen with so presenting it simply in a bottom sheet or in a modal is a little better right there's a plethora of ways to do it um right now like you know if you had a bunch of information that you want to display you know a graph along with the task and everything all at once right if you want to separate those tabs that we had in the project details um could right like on this little guy maybe on desktop well not in the task but in the projects nice so in this project if you wanted to create this desktop page and you separate these tabs you can see a list of all the tasks and activity right next to each other you could do that no problem um I enjoy just viewing it in a small modal and yeah that's one way that I do it but this is the conditional you would use to sort of navigate to those two things we don't need it because we actually have a desktop view that is a grid and we have a list view for mobile um so as you can see here when we come down we'll actually see that list View and then it'll just take up the full width now this is the way I enjoy building um currently so like the our current sort of um way that we create um yeah responsive designs is that we our wrap our wrap widget doesn't really work um in regards to like creating complex grids right like that you could in HTML CSS like Flex and stuff now don't see that as a limit uh it's an opportunity for us to grow that's great thing currently what I'm doing here is I do a grid View and then on these cards I'm setting a oh this is a wrap widget I am using the wrap widget here and I'm setting the cards on a Max width or a width so they always take up that space and height here and that way they don't get so large on um desktop because that's another thing Arc reviews I would love to set a Max height on those things if you guys have used grid views they get sort of large so using a wrap widget like this and just setting a Mac or a width for your cards being able to scroll down and then utilizing on their list view here um is one way that you can accomplish this and you could actually accomplish this with just a rap for you so so yeah to Showcase another example of maybe what Andrew is showcasing with utilizing the conditional statement uh show you know the max screen size and then setting two different actions to occur another example of that could be something like Twitter think about using Twitter if you're familiar with Twitter on the web versus mobile right when you click the Tweet button on the bottom left hand side on web it just has a pop-up that appears right because you wouldn't want to take the user to a completely different page there wouldn't be anything to fill that page with but on a mobile device you would want to take them to another page because they need to have all the upload details all of that so that's an example of where if you had a button right on web you'd want to take them to a pop-up and then on mobile you'd want to actually take them into a completely different page if you're just thinking in terms of use case here yep yep perfect um and this question was interesting um it depends on what type of multiple items you want you can create multiple records for two different collections currently you can only create one item per collection so you could you can do this with a cloud function it does take a little extra work but it's possible uh but yeah apparently with the same collection there is a interesting workaround that I've found um I wouldn't recommend it for all your your applications but for testing if you're trying to get away with updating for example if you're trying to update two user records right now right you can only in an action chain upgrade update a user record like one time right a workaround that you could do that I've used just for testing like I said I wouldn't put this into production but from a testing perspective take a timer widget place it somewhere on the page within that area turn the font size way down I turn it to like zero one I change the color to transparent and then I set the timer widget to like 100 milliseconds so that and then I set any additional like if I need another uh user change I'll set that Accent on that timer widget so that way in the original action chain I'll have a update to maybe the user's collection that'll trigger that timer Widget the timer will go off in you know a split second in 100 milliseconds and then it'll carry out the remaining actions as well like I said strictly for MVP you know testing I wouldn't put that into production but if that's something that you want to like test around with you could do that cool perfect little hacks like that gold nuggets so um last time yeah like creating something like this is fairly complex right dashboard page maybe multiple column layouts how do you make it responsive um I just sort of wanted to go through and showcase how I would do this first moment day um page response on every device thank you yeah I'll do this [Music] um thank you oh wait no sorry somebody posted right before that we do have flirt flow beginner tutorial so explain steps how to make a page responsive in every device we'll go through this right now so yeah this will be perfect I will actually build this page in flutter flow um and I will sort of showcase how I would do it um and then make it responsive as well like navbar top bar spacing uh this five grade layout up top it's going to be a little difficult to make it respond on all devices but we're going to make it work um two grid three grid right this is all fun stuff so I will do this and then I will I'll show you how you can make it responsive as well so this is this is great this is why we have this um yeah these sessions so I'm going to move my figma over here so I can view it if you want to handle will if you just want to handle all those questions and everything I don't have my not even able to see it let's see while you're creating that project a couple questions I had so far Michael I asked you the page view and bottom sheet utilize the same base component they actually could right so you could have components that you build and then just have it maybe wrapped in a container or something and then when you trigger a bottom sheet right that container appears but then if you want to navigate to a page you would just show that container within that page right so that's one way to optimize your designing is just design one base component and actually reuse it across different pages across different you know bottom sheets wherever you would utilize that uh any additional comments there Andrew I would say um I also like so like for some of those applications um I have a profile page if you if you look at the Arts or um project we actually have like uh um a profile page that is a page on mobile but it's in a modal on desktop and I actually just created that page as a component right like every like the column that everything is in I just created that as a component and put it into a bottom sheet um that I created and so if I edit that profile in the component it appears and the changes will be updated in both places um which is a little it's not really a hack it's optimizing a workflow right like not housing that in two different things but showing it in two different views depending on the device size um one of my favorite things I really enjoy that so I don't really like this um theme so I'm going to do I'm gonna do this holiday theme cool nice my logo doesn't really go but everything else does cool back to building um another person out of the question when is the razor pay integration launching so there's actually a Blog on not a non-native integration with flutterflow that you can read it's pretty lengthy uh shout out to shovik on our flutterfly team for taking the time to one do all the research to type all the code and three create a blog around all that code so you can find technically how to integrate razor Bay but we do have a big announcement coming um in February that'll be pretty exciting for most people um involving Razer pay so stay tuned for that yeah I'll just say I created an icon that may have had the Razer pay logo on it nice all right cool so we have this little guy I'm gonna take this side nav and I'm going to create a component um there that's good it has everything baked in responsive visibility so the way that that so somebody wanted to see how a um you know how we make a page responsive so the first thing you need to learn is responsive visibility so when I select this container here as you can see there's a little device on here if you come over to the right properties panel there's responsive visibility if you don't want something to show on a device size just go ahead and toggle it off here and it won't show good news if you have a back-end query on an element which you know most things will have backend queries um or typically right that's the benefit of building out um so like that project view right I had uh a back-end query for the webview right in those three different cards and then I had a web back-end query for each page view as well when you hide the view so like the page view when it's hidden on tablet and desktop it does not query those three so we're only querying c um we query it twice probably when we expand and collapse it but if you're on a desktop you're only going to query those three um back-end queries and on mobile you're only going to query the three or four I guess uh back in queries so if it's if it's hidden from my understanding I have to offer the dev team you know we don't make that back in call which is superb right that's that's a benefit to our responsive the way we handle responsive visibility and stuff uh we will get more editing ability for different properties on desktop tablet mobile but for now this is the way to sort of do it which is still a pretty good way I mean it's not bad you can do it I've built multiple web apps um in flirt flow and made them uh responsive or like tablet views and mobile views fairly easily um which is super cool because you can do all of that um but yeah now I'll just sort of keep building right questions so oh you're good dude I was just gonna say again we have a row here as our base element on the page so that we can stack these horizontally um so now I'm going to get a little column so we can actually stack stuff in the right side and another thing that I would suggest um cool thank you Benjamin um in so on these sort of like major content views what I typically do is I wrap them in a container and what that does is it allows me to set a Max width um to the content right like if I if you look at the Archer app we sort of wrap that feed in a in a container and then set a Max width on it so it doesn't matter how big it you're not going to see a photo take up the whole screen um you don't have that ability in columns and stuff but in containers you have a lot of flexibility so what I'll do is like you know expand this and then just set a Max width of since this is going to be a Content view we'll do like 11 70. nice error and then as you can see nothing really changed because we actually need to change the alignment to zero and then we should get that to actually expand and as we yep that looks great little heck make your apps look really good and I'll just remove that background now awesome and if you want this stuff to go all the way up there's two ways to do it on the row you can do well I guess there's one way to do it take this container and also set the vertical alignment to the top so okay oh go ahead I'm sorry no will you're good man you're good keep it hopefully it's better you said 1080 B this time and it looks like it on my end at least so cool yeah perfect please go ahead and comment if if there's any stream issues Sarah it looks like you said uh say you download the code to GitHub and make changes to it would it compile in flutter flow and would I be able to continue to develop the app in flutterflow so one of the recommendations I would make is to use our new CLI so flutter flow has a CLI and you can also to make it even easier on you one of our team members Abhishek released a vs code plugin so if you search flutter flow code export you'll be able to find that plugin and all it's going to ask for is the API code which you can find in your settings profile when you log into flutterflow also your project ID the project name and just a fewer settings and you'll be able to download your entire you know code base to your device and utilize it then you could from there maybe initialize a GitHub repo and then any changes you make on your computer you could continue to do so but if you make changes on flutter flow all you have to do is just pull that code again either using the Plugin or if you also search flutterflow CLI you'll find the tutorial on Google as well in the community in the what's new section too uh just type in that little code pull the code changes essentially that you made from flutterflow and you'll see those um those changes on the side if you've initialized a GitHub repo so hopefully that should answer your question there just adding a lot of customization to development when it comes to Florida flow nice nice yeah you guys notice I put up it's crazy how quick you can you can build these things out I'll try to go slower uh yeah but yeah I built this like little uh spacer up here for desktop I'll just remove it on mobile um reason being uh we'll probably do an app bar on mobile to where you know all this stuff is sort of in the app bar um and then this card will just sort of float up naturally so little little trick as well hey this here I'm going to go ahead and share as well that vs code plugin just make it easier for you anyone watching here so I'll pop that in the chat or flow code export plugin and I'm going to well I'll I'll actually utilize this line color because I like it um yeah I'm going to use a row here you could also use a list view um and do it horizontal we've set a Max height sometimes it's difficult managing horizontal list views and tap views and stuff like that typically when you have a set height for a container um you'll have stuff interact a lot better you won't get as many errors or hey you can't build that in flutter flow so yeah but we're going to use a row here and we're going to use cards in the rows and then we're going to expand them all um and then we'll actually just duplicate that and do a mobile view and a column instead of row um so I'm just trying to give you guys an idea of what we'll be doing uh nice but I think it's gonna be a lot of fun so Android notice you typically use light mode in flutter flow and I think that is the one spot where we tend to disagree I am a dark mode person all the way when it comes to flutter flow when I first registered I got used to it and I don't think I've I've maybe hit the toggle one time ever um but if you just always use light mode was there light mode maybe I don't know that maybe this is some some flutter background story it was light mode first and then they came out later or no no we uh we designed floater flow in dark mode um we actually released light mode like sometime last year which if you had read the timeline the 22 wrapped you would have seen um I'm just kidding um but yeah we released this uh sometime last year and I I don't know we we didn't think we could make a light mode that looked good and personally I sort of like it um I don't mind the dark mode last year I or last week I did the develop in dark mode which was fine I just sort of want to show off light mode I guess so nice I just wondered everyone has their their preference mine seems to be the dark mode at least when when I use flutter flow so yeah not a badass not bad it's fine nice I do uh in terms of adding break points that's been a discussion Andrew I'm sure you can answer that question a little bit better um just because you've been all around logging that I have but I think there has been discussion around potential break points but obviously right now we do have the just pre-chosen devices um on that right side as icons that you could choose to disable or enable but you want to touch on that a little more yeah we it has definitely come up where you can basically Define um your own break points um and that way you can sort of stylize based off of those break points um we've just discussed it so far um as I said in the beginning there's a way to sort of get around that you can hide stuff based off conditions um yeah so there is a way to do it now which is one of the reasons why we haven't prioritized that in the backlog we prioritize things on how difficult is it to do in floater flow now is it possible if it is possible you know like okay how much time will it save you people which this will save people time um and again it's probably going to come in that new update of responsive uh updates that we'll do later this year so yeah just keep that in mind yep I'm gonna do some padding there just duplicate this and Andrew has also been hard at work yeah go ahead Andrew I know you're just you're describing your design so I'm just you're generating over totally thank you so much I appreciate it uh so right now we have these as set widths um what we'll do is we'll just we'll expand them which will make them you know sort of retain whatever spaces around them um which will be look better on desktop so like as we sort of go like this like that as you can see like it's it's a little better we could actually use responsive text if we wanted to as well um we could remove this height now and then they will just adjust right we're going to make this look better this is what it currently looks like we're going to make this look so that it doesn't look like this um when you when you go down but uh great yeah I think we can make if we detach this holiday theme we can make this text responsive so we have mobile type type sizes and styles tablet we probably make this like 36 28 for same thing on desktop let's make this like 50. to um let's change this to top two better if if you're just joining us um yeah we flutified a great week this week we presented live from Nairobi Kenya yesterday at flutterforwards that was really exciting uh our two co-founders were able to present flutterfly live showing off the NASA API so if you're interested in watching that video you can head on over after this live stream of course to the flutter YouTube channel and watch a review of flutter forward some awesome content there about what's coming with flutter itself uh an intro to flutter flow as well and then Andrew and some other team members with flutterflow released a fantastic tutorial very professional tutorial I might add um in essentially how to build an AI image generating app so you can also find that there just searching on on YouTube basically how to build what is it no code experiences with flutterflow or build out complex experiences with flutterflow using flower flow to build out mobile experiences some I'll have to look up the exact title but yeah it is uh it was a lot of fun um that just going to Google and being in that studio was like mind-blowing you know I mean it's not like something that I do every day uh which is a lot of fun so it's um sorry I'm I'm trying to uh replicate this stuff let's see you're good I'm unexpanding these uh boxes currently because it will break when I try to convert this to a column if I don't so I'm going to replace that there you go perfect and now we can go back and we could you know set these to Infinity width nice and probably put some padding on them move this padding this will be our mobile view so so the question that's on the screen right now I built a web app and want to offer a mobile version of it but the design is different for example in the navigation bar so if you go to settings you can actually adjust the um the um yeah the navbar navbar and app bar settings you can adjust the responses yeah that's what I was looking for I'll show this to you um that's part of this sort of uh yeah that's part of this this whole thing so um see [Music] in one way I know you mentioned something like framer right so framer is interesting it's split up into different views all together um the interesting thing you could do in flutter flow right um is set up different components really set up your pages via components and then you could use those components across different pages to make things responsive or hide entire sections just by toggling on and off that that component so hopefully that makes building a little bit easier so you're not individually selecting every widget or things like that that would definitely not be a good responsive design technique um yeah dried out you choose the largest item in the hierarchy so such as like a container or something like that when it comes to really setting up your responsive design yeah and I just hit that column view I'm going to do this this is the desktop view so I'm going to hide that so when we come down here we have that and really you could probably do this in a grid view if you wanted to um or a wrap for you um so those are both things that are also possible since this is and since this is a different view we can actually adjust this stuff right we can make these rows um maybe like there's some padding on this guy so it makes it a little difficult but you could do this if you want to when you have a second remove that comment on the screen oh yeah yeah yeah cool that way just everything might be a little bit there we go yeah awesome yeah and I'll show you that I'll show you that right now um we'll go to settings here on the nav bar and app bar settings um when you do have a nav bar when you do want to have a responsive app where it's native right to have a mobile nav bar and on desktop maybe a sidebar or a top navigation bar which is very common for responsive applications um you can turn the navbar on here and we have responsive visibility so when you are developing as you saw in that sort of kanban if you're around for on that kanban board um I had this turned off on desktop and tablet same thing with the app bar but you still saw in the Builder when you deploy the app or run the app you won't see those things um but in the Builder you know they may show up but this is how you toggle on responsive visibility um where you just have a bottom navigation bar for whatever device you want I would do tablet and mobile and then on desktop since we hit it for the landscape tablet and the desktop um we have this little guy come up and this is our navigation on those two so you do have to set it up sort of custom I did this as a component um you can go back and watch last week's uh live stream I think it's like maybe the 10 minute Mark or something I sort of go through how I set up customization for a component um so that you can have different selected States so that's a good thing um nice awesome I'm Gonna Leave This for now ideally I would make everything like this so we take up less space um but for now sake of time I'm gonna build this two column layout here right uh and then we'll be good so I'm gonna just um when it comes to some other questions and keep them coming this is really great um really interesting comment I like where your head is going Yosef Joseph uh apologies there if I've mispronounced it I think that's an interesting question Andrew what are your what are your thoughts on this I know as you're building almost having two views right so you could enable a web View and a mobile view side by side I'm sure you wouldn't be able to edit both that wouldn't really make sense in terms of something for like flutter flow or flutter but maybe just editing One Core page and then having like two maybe semi-transparent views or something to see how it would look um so you don't have to continuously like toggle between it's pretty interesting yeah does it yeah interesting I think we're taking uh the webflow approach if that makes sense uh yeah and you know sorry if I mention competitors and it's not okay um but yeah like just the view of okay you can change the view right whatever view you're on you're editing for that view um eventually we would like to get to that place um currently you can edit you know like I said like Yeah well yeah when you do responsive visibility I guess it is like that right like we're not seeing the the mobile view here we're just seeing the desktop so nice um but yeah we haven't really thought about that there is a really cool I I did tease that I was going to release something about storyboarding I mean maybe there's a feature coming up that is very cool um but yeah uh that will be it'll really provide some clarity on how your app interacts and works it's super cool so nice um another thing that I'm doing just a small UI tip right uh Corner radius or border radius and drop Shadows instead of elevation elevation is very Stark um and and doesn't necessarily look I don't think it's polished personally right like when I look at an app and it has just elevations it looks a little janky but I do like Drop Shadows I like the ability to edit those drop Shadows I utilize our template drop Shadows all the time um and that's how I'm gonna be doing all of these cards so nice uh another question only one app bar or nav bar is allowed at a project right yes so in terms of the app bar at the top I would say yes obviously you could remove it from different pages if you want customize it per page for the nav bar at the bottom so that's a little bit more complex in the Florida flow Marketplace if you've explored that you will see some custom nav bars which might feature uh you know center button I think that's one of the most downloaded projects right now or most used so technically you can create a custom navbar and for example add conditional visibility to hide it when the keyboard appears so it doesn't move up right and still appear um so that's one way I guess if you really wanted to customize it per page for example if you wanted to create the Instagram effect right where in the profile icon it shows the person's profile image that's an example where you would need to create a custom um yep custom math bar right because you need to pull data into that that icon a container image or if you wanted to show a notification icon on an icon in the nav bar maybe that's sometimes where you need to build out a custom navbar let's see what else the best way to handle State and flutter or flutter flow in this case that's also something we're really working on as a team here so stay tuned for February we have some big announcements coming up just for State Management so hopefully you'll be excited for some of that um and the way you can stay tuned is either following us on Twitter we actually hit 10 000 followers the other day on Twitter I think as of flutter forward yesterday we had 10 000 uh 10.1 K followers on Twitter so that was pretty cool you can follow us on our Reddit Forum as well our slash flutterflow um on the community Forum community.flutterflow.io you can follow Andrew or i on Twitter I know we're tweeting all the time um a personal plug there uh just about flutter flow and different design techniques and things like that lots of ways to get involved in the flood flow community all right so I'm going to do a table here um a little this view ah keep those questions coming right we'll try to observe some of the last few minutes to answer those as we did last week so any questions you have I'll be writing those down if we don't answer them right now I'll do my best to to bring them up at the end yep perfect uh webflow though idea for the team something like CSS Styles so you could do conditional Styles actually so there's a little set from variable um text above specific colors and and I think we're there's talk of changing that is that correct to an icon or a set of text that's exciting to make the UI a little bit cleaner but you could technically do that now if you wanted right you could click on that conditional visibility or conditional statement of if the viewport of the device is you know seven or ten or a thousand or 720 then you could set one color you know vice versa that's one way you could do that right now um that honestly might be a little bit easier than CSS to be honest every time I I go into web development I know I'm always looking up how to add the breakpoint CSS uh again because I always forget the the typical break point uh break points from a CSS perspective totally nice Andrew this looks great um yeah if you're tuning in here for the last 10 minutes of the live stream Andrew's been building a responsive dashboard live right so on web you can see what it looks like right now and then um you know as you continue watching here there we go you can see it changes its format for mobile so a great uh you know preferred technique obviously nowadays when it comes to responsive design just uh let's move these little guys cool should I use these uh this little guy um I just created new templates yesterday for tables uh responsive tables so um yeah I mean technically these would be like Dynamic um sorry yeah Dynamic uh data but for now like I for the design aspect of it this is all wrapped in a list view so if you just like select this list view um you can backend query this and then connect all this stuff to data um and then as you sort of go down you should be able to get into my list View this isn't it's scrolling but it was scrolling all right yeah it should it should respond right so we have all this data and you'll have to adjust it right so uh to your font sizes because it's designed in one font size this is a different theme so I'm just going to do some and I'm following a sign in figma um just for those as well following so trying to go over I should have posted like a screenshot it's an education dashboard so nice Logan I know you asked the question how important do you think it is man this might be a competitive question between Andrew and I as well how important do you think it is to design a mock-up or wireframe first in something like figma or other tools then go in the flutter flow and build it so I'll start uh I am a figma guy figma wxd Andrew from what I understand you're definitely a sketch user is that right I am I am but I'm I mean I'm I'm using a figma file right like I'm you know yes I'm sort of ambivalent on the fact I do use uh I've been a sketch guy from the beginning so I enjoy that I've optimized my workflow all sorts of good stuff there um but I can use figma I like it auto layout this design is from a figma file so all good I think the core of the question is where is that one uh yeah this guy all right how important do you think yeah I do enjoy uh starting in a design software personally and will you can answer as well I mentioned this last week like I think it's important to sort of sketch out an idea in a design software where you can drag boxes around you have free form you know stuff um you can really create anything you want you can create iterations of everything you want so I create this dashboard like four times um and it'd be like fine um so all sorts of things like that um and then I like to implement into flutter flow once I'm in flutterflow and I have like the general concept I will iterate just in flutter flow um it's a lot faster and I don't have to keep two sources of Truth um so personally that's the way I do it yeah I think when it comes to your your workflow like if you're in an agency obviously it's a lot different than when you're working individually personally I have no like you know like technical design training per se um so when it comes to flutter flow I was always the type to just Dive Right into flutter flow um for me at least in the use cases where I was building it was almost like time was of the essence so I just went right in and and started building but that's not always really the best technique I'd definitely stick with Andrew and recommend if you can if you have the opportunity access to those platforms try to build out you know the design first because at the end of the day one it's going to probably be a more user-friendly more optimized design right most often the first design you come up with is never the ending design that you you launched or pushed so um doing that in figma first and being able to drag that anywhere or you know Adobe XD your sketch is going to save you a lot of time yeah yeah very very true right like it does depend on your workflow your your agency workflow flutter your freelancer workflow right um again I like to optimize my workflow so some would think oh I just do it in flutter Focus this week faster for me personally um it's faster for me to it's like figma has now become my sketch pad right coming from the design world it's very common to like literally sketch on a pad like different uh wireframes and user flows and things like that um now figma or sketch is my sketch pad like that's me drawing stuff out um as you can see where's my figma file I have my finger oh yeah I moved it give me one second let me move that back so we'll just showcase nice this little guy this is now my You Know sketch pad I'm able to sort of iterate quickly um come up with designs utilize different components um try different things um so and then I'm able to implement uh this stuff into flutter flow so easy because I have like a skeleton right there's very few cases where um design and development is done by the same person um and some of you guys I know right I know how it is to be a freelancer a contractor an agency like sometimes it's all on you um which is why we're doing these live streams right like I want to teach I want to help you guys learn how to design and how to use best practices both in flutter flow but also just in design right like uh last week we talked about using a header and a subheader spacing font sizes font choices um All These Little Things add up to a quality product for me as a designer I'm very comfortable in figma sketch any design tool I can adopt these ideas down and then I can actually pass it off to a developer and the developers I work with it's a lot easier for them in the natural flow of things to take a design and implement it into flutter flow rather than to be like hey uh you know here it is in flutter flow you know or or whatever like half give them a skeleton and allow them to mock it up right as the designer now I'm empowered right because now I can implement this stuff into flirt flow before flutter flow literally it was like well maybe it will be implemented um now I have the power to do that so any future plans of figma import or sketch to flutter flow um we'll see we've talked about this um it's never one to one right like our goal is to be able to export quality code um and typically when you're in a program like sketch or figma where you are free form designing and just like creating whatever um it's not really best practice and it doesn't typically turn out the best code um there are tools that you can do this no problem um I think our use case is a little different where we're trying to really emphasize clean code quality and handoff because you're able to visually build your UI visually connect your UI not just like build the front end you can connect databases all visually connect conditional actions visually all this stuff is very awesome like for me it's amazing I couldn't do this before um now I'm empowered and then I can actually pass it off to a development team and say look hey we need this like AI algorithm implemented and it requires a lot of code you know can you do this yes or can I export can I push to GitHub can you add the changes and then uh can we push it to uh deployment you know which is really cool so all right I may not make it through the whole um this whole uh design just so you guys know I apologize we're coming up to the uh End of Time looks pretty good though really good while you're finishing that up one other thing I wanted to mention I think it's important when it comes to like having some sort of wireframe or mock-up think about it in terms of like our use case right from flutter flow's perspective so if we just have only components and pre-made templates but we offer the community no figma file it's very challenging right and so that's something Andrew has really taken on and hopefully you'll see some of that um you know in more in 2023 right if you have a project that you're building that is somewhat customizable it's really helpful for users when you can provide them with a figma or sketch file because then they can customize it and then see what it's going to look like and go from there okay another question in this is actually something that I came across this week for a project I was building out so I actually might add this to the flutter flow backlog um when for the PIN code widget right pin code widget only has a typical keyboard with all the letters and everything there's no keyboard customization so you could type the letter H into your PIN code um so I agree with that I think that's something I'll suggest to the team so maybe we can just have a numbers only pin pad that way you can really recreate the feel of just typing in like a pin pad to unlock a page or something yep cool uh so we could we could duplicate this as well do the same thing that we did before right duplicate it and set these guys we'll unexpand them for now peace they'll look funky we're just going to replace this with a column and then we can actually do full width on those those set 16 pixel padding peace padding and then we'll explain yeah any plans coming to local States yeah we're working on something to release in February so stay tuned for that again you can follow us on socials uh join the community if you're a floater flow member you should be getting our what's new in flutter flow uh emails so you'll also see changes there so stay on the lookout for that hopefully most of you will be excited yeah yeah big changes I mean like pretty big changes coming to that so it's gonna be a lot of fun so wow awesome that looks fantastic Andrew I'm impressed yeah I mean I think we like almost got there you know I mean there's little things that we could do I I did a user table down here instead of these cards but um utilizing templates you know hey gotta love it um overall not bad um I hope this makes sense and works um yeah we have some some errors just because of this line chart and the nav bar but beyond that this is good to go um I'll just I mean I can create this as a clone you guys can have it in the chat uh you guys can access it whenever um that way I think this will live on on YouTube so just make it so you guys can actually edit this I think that's the coolest thing just seeing people seeing how peop other people build being able to end it uh Joshua Arnold oh I have a friend on the live stream what can we do with blockchain uh you can build blockchain apps on flutterflow um it does require some uh some kind of intricate Integrations yeah like you do need a developer for it but um I know that James uh from Left Field brands has done multiple uh blockchain apps so it is possible um to do this and integrate wallets and everything uh it's impressive like really impressive uh but yeah I think he he would like to sell that stuff uh eventually you know because he already built it um provided for the community so you can totally do it nice cool awesome any other remaining questions here uh just to Circle up today so far right so made some fantastic work on this web app responsive web app and mobile app it's a dashboard that Andrew made from a figma file um he sent the link in the chat as well you can find that uh just a review like we said butterflies had a fantastic week um you know presenting yesterday morning for flutter forward so that was a fantastic opportunity to share flutter flow with a global community of flutter developers and then also Andrew and some other team members had the opportunity to share a fantastic tutorial on AI image generation and how to build an app and flutter flow so you can find all that after this live stream on the flutter uh YouTube channel again not flutter flow the flutter official YouTube channel yeah you can search that yep yeah I know um we'll try to make this um it's not just push notification um it is push notification and also like an activity Stream So currently when you send push notifications there's no like uh collection you can pull currently um so what I typically do is I create a second uh collection of activity and as you saw in that kanban board app like um this activity stream is actually like my activity collection and uh each each of these things would link to a push notification so when you get a push notification you'll be able to click on this and basically go to that activity collection as well so it's it's this but also um providing this I'll show you The Collection sorry I know we're over guys um will I'm sorry I know you have a lot to do um yeah that's why I'm here right um yeah we're here but I will uh I'll do this I just want to showcase this collection because it is sort of very interesting so activity here if you can zoom in on your desktop like twice yep that would be awesome I'm gonna do this cool I'm gonna make this smaller and then I'm going to just oh nice perfect does that work yeah that's great all right this this is the activity stream every for every um push notification I would also create an activity to go along with it I would give it all of these things um this is these are the important points right the other user right is important so when I'm posting on somebody else's post the other user would be the owner of that post um the target user ref this would be a list of users so if there was um this one and this one would almost be different so Target user ref is whoever is associated with that notification they're here um and then unread by user this is what triggers the unread versus red um version so once you've clicked on one of those notifications if I had another if I logged into another one you can actually see this I apologize that I'm not um but you could actually you get a list and a notification of how many unread notifications you have you're able to click each one and be basically be added to this or be removed from this unread by user uh group and then it removes the number in this uh in this top here well so nice which is like I would say almost super Advanced that's me personally um I was blown away I was like oh my gosh I can't believe I did this uh so it's really cool but that's how I do that we'll try to get a um yeah we'll try to get a tutorial around that how to do that how to set it up either will or I um we both have a lot of our plates and that's sort of why we're doing this live stream is so that we can just add a little bit and go over stuff give you guys some tips and tricks to build um where we don't have to come up with a script and all that stuff um so I hope this is beneficial thank you guys for joining um and I hope that this helps you build better apps and flutterflow and ultimately deliver better apps to your clients and produce better apps so you can get more clients um or more projects so I have some low minions coming in and attacking me so I will bid a do um I hope you guys are well enjoy your week um oh no for next week we may be off next week we have Team trip um we're taking we're all going to be together um we're going to be in a different time zone so it'll be pretty late where we're at um we may have to skip next week and then come back again uh the following so awesome

Channel: FlutterFlow

Views: 17,942

Keywords:

Id: 7qqijQJf8vQ

Length: 69min 5sec (4145 seconds)

Published: Fri Jan 27 2023