Become A FlutterFlow EXPERT With These SIMPLE, Yet POWERFUL Techniques

now one of the things that I really like about flutter flow is that you can learn very very simple features that when you add to your app you are going to be giving your app some new functionality that your users will definitely appreciate and you can learn these features in an afternoon or maybe in an hour or two but you can also take it up andage so you can learn very very complicated features add them to your app and your app is going to be a lot more complex it's going to be a lot more interesting it's going to be a lot more comprehensive but there's also an interesting sweet spot where you can learn easy features features that you may not even think are worth learning that give your app very very powerful functionality and so in today's video I'm going to be showing you three amazingly useful features that you can learn very very quickly that translate into very very powerful effects that pretty much everyone should be leveraging when building their apps and by the end of the video I'm also going to be sharing with you a bonus feature that pretty much everyone should be using if you are building a certain type of app now before we begin as always all the apps and all the resources that I demonstrate on this channel are going to be available to view and or clone from my patreon page and when you join my patreon you're not only going to get access to all the apps that I ever published on this channel and you're also going to be joining an amazing eager tolearn Community that's always looking out after one another now the first feature I want to show you is very very simple and you can implement it in just a couple of seconds but it can drive some very very powerful effects now here we have a page with two widgets we have a button here that says okay but we ALS also have a text that says hello world now let's say you want to add an effect that does something to these widgets when the user hovers over a specific widget so let's say I take my mouse and I drag it and I hover over the button let's say I want something to happen or let's say I take my mouse and I hover over the text and I want something special to happen I want some kind of an effect well if I do that right now as you can see this button changes its appearance right so now it's red and the text says click me and if I hover back if I take my mouse off the button the button returns to its original appearance and same thing happens to to this hello world right so if I hover over it increases in size and if I go to the original position the the widget returns to its original appearance and so I'm sure you have seen this effect all over the web that happens everywhere lots of pages lots of apps lots of mobile apps you see it all the time and so not only is it very very easy to implement it's also very user friendly it gives a user an idea that something is about to happen that we are hovering over a specific widget before we may want to interact with this widget in some way shape or form and now if you go back to flut oflow this is actually a very very easy effect to implement because the only thing that you really need to do is you want to take the widget that you're interested in giving this effect to and you want to give it a parent called Mouse region and so here I have a button and all I need to do is right click on it say wrap widget and select Mouse region and this is the exact same thing that I did for button and the exact same thing I did for text okay so I went to text right click wrap widget and I selected Mouse region now when you wrap a widget in question with mouse region you are telling flutter flow hey flut flow I want to subscribe to new events okay I don't want the button to just know when something happens when I click on it I also want to be told when a user hovers over that specific widget essentially when the user takes their Mouse and enters that widgets uh area right enters the area where it's able to respond events so obviously if I'm you know somewhere here I'm not you know I'm not in this widgets uh Mouse uh event responding area I have to hover over the specific widget in question and that is exactly what mouse region accomplishes now apart from adding the mouse region parent to a specific widget component I also added a little bit of logic to create these Magic iCal effects now if you click on this mouse region here and you go over to the right hand side you can see that this is pretty much like any other widget that you have in flutter flow there are things that you can customize here and more specifically you can customize things like the mouse cursor right so you can set it to basic click non forbidden weight progress all kinds of different things and that's how the mouse cursor should appear when you are over that specific uh element in question so if you're hovering over this button and you change the mouse cursor the mouse cursor would look different so that is one thing that you can do but I did a couple of other things right so if you click on this actions here you can configure various actions and this is where you build some of the interesting logic when it comes to this mouse region widget here okay so if we open up our action panel here you can see that we have Mouse enter and on Mouse exit and this is where you can control some of the things that you want to happen when the user is hovering over that specific widget or when the user exits out of that specific widget and so in this specific instance what we're doing is we are changing the text and we're changing the color and we are doing that by setting and controlling different state variables so I have some page variables here I have button size button color button text and I also have have a couple of page State variables for this uh text here for a different widget and so what happens here is that when the user enters this specific widget meaning that when they are hovering over it we are modifying some page State variables and because these page State variables are linked to the specific widget so like text is linked here fill color is linked here and so as a result we have a very very nice effect so if I hover over what we're doing is we're changing the page State variables and because we've changed the variables this widget rebuilds automatically and the same thing happens here we change the state variables the widget is linked to them and it rebuilds automatically with different variables and now when I leave it's the exact same process except with different variables and so if you go back here click on Mouse region click here you can see that I have two actions here one for button color the other one for button text that changes the page State variables and rebuilds the widget and same thing happens here as well now while these are fairly simple effects you can go a couple of steps further and make it a little bit more interesting so if you take a look at this page here if I hover over this button you see it increases in size okay and if I hover over this image it increases in size so it creates this nice animation as you can see it creates this nice animation now the way I implemented those last effects is by doing things a little bit differently so what I ended up doing here is I created a mouse region uh for a specific widget that I want to work with and I created two versions of that button okay so I put them under a stack which means that the the specific widget will be displayed conditionally they will never be displayed at the same time so for instance this one here is displayed when we are not hovering over this widget whereas this one here is being displayed when we are and that way you can create two different variations and have each one display depending on if you're hovering over a widget or not and the same thing here we have an image uh under a stack under a mouse widget and we also have another image that's itself wrapped in a transform widget and a transform widget allows you to do all kinds of different transformations to that specific widget so in this case we have an image and so this is the default image here right this is a default image and the second one is actually using a transform widget that scales it by 20% so makes it slightly larger both in height as well as in width and as a result you have this very very nice effect that you know shows a little bit of an animation right so if you hover over there's a little bit of an animation and same thing here there's a little bit of an animation here as well and obviously you can take it a lot further there's so many things that you can do with it and this is exactly what I was talking about it's a very very easy to use widget just wrap it uh over a widget that you want to interact with a widget that you want to you know change depending on whether you know that widget is being hovered over or not and you can do a lot of amazing things so definitely think about putting this specific effect in your app as well now the second amazing feature that I want to show you is called Focus mode so here we have a simple page with a bunch of uh text inputs here okay and you can obviously fill them out and click submit and that's going to be good to go but you can also do a lot more interesting things with this specific setup here right for instance you can detect when this specific element or any of these elements really gain or lose focus so as you can see we have focus on this right we have the cursor blinking that means that this first input field uh which is this name input field has Focus right now so if we click on this we are going to be this element is going to lose focus and this one is going to gain Focus so if we click back you see text one Focus change and if we click here text three Focus change and the fact that we can be notified about this is extremely powerful right you can use it in all kinds of amazing situations where you know reactivity is important where you want to avoid at all costs a situation where a user needs to fill out all of these fields then click submit and only then will you validate the form right in other words you may want to validate each field separately and this is very very useful so check this out we can go to the second page here and here I have a form that where we are validating each field and we start validating the field when a specific field loses Focus so let's say this first field expects an email so if I typ James and I exit out it says invalid email so it has validated it right after we left the field right right after that field lost focus and if I type James and James James exit out still invalid email but if I type James james.com that should be a valid email so if I exit out there are no error messages anymore right now for this specific field here we're also validating it when that field has Focus right so when we leave Focus we're going to be validating we're going to be telling the user hey uh you know is this correct or not like is this field validated successfully or not so in this case it only wants a g email uh email address right so if I put James james.com and I switch to another field it gives me an error message it says only Gmail emails are accepted so thankfully I can put something like James gmail.com and there are no more errors right so now it works perfectly James gmail.com now this last field here it's a different validation mechanism right so what it wants is something else and you don't really know until you start working with it right because initially it tells you that field is required so if I put something like hello and I exit out it says minimum 10 characters so let's go ahead and put hello again exit out and now we don't have an error but if I delete that exit out it says minimum 10 characters so there's a lot of things going on here and I'm going to be explaining all of this to you guys but the most important thing that I want to stress is the fact that we have control when a certain element loses or gains Focus okay and the way that we can implement it is very very simple this is another very very simple feature that flutter flow provides that yields some very powerful and very userfriendly functionality okay so how exactly do we do it well if you go back here you can see that we are displaying messages right we're not really validating anything at this point we are simply showing you that this feature is actually working as intended so let's go ahead and go back to the app so this is this first page here this is our first demo here and the way this works is that if I select this field here and I click here and I open this up we have unsubmit this is when the user types something and presses enter we also have unchange so this is where you're typing something and it's going to be checking as you're typing on the field so you're not pressing enter you're not leaving the field but we also have what I feel is the sweet spot right this is UN Focus change and this is something that I recommend to everyone uh if you are going to be doing any kind of form Behavior any kind of form validation because unsubmit is not very user friendly unchange is probably not the best uh use case for forms right you're typing something you don't want it to constantly validate you're not finished yet so why would it need to validate whereas on Focus change is amazing and so we we have here A unfocus Change trigger and we have just one action right so for this first field we're just displaying a snack bar bar that says text one Focus change okay and and the same thing we're doing on these other fields right click here unfocus change text two Focus change right this is just to demonstrate this functionality right the fact that we have access to this right the fact that the system is telling us when a particular field either gains or loses Focus very very powerful functionality and we have access to it right so we need to be leveraging it right we need to be putting it to good use and how exactly can you do it well this is where you know the second example come comes into play here we have a very very similar example as the first one right so we have you know three fields we have email we have another email and we have comments but this time what I did was I wrapped these fields in a form right so if you're going to be doing any any kind of validation you're going to be doing any kind of you know user input right when you wrap them inside of a form you get validation for free right so you don't need to worry about validation right so as an example this previous one there is no forms right so yeah I mean I can do validation myself you know I can do all that but why would I want to when it's provided for free right so when you wrap it inside of form click on form here if you scroll down you can do automatic validation or you can just do regular validation where you can select the fields that you want to validate and you can specify you know what are we validating for right and there are two ways that you can do it right you can do it on a form level which is kind of what I'm doing here right you know I'm just you know this is field is required right so we're making sure that somebody's entering the field and that's it right we're also specifying text validation as email the second one we are doing something a little bit more complex we're doing custom regex right regex stands for a regular expression and a regular expression is essentially a way to specify a certain pattern right so if I want to match emails I would provide a regular expression if I want to match you know that a string has only characters lowercase characters for instance I will create a regular expression if I want to make sure that their five lowercase characters follow by two digits I will create a regular expression and for the second field here we are not selecting email we are selecting custom rixs right you can also select other things right you can select uh username email website so it's going to be you know matching against website but if you want to you know pull out the big guns you're looking to match something specific you want to select this custom regx and this is the custom regx that I have and what this custom regx specif ifies is that anything that we enter needs to end with gmail.com you see this dollar sign right here this means that this is the ending if we didn't have that dollar sign that means that that string could match anywhere but uh because we have that dollar sign it means that um this this specific string here needs to match at the end only at the end it cannot be in the beginning it cannot be in the middle it needs to be at the end and as you can see there's a backslash and you need the backslash because we are escaping this period if we didn't have the backslash then this period would mean something specific in the regular expression terminology more specifically would mean any characters we don't want it we want it to be that period and that's why we have this backspace so regular expressions are very very powerful but that's a completely separate topic but the bottom line is that if you're going to be doing any kind of validation and you need something specific where you know it's not a website it's not an email but a specific email something specific chances are you're going to need a regular expression now if we scroll down for this third element we are doing a built-in validation where we're saying that the minimum required characters is 10 and the maximum allowed characters is a 100 now we did not reach the maximum allowed characters we validated against the minimum right so when the user starts typing they are going to uh they're going you know see the the error message that shows because they haven't typed the minimum but if they keep typing and typing and typing and they go over 100 they're going to see the error message again and this is very very useful in situations where you're trying to get the user to give you some feedback or maybe you're building a message board or a social uh media app and you want that comment whatever they're entering you know at least be maybe 10 characters or at least five characters or maybe even 10 characters is better you don't want them to enter like one word or something like that you want them to enter maybe something meaningful something you know maybe something longer and that's going to be a perfect use case for that now there's also more things that I can do but that's going to be done on a specific element so if I select a specific element and I scroll down I have lots and lots of options so I can change my keyboard type right I can change the mask right so maybe I want them to enter something like you know resembling a phone number number uh maybe an American phone number maybe uh you know an international phone number with an area code uh maybe a date or maybe something else I can use a mask I can use a filter here so maybe I want English letters digits alpha numeric Custom Custom regular Expressions capitalization words sentences etc etc so I can also configure the behavior of my elements not only at a form level for validational purposes but also for Behavioral purposes on each specific element and when you combine this very very powerful form functionality which with each individual element where you can kind of tell it exactly what kind of data that you're looking for you can force the user to only input that specific data when you combine all of that with Focus modes where you're essentially asking the system to start validating only when the element loses Focus right which is The Sweet Spot that I feel you can create very very powerful functionality as well as create your apps to be more user friendly because in this specific case the user is interacting directly with your forms and you want this whole process to be as userfriendly as possible now for this next amazing functionality I cannot believe I did not discover this earlier because it would have saved me a lot of time and going forward I'm going to be leveraging this specific feature in all of my future apps because I get a lot of powerful functionality for essentially free I don't really need to code it I don't need to spend time on it all the heavy lifting was done by flutter flow now if you take a look at this page here what we have is we have a header and then we have all the items that start with that specific letter that's here in the header right so if we scroll down we can see that we have you know another sublist here and these are all um the cities or different strings that start with this letter right so if I scroll down the same thing happened now we have Chicago C1 C2 C3 and this is City 23 and it's under C now wouldn't it be nice if you can somehow you know have this header remain stuck on the page like wouldn't it be nice if you know this was scrollable but the header would remain and you see this all the time you see this everywhere you see this in all situations where you know you have a setup that looks something like this where you have a header and you have all the items that are you know have something to do with this header in this case they start with whatever that's being depicted here and you scroll down so wouldn't it be nice if this header remain on the page right so we you know as I'm scrolling this a is showing and then it as I scroll down that a gets replaced by this B and if I continue scrolling that you know now we're seeing the C wouldn't it be nice now it's kind of painful to do it yourself right so that is not really an option but what if I told you that's actually builtin functionality when you're using you know one of these flutter flow features right so take a look at this so here's the second demo here and it's the exact same thing we have the header we have all the elements but now as I scroll down you see that header is not going anywhere right it's kind of stuck on the page right a sticky header and as we scroll down you can see that we we are approaching this B and as we get to that b now this B replaces that a which is exactly what we want because now we are looking at all the B's and the same thing is going to happen to the C right we're getting approaching the C and there you have it now that b disappeared it was scrolled out of you and now the C is uh it's it's sticky right it's not going anywhere we can keep scrolling and we also have D and but in this specific case uh we don't have any items for dnes so we're you know we don't have a list but this is awesome Behavior now if I scroll back up it's the exact same behavior but in reverse and this is awesome functionality because you know it's just how it should be right it's exactly how it should be but if you're not using it chances are you don't have a sticky header because it's very very tricky to implement it and it's annoying and I've done it before and I don't recommend it to anyone but you get this for free so let's go back into flutter flow and let me show you how you can do it so this is my first screen here and as you can see this is just your typical screen uh what I'm what I'm doing here is I have a list View and then I have another list view right so this list view is this main list view consisting of all of these headers right and then we have a column we have a text so I can display the actual specific item for that header and then we have a child list view right so this is how you typically would do it you would have a parent list View and then you have you would have a child list View and that child list view is going to display the actual items right and so that is the setup that we have now in the second page where we have the sticky header we are leveraging flutter flow's sticky header widget very very awesome widget I didn't really know about it before but it makes things so much easier and saves you a ton of time so the way this works is that you essentially create a sticky header widget and that sticky header has two component components to it right so it has a sticky header header and a sticky header content okay but you need to make sure that outside of this sticky header right this widget you have some kind of a list view okay so I have this top list view that displays a bunch of elements now for the sticky header header right this part here it doesn't matter what you have inside whatever you have inside is going to be stuck on that page it's not going to disappear unless it's being um scrolled out of view to be replaced by something that's uh in the view right so as we had with the B you know going over the a you know a being replaced by b b being replaced by C etc etc so once you configure this header that header is not going anywhere unless it has a good reason to go somewhere right let's put it this way now for the content you can essentially put your list view this is the exact same setup that I have here right so I have this list View list view but in this case what I have here is I have this main list view always as the parent right as the parent and in this case is pretty much the root widget right is the first widget um under the page right and for the content this is where you want to display the actual list you right so it's the exact same setup except you kind of have to decide right which are the things that you want to be scrollable and which are the things that you want to be you know stuck stuck on the page so for me it's simple this this is something that I want to be stick and this is my scrollable list and that is exactly what I did I took what I had here I went over here and I just arranged it so I have my you know text this is my you know header here that's being um that is displaying that specific um letter uh in this case and then I have my content here right so I have my list view here and all the content and if you're curious what exactly I'm showing well it's actually just App State so if you come over here I have my app State I have my city letters which are just letters here and I have my city list and so these are just a bunch of cities that I have here now you didn't see New York or Seattle San Francisco because they are going to be way down the list and we didn't get to that part of the list we did we did get to Chicago uh we got to Bueno ciris I believe and then I have a bunch of filler uh items here A bunch of filler elements right so that I have a long list okay so A3 uh through uh a 15 then I have B1 through I think B10 etc etc just to show you some items on the list and then what I'm doing here if you go back here this list view just displays the city letters right so if I come over here it's just City letters right so it's a it's a list of those letters right A through whatever I had in that in that specific array now if you go to this list view here I'm doing something interesting here right I am only displaying in this list view actual cities that that start with that you know letter that that this is the header for right so in this list view let's say this is a let's say this is a right here right this letter is a I'm only going to be displaying the specific cities that start with A and the way I do it is if you click here I'm using filter list items and I'm creating a code expression I'm passing in the name and the letter and what I'm doing is I'm saying name must start with the letter that is the code expression and because this code expression expects a Boolean this here returns a Boolean right this is a Boolean right here and so when I pass the name I pass the letter and this says yeah you know it it goes through all the cities and it just filters out the cities that you know are going to be you know are going to start with that specific header so for a I'm only going to get the A's for B I'm only going to get the B so for every header it's taking a look at that long list and just giving me the stuff that starts with that specific letter really really nice um uh pattern that you can use in all kinds of apps and as a result we are you know iterating over this list here of letters and then this inner list view here right this is the outer list view this is the inner list view we are only filtering them so that they are displayed that you know for the cities that start with this specific letter here and because we're using this sticky header here we have this really really nice behavior and so this is a no-brainer right anytime you have something like this it's a lot better to have you know something like this right where you have this header that's stuck and in fact this is how it is you know in all of like apps that I've used if you're building an app you want to do it right right so this is kind of how you want to do it as opposed to something like this where everything just Scrolls out of you there's no sticky headers there's no sticky elements nothing okay so definitely look into implementing sticky headers for your uis where you're going to have lots of lists and come to think of it right many many of the apps that you're going to be building they're going to you know have a a list of lists you want to categorize the list I mean hypothetically you can just list all of these but it's so much nicer when you are grouping them by a certain condition right when you know you have the letter and it's like it's a nice grouping so I really really like this UI definitely recommend it and as you could already guess I'm going to be using it in all of my future apps now last but not least I want to talk about a feature that I actually don't remember if I ever covered on this channel but it's a very very useful feature it's a quick win it's easy to implement and it's going to make a lot of your users happy if not all of them so here I have a list of all of these cities right we're not grouping them we don't have a sticky head or anything like that just a regular list and what I can do is I can drag to the left right and if I do that I have various options right so I can drag back and I'm seeing the main tile here right and I can drag over here and I can do various things so I can share it I can delete it maybe I want to do something else so if I click on share it says just Chicago right just to show you that it you know I can do things with it right that it knows it knows it knows what's that we're dealing with right I can go over here to Madrid do the same thing click on share and it says Madrid and I can share it maybe I'm building a travel app I'm going to have you know various URLs or anything like that very simple Behavior another thing that I can do is I can click delete so what do we have here Chicago if I click delete see Chicago disappeared and everything moved up and now we have New York so I can click on share and we have New York or I can delete New York and New York has disappeared now everything moved up and we can work with the rest of the Cities here now if we go back to our app the widget that I'm using for this specific use case is called a slidable list tile and this is a widget that's fairly powerful because it gives you this cool sliding functionality where you can define various actions for free essentially right we're not talking about a widget that has a checkbox or it has this or it has that this widget allows you to essentially build out an interesting effect provide interesting functionality essentially for free you don't have to code it you don't have to do anything and the way it works is that you want to create your list view like you typically would and then inside the list view instead of putting like a card or a text or just a regular tile what you want to do is you want to come here and you want to search for slidable slidable list stle you want to click here and I already have this widget so we're going to cancel out and as a result you're going to have this list style here now if you click on this list style and you go to the right hand side you have slidable properties here and this is where you can Define the actions uh that you want your user to take on each specific item right so in this case I only have the share and delete and so as a result I have two actions here right so this is my first actions and this is share I can also rename it share action so that I know and this is my second action and this is the delete action right so I can rename it okay and if I want to add another action all I need to do is click on ADD action and it creates it's another action in the form of a child widget okay as a child element if you will yeah it's kind of a child widget essentially and let's say I want to call it rename action okay so maybe I want a behavior where a user can share a specific City delete it or rename it to something else and I can also change the icon here so let's say maybe name yeah that's a nice one and I can change here rename okay I can also change the order right so now I have share rename delete I probably want delete to be last and I can also change the color of this rename so maybe I want it to be blue I don't know light blue or dark blue let's say something like this okay that doesn't look too bad okay and so now we have share rename and delete and I you know I have the same actions as whenever I am creating any kind of you know an action to a trigger like a regular action right so I can select these actions here and come over here and I can actually know uh open my action flow editor and I can configure right so it becomes like a regular widget like a text widget if you click on it do this if you double tap long press is the exact same thing but we get this nice behavior for free and so all you need to do is you know drag it to the left you have these menus here you can delete it you can share it you can do anything that you want and come to think of it a lot of the apps that I use that have these list and you know fairly simple apps maybe apps that uh are not going to have another screen is it's not really worth creating a separate screen but you want your users to take some kind of an action they implement this functionality so a very very simple widget very very simple overly simple that adds uh some interesting functionalities for essentially free right so it's very very similar to Sticky header uh to focus input Mouse region where you have a very simple widget but you're getting a ton of functionality for free saving you time effort money aggravation struggle etc etc if you were to do it by hand from scratch now if you are interested in actually implementing these functionalities and start putting these things into your apps whether you're building an app from scratch or you have an app that you've been working on for a while then what you want to do is you want to have access to this app that I cre created here and that way you can reuse this functionality over and over again whether in the same app maybe on different pages and different situations or across all of your apps and the easiest way to do that would be by joining our amazing patreon Community because when you join our amazing patreon Community you're not only going to get access to this specific app you're going to get access to all the apps that I built on this channel which means that you can easily View and or clone them now I've built over 150 apps on this channel they're all on patreon you can clone them you can ask questions uh for that specific app you can get some support from our community members and most importantly you can save a ton of time as compared to if you were to code it from scratch so lots of time saved aggravation Save which means you're going to have a lot more free time to do what you love but that's not all when you join our amazing patreon Community you're going to get access to some extra content which means our q&as behind the scenes content as well as our patreon supported Master Class Series where I do deep Dives on various topics that the community wants to know more about and in fact I recently had a Q&A just a few days ago I did a master class on a very very powerful tool that a lot of people really really liked and found it useful when building complex app and you get access to all of that when you join our amazing patreon community and above all when you join our amazing patreon Community guess what you're going to be supporting this Channel and supporting my work and that is greatly greatly appreciated so if any of this sounds like is going to provide you with some form of value even a little bit I'm not even talking about a lot then I definitely urge you to learn more about our amazing Patron community and consider becoming a member we truly have some awesome people and community that are eager to learn and eager to help out others reach their goals and so you can learn more about this amazing Community via the link in the description below

Channel: James NoCode

Views: 5,061

Keywords: flutterflow, flutterflow tips, flutterflow techniques

Id: oFJJDysTQIY

Length: 39min 9sec (2349 seconds)

Published: Sat Dec 09 2023