Introducing Custom Data Types in #FlutterFlow

foreign [Music] welcome back to my channel I wanted to put this video out to you guys because there is a new Option that's appeared on the left hand side with inside flutterflow and it's all about data types and obviously you can create custom data types now with inside your flutterflow application and you can use it throughout kind of actions and custom functions I'm in the App State in the page State however you want to use them you can actually now shape up a custom data type which you can use throughout your application so on the left hand side here this new Option called data types if you just select that and you're into this wonderful screen which allow you to then Define a new data type now I've created one called user and my user has a full name it has an age and it has a list of favorite fruits this is just a stream list of favorite fruits okay so you can simply create data types by just hitting the little plus option here it will come up and ask you for a name once you put the name and hit create you'll end up with a bit of an Mt view here on your schema and then what you can then do is you can then start adding fields in and of course when you add fields in you can add the usual types of fields in you can kind of add data types inside data types and all that kind of stuff so you can really kind of build up a really quite deeply nested schema of of kind of fields but I've kept it really really simple here I've just created one that's got these particular fields in and I'm going to show you now how to use that throughout your application there's lots of use cases for this but I've just put a little sample together to give you a bit of a flavor to how you can actually use it so on the left hand side I've got the app State option and with inside App State I've created a field called user okay so I've just gone up to add State variable typed in user and in the drop down here I've selected a data type at the bottom okay and then when you choose data type then it will give you an option to choose the data type that you created on that previous screen okay so I've I've just selected user here and this is the one that I've got and it's just here and it's persisted so it's true so all of the data that I actually store with inside this particular data type will be persisted if it's on like a mobile device it'll be assisted so of course when you reload the application you've got all of the data that you stored with inside that App State user field okay so just don't bear that online of course you can set some default values as well so of course this pulls in the fields that you have specified previously and you could fill all these sort of details in and of course you can then have got all of these details of the uh you can add additional items into the list and all that kind of stuff so you can kind of sort of set up some magic if you wanted to before you actually use it inside your application but I've kept it really simple not put anything in there for now so here we are then in the sample application this is obviously the um the actual widget tree here of the application I'm just going to show you so it's a really really simple application Okay so we've got a couple of text Fields up here that is mapped to the full name in the age and then I've got this option called favorite fruits okay this is where I can just type in a a favorite fruit and it will just add it to a list which is the list of favorite fruits with inside my custom data type okay and of course update here this button here will just persist the value changes here to the application State variable as well okay so everything is situated with inside the App State and this screen is mapping onto the application state but the key thing is is that it's conforming to the custom data type that we've created or at least I've created earlier on which I demonstrated you at the beginning so let's just fire this application up and I'll show you how it works so here we are then with the application run and let me just type it in my name here put Steve in there this is not my age but I'm just going to put a 35 in I wish I was 35. I'm in the favor of foods fruits option I'm just going to tie type in apple and just hit the little plus there and I'm just going to type in Orange here and let's just add that in and of course by updating the custom field then what I'm doing the cut this custom field option here will just persist these particular values within the within the App State now when I do hit the update then what I've got is I've got some visibility uh some the rule that's really showing this High Steve but you'll notice here that there's a difference between Steve here which is kind of like an uppercase s and then the rest of it is lowercase to then a full uppercase uh sort of a name field okay and I'll show you what I'm doing is I'm actually calling out to the custom function and I'm actually converting that to uppercase and then returning the value back as a string so let me show you that in a second but generally it's really straightforward application we can then remove all of these details here and of course if I now reload the application up here because I've persisted this data you can see that I've got everything in there as well and it's retrieved back so let me show you how the custom function bit works because you can use custom data types within custom functions as well so let's pop back to the UI build let's have a look so here we are with them within the custom code section and I've created this really really simple one-line function which is called display name to uppercase and all this is doing is is just part I'm passing in the user the custom data type actually within so I've got a an argument here on the uh on the right hand side which is which is returning a string but at the argument that comes in this is this value here is the user so I'll show you that in a second in the action flow editor where I'm passing the user in and all I'm simply doing is is grabbing the user I'm pulling the full name out so we know that full name is a field name with inside the custom data type and of course I'm just using this function here called to uppercase this is just a a kind of behind the scenes kind of Dart a kind of operation that will actually allow us to then convert that to uppercase okay so just moving into programming territory there but um for people who have dabbled with some programmer will know exactly what that does and really all I'm doing is just I'm just returning it back so a string is going to come back I'm passing in the user data type of course is just returning that back okay and I'll show you how that's called now with inside the action flow editor so here we are then in the UI so let's look at this one I've got up here then so this particular uh sort of text filled up here is a text combination so I'm just saying hi comma and then if I just select that you'll see that I'm then showing the display name to uppercase and this is the custom function that I'm calling so all I've literally done up here I've just pressed the options up here I've selected custom function and I've then selected my display name to uppercase and the arguments that I'm passing in is the data type okay so the the the the data the user data type that I'm passing in is coming from the application state so if I just choose that here you can see that I'm just pulling out from the application State okay that's all I'm doing I'm passing it in and then what I've got coming back of course then is the the text value the uppercase uh name that comes back from that particular custom function so you can see now that what's the what's great about the custom data types is the fact is I can actually use those now as arguments within to my custom functions so that completely allows you to really get a little bit deeper now in and build out some really really quite complex custom functions depending obviously what you're you're looking to achieve but it's fantastic that it supports that so just cancel that and cancel that and of course how does the rest of it work then so with the name field up here so if we just look out at just a typical field that you're binding to the custom data type so I just select the name field here and I just move down here to the initial value if I just select that you can see that I'm choosing I'm going into the App State I'm selecting user and the field that I'm interested in is the full name okay so I can just show you that as a quick demo on on how I do that if I just uh if let me just remove this here and I can show you how that works if I just select this one here I can go into the App State I can select user and I can go to select field and I'll just go to full name it is simple as that okay so it knows it's my full name there and of course you know you you wouldn't be pulling out favorite fruits there because it's just a string value but you can see here that it gives you that full access then to your your list of custom fields that you've got with inside the custom data type so just hit confirm and then we know that's mapped so I've done the same thing for age as well now with favor of fruits there's nothing here at this little plus action here is going to add that favorite fruit okay so if I just go to the action flow editor and the magic happens on this particular one here called update App State if I just select that so all I'm doing is is I'm going to the update App State so that's the action I'm setting up and I'm going to set the fields if I just click on that here you can see that I'm now doing update Fields okay if I just choose that what you can either have set value and clear value if you're working at the top level so if you're trying to do the the full name or the age you can obviously set the value there but I'm actually updating the actual Fields itself so if I go to update user you can see here now that the fields I've selected is actually the favorite fruits and all I'm doing is I'm just adding to the list so with that selected you've got a number of other options here of course you can remove from list which is what I'm doing below but I've got to add to list so let's just um not worry about that but then I've got here the value to actually add and of course on my screen I've got a a fruit sort of text field and I'm really just pulling out the the text the text value that's being entered into that and of course I'm then saving that actually into the favorite fruits list with inside my custom data type so that's really really straightforward of course this last thing is just clearing out the text field once I've actually added that in so that's all good stuff um oh yeah I've set it up here through field to be cleared once I've actually played that action out so as soon as I hit the little plus that value gets added to the list and of course then the value gets cleared out of there now with inside the update custom field App State if I just go here of course I just open that up you can see I've got this update App State again I'm just setting the fields of the user so if I go into the update user you can see there the fields I'm selecting is the full name and age and if I just select full name there you can see I'm just pulling out of the the widget text field okay so it's just coming out of the actual widget State as well so just uh cancel that so it's all really really straightforward and then just close that down and then finally of course we then got the list view itself so the list view quite simply I've just gone up here I've just generated the dynamic children my fruit is my variable so every single row that I've got in here is going to be fruit and then of course with my value is going to be my my favorite fruits okay so again going into the App State I'm selecting my favorite fruits because it's a list so of course it's detected that and then that's absolutely fine then I'm gonna get everyone that I'm going to get back then it's going to be a fruit and of course the text field in here is then just bound to the fruit item so I just go in here and then I go to the the little edit up here you can see that I'm pulling out the fruit item here which is quite simple and then of course it's just it it is what is it is for itself it's just a string okay so that's what's going to get displayed on the UI and then finally then on the uh the little uh sort of a line here the actual term to remove it from the list you can quite clearly see here I've just got another action called again up updating the App State because that's where the the list is and of course I'm going into the set fields and then I'm going into the update Fields here which is update user and I'm going into my favorite fruits list with inside and then I'm removing from the list the fruit item okay so this is the row that I've got for every single one it's just the fruit item is going to then be removed from the list so it's really really really sort of straightforward I didn't put any update on here but you can update as well of course but um that's what I've just done for for Simplicity so um yeah so that's it so that's custom data types really really handy again there's there's many many use cases for this of course if you are building an application for example where you're looking to persist a kind of a structured data you don't you know you're not using a database or anything like that but you want to kind of shape up a nice set of fields to store data on your device then custom data types will give you the ability to then persist a a kind of a schema or a structure that you come up with if that is going to be familiar to you that you can then use throughout your application of course I'll just use the app State here as an example so yeah so I hope that's useful to you guys and um yeah good luck with your custom data types

Channel: The Digital Pro's NoCode Academy

Views: 4,536

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, custom data types

Id: khKMjVSmtSs

Length: 12min 16sec (736 seconds)

Published: Thu May 18 2023