Learn #FlutterFlow using #Supabase in 2023 - Full 5 + Hour Course!

hey welcome back to my channel everybody welcome to this particular video series on building a brand new flutterflow application using the Fantastic Super Bass as our database back end we are together gonna from scratch gonna build a goals tracking application this application will allow you to add some goals in you can then add some tasks against those goals and then you can then track the progress of those goals with inside the application the Fantastic thing about this series is we're also going to be implementing Super Bass authentication in the app we can Implement row level security as well we want to make sure that our data is locked down to the users who are manipulating that data and um and the great thing as well is that we're also going to be then going even further than that and we're going to be putting some very very special modifications into our application which will allow us to kick off triggers and routines with inside Super Bass that's then going to then update data with inside our application so then we don't need to do that with inside education put all the hard work on the server side we don't want to do it inside the app so I'm going to show you how that works as well so before we actually have a look at the application then we just need to ask these simple questions on on who is this series for of course so if you're just starting your journey with flutterflow um this walkthrough will provide the kind of valuable information really on app structure and of course there's probably some useful takeaways in there for you as well if you are considering flutter flow if it's the right tool for your project you might be coming from another NOCO tool and you want to see your flutter flow checks out for your own project then you're definitely in the right place so do have a look through and just see if it builds up to something that you are looking to use yourself now Super Bass is becoming a popular choice for flutter flow developers of course we've got super bass in there or we've got other sort of back-end Services via API now Super Bass is becoming really extensive with inside flutter flow so this is going to really bring you to home that on how you can use Super Bass with inside flutterflow and of course if you'd like to follow along building the same app so this app on the right hand side is what we're going to build you'll be able to follow along and the idea is at the end of the series then your application should work exactly like this as well of course along the way hopefully you're going to learn lots of new stuff as well to enhance your own skills and of course the application will be extended with your own ideas as well now the series is suitable for beginners so of course so we're always welcome beginners on the channel of course you should be able to follow along and hopefully you can pause starting and all that kind of stuff for the video but at least hopefully you'll be able to pick up those skills as you go along and then you'll be able to then start implementing that with inside your own applications so next up then what are the application features so we're going to be building a full flutter flow project with user registration signing using Super Bass as the backend database we can Implement that in really important row level security to restrict access to the data which is being associated with the user now there's many videos up on YouTube that just kind of Skips past using row level security but we're going to actually use that with inside this application now the application contains four pages and five components so not a massive application of course remember in flutterfer you can create applications in a whole different different ways okay so with our particular application we're going to build it in this particular way to suit kind of what you're seeing on screen here but um of course there's many different ways of building these applications we're going to use some of the new features in there as well like theme widgets to apply to apply UI consistency as as well and this is the fun stuff we get to use some Advanced Techniques within Super Bass as well so um you may be a beginner but my gosh by the time we get to the series you're going to start learning some some real key features of Super Bass as well um to to to enhance the UI experience the idea really there is to ensure that um sometimes you can reduce the complexity with inside your flood of our application actually put the hard work at the database level certainly on the back end service level so I'm going to show you how that applies with inside this application as well now this is a full no code with inside flutter flow so you don't need to write any code whatsoever you'd be able to design it using the UI build and the widget tree um now with when it comes to Super Bass however there is going to be some low code we are going to have to get our fingers dirty with um some some sort of more low level sort of uh sort of like SQL queries and things like that but I'm going to really try my best to keep it really really simple in understanding and I'll walk you through how we go about doing that with inside Super Bass so um yeah that so don't worry too much about that well I'll explain everything along the way so what we're going to need for this application so we're going to need a free or paid subscription for flutter flow that's a great thing you can get started right away please do the see the link in the description to grab yourself a flight or flow account if you haven't already got one and with Super Bass as well you just need a free account as well so there's no money to get started with this you're going to build everything you see on the right hand side you're going to be able to build that um of course there's going to be need to be a little bit of willingness to learn of course so um please do stick stick with the series please do be patient and of course the good thing about it is they don't have a base project for you to use right off the bat that you can then start building as the series goes on as well and at the end of the series then I'll um produce the final clone of the project which you can then take and then you can actually modify yourself as you need as you see fit so there's just a little bit of low code there at the database level but I will really as I said try my best to explain how all of that hangs together as well so it's walk through time okay so um please do get yourself comfortable for this particular series um and of course do hit me up there on all the social media channels as well as you can see there as well that I'm a flutter flow Ambassador for Europe as well so uh hopefully that gives you a little bit of comfort in in knowledge that I'm here to kind of help you along the way so without further Ado let's have a look at the application and see what it looks like so here we go then let's have a look through the application then so here I am at the sign in screen of course I can sign up here if I wanted to but I'm just going to Simply log in okay and that's my email address and my password so let's sign in and I'm going to be taken to the home screen here this has got a couple of goals that I've already created inside the application you can see I've got the gold title and we've got some description here we've got a bit of a progress bar that goes along here with a percentage indicator that sits in the middle of each goal we've got the time the goal was created and this is a section here which will shows you how many gold how many sorry how many tasks are associated with each goal and how many are completed okay so I can simply just um just sort of Select this and you can see here that I've got some tasks that's associated with this particular goal if I go back and choose this one here then I've just got a couple of tasks there that are associated and of course I can come in here and I can actually just hit that one there and just say this complete and go back and you can see in it here that I've got two here against the one that has been completed I can go back in here select that one and of course I can then see now we've got two of two completed now the goals and tasks are distinctively separate and with inside the actual goal if I just hold the left Mouse button down here or of course if I was on a screen I could then hold my finger down on the goal you can see here now that I can independently choose whether this is in progress or it's completed if I go back to not started you can see here now as I move the uh the kind of the progress indicator here the the status in the drop down changes but I can just sort of say 35 and hit update and you can see now that I've got a like a an orange or like an amber color that is I'm representing here that's something that is actually in progress at this moment in time of course I can just go back here I can choose the update again to 81 it will just go up if I just hold this down again I can then say here that actually is now completed if I say update goal I then get a nice green kind of color to represent that the task has now been completed and of course I can hold down this and I can just go and archive that now once I'm sort of done with that here update and it will disappear from view as well I've wanted to get those archive ones back I can just hit the little archive option here a little bit of animation and I can say show archived and just put that there to turn on or off and of course then the archive ones will be then hidden or not displayed so um that's fine I can just then just go back here turn that off here and of course I'll hit the little plus here and I can create a brand new goal and I'm just going to say test goal just put some sample information in here and then just sort of say okay well this is now I'm kind of in flight I can say it's in progress hit create goal and it'll then create it for me so it's underway so very very simple application but there's a lot going on with inside this app so we're going to start with completely a bright a brand literally a blank canvas okay I've created some assets with inside the actual uh sort of clonable project and I've got some theme widgets already created but that's going to be the foundation for us to now build that application so uh in the next little section we're just going to then focus on actually cloning the project and then in the next video we can then start the The graft to actually then build the UI out so we're going to be chopping and changing between uh sort of Super Bass and the UI throughout the whole of the series so uh yeah please do keep track and uh let's uh let's move on to the clone of the project so the first thing that you need to do is grab yourself a flutterflow account if you haven't already got one the link is in the description if you need one of those it's absolutely free and then you also are going to need to have the link which is also in the description which is the base project this is the starting project ready for you to then start building out the application so please do hit that link it will take you to this particular screen and then you just need to hit on the Clone project option here and then give your project a name and then you'll be ready to go so here we are then with our clones project this is our base project ready to go here we are in the UI builder of flutterflow this is exactly what you should be seeing right now I'm going to click on the left hand side here on the actual widget tree just hit that and you'll see here that we've got our structure to our application somewhat already created so we've got a couple of folders one called out Pages which you just can containing this single home page at the moment and authentication which is contained in a couple of blank pages that will support our sort of our login and our sign up screens and then components doesn't have anything in there at the moment but as we start building out the UI then the components folder will start filling up with various parts of our application so that's the structure of the application with inside the widget tree let's have a look and see what else we've got so on the left hand side here you can see App State got nothing in there at all but we will be putting some some pieces in here for App State as we move along so apps they will just track various pieces of key information unlike whether the filter bar is being displayed or not and all that kind of stuff so we'll be putting that in there we aren't using any API calls with inside this particular application because we're going to be using all of the great functionality that flutterflow provides with hooking our application up to Super Bass so we don't need to worry about that and with inside the project media and assets we've got one asset in here and this is just an a Lottie animation that we're going to use with inside our application you you might have seen on the preview that we've kind of got this animated kind of Arrow hitting like a bullseye of a Target that's that particular animation that's just kind of in there um the rest of the application um there's been two not too many changes too we have no custom code or anything like that and the great thing about this particular application is we're going to be writing no custom functions or custom Widgets or actions or anything like that with inside this application so where there is some changes with is with inside the theme settings so down here with inside the themed widgets there is some setup that's already uh been sort of created for you so um I'll I'll describe what these are actually with inside the application and when we're actually using them but generally they're just some preset styles that we've created some couple of key widgets that we can then apply to the uh to the widgets with actually with inside flutter flow so it just means that it just keeps a little bit quicker for us in terms of The Styling you don't have to spend so much time with inside the properties and styling everything up individually because I've kind of already created these here but we'll walk through and I'll show you how all of that functions throughout with inside the actual colors um there's some colors that's already been set up in here um generally the application although does support a dark theme as well so you can easily use a dark theme inside your project in here we've got a light mode which primarily is what we're going to use but of course if you wanted to add anything into the application to toggle between light and dark mode then the application will easily support the dark mode so um so yeah so the palettes have all been set up to support that with inside this particular application so um not much else really to talk about with inside the app details um there's nothing here I think of note to mention about we'll we'll delve into each of these as we start implementing authentication and setting up super bass and all that kind of stuff so I'll walk through that completely from scratch so don't worry too much about that at all okay so let's focus our attentions on building this particular screen this is the login screen so as you can see here we've got this little Lottie animation that just sits up it's a little Target for Bullseye and then we've got a piece of text here which is kind of like the heading of our application and this is kind of in its own kind of column and then we've got another column down here which contains a container which contains some rows and all that kind of stuff in order to support our application so let's build that now so if inside the widget tree I'm just going to choose the login page here that's how we're going to start our application and just down here in the widget tree there's nothing there other than the page itself so let's first add that particular container so hit container we've got out there and on the right hand side we're just going to choose these options here we're just going to make it kind of the full width and then the full height so everything is now fully stretched to the to the right and to the bottom and we're just going to choose this here where it says fill color change the secondary background to the primary background it's kind of got that slight sort of subtle sort of gray look to our application now with inside our container we're going to focus on this bit here this this kind of Lottie animation and this title so let's move here let's just make a change and let's hit the column option here so now we've got a kind of a column and then we're going to just move inside that column the first thing that we're going to do very simply is just type in Lottie here type Lottie animation and then I'm just going to hit the little plus and then we're going to add a text in there as well so we just got that just below now with the Lottie animations if you just a select Lottie animation we're going to choose the one that I've already loaded with inside the base project so on the animation Source on the right hand side choose asset and then in the asset animation choose a chart tag icon and then that's all that we need to do here we're just going to move actually down to animation type wanna just do this once so we just want the animation just to play out once when the application loads up now our Lottie animation we're just going to give it some some padding from the top of say 30 here so just make sure Lottie is selected just choose 30 that just brings it down from the top so we're just going to choose the text option there and we're just going to give the text a name to my goals and then with inside this particular option with the theme a style unset we're going to choose that and we've already got a style with Insider application that we want to use so just choose text style heading and you'll see now that will make it much much bigger and I'm more in keeping with the design that we kind of see just over there so with inside that that should be everything that we need with inside that top column we'll probably come back and make some minor adjustments very very shortly um just one thing to point out actually is that with inside the whenever you apply one of the text sort of widget Styles there seems to be this little niggle with inside a flutter flow that seems to occur where you kind of get a conditional visibility that gets selected so we don't want any conditional visibility we always want this to be displayed with inside the UI so um it seems to be happening now but of course at the time that you might be watching this video this might not occur but if it does just make sure that you just turn that off there it doesn't have any impact with inside the application but it's just you kind of see a little eye icon there just appears down here we don't really want to see that with inside our application so next up then within our column let's hit column and let's add another container so just choose container and this time within our container I'm actually going to give the container a name so just at the top right there let's call this container and call it form container like that just hit a little tick there so it's nice to give your widgets a good naming convention if you can you don't need to do it across every single widget but certainly when you are building out quite a complex UI by giving names to your widgets will easily help you identify where they are actually in the widget tree when you're sort of expanding and collapse and all that kind of stuff so just bear that one is a little tip there so we've inside our form container let's also hit the little plus here let's hit column and then with inside our column let's add a couple of other widgets in there as well so let's just put a couple in there we'll come back to those in just a second now we're inside the form container just select that and we've already got a style that we can apply to this particular widget already so with the form container being selected let's go up to where it says widget styling and choose container primary and what container primary will do that will just add some preset styles that we've created for a an actual container where we kind of got a little bit of a a sort of a shadow a sort of rounded borders and all that kind of stuff really so again you can see those with inside the actual the theme widgets section but that's what I've got selected at the moment so we just need to make some changes to the form container so the first thing that we're going to do is we're just going to give the width an infinite width so just going to move that out and then with inside the actual padding we're just going to choose 20 and then we're going to give 20 at the top and in fact let's do 20 on the right hand side as well so just brings it in and then naturally what will happen now is as we start adding more and more widgets with inside that form container then the container will actually then extend in height so what we're now going to do is with inside the um the actual First Column that we've got here we've got these couple of text widgets so let's sort those out first So within the text Widget the first one that we're going to do is we're going to make a slight little change so within that one being selected let's move up to theme style so just choose that one and we're going to choose a text style heading so that will just make it a little bit larger and we do need to come in and we do need to kind of reduce the height of that so let's choose say font size 24 there we don't want it to be too large everything else that we got there the color and everything is is looking pretty good and then what we now need to also do is we now need to just kind of work on the actual column padding as well this actually inside with with the column selected here this is the this is the column with which is inside the container we now need to give it some padding to bring everything off of The Edge okay so up the top here let's just choose a 32 let's hit the little lock option and that will lock in the same across all of the respective sort of the the top the bottom and and the left and the right there okay so you can see everything in our has been brought off the edge so this next piece of text we now need to change so under the theme style here let's choose that and let's choose a text style Body that's just moved it actually we've got a bit of padding there this move to the top there that's absolutely fine 16 at the top and 16 at the bottom what I'm going to do now let's just change this text in here so the first bit I'm going to type in is fill out the information below in order uh to access your say actually account there we go so that's all that we need to do and then in this top one here let's change that and let's change the title to welcome back so that's the first piece that we've got there and if you look now at the the sample that we got there that's very very similar to what we have got there so let's move now down so with this the column as you remember here we've got the kind of the visibility uh conditional visibility that's been set with the text on let's just quickly turn those off so we don't need those now next up what we're going to do inside our column as you know with a column everything is is vertically stacked so we've inside a columnar now I'm going to add some text fields in because we're going to want the user to actually now log into our application so move up to the little plus here let's do a search for text field there it is just at the bottom there text field just choose that there's one that's been added there let's just then right click and then let's just say duplicate so you can see here we've got two now let's now apply the style into both of those I could have done it on the first one and then of course duplicated it but I didn't quite do that then so let's just click on theme style here and we've got one called a single row so just choose that and then on the text field below we can also choose single row so there we go now we've got some padding that's been sort of applied here so we've inside the text we just we do want to actually turn that off let's turn that horrible conditional visibility that gets set off let's just take off the the 16 on the right there and let's do the same thing here as well as turn off that conditional visibility let's just delete those out there as well so that's looking pretty good um this field here is actually going to be a password field okay so just with that selected let's just move down here just keep scrolling down here and you can see here there's actually a password field mode so let's just let's just select that that just means that it will kind of like you know hide any of the text that we actually put into that particular field so what now I'm going to do is I'm now just going to rename these particular Fields so we've text filled the first one selected let's just change the name up here to email address and you'll see why this is important later because when we actually reference these actual text Fields with inside our actions we can then reference them by their name so email address will be quite obvious to us and then of course password will be as well so with the next one selected let's just choose text field let's move up here and let's give this one a name of password okay that's all that we need to do there so we need to just change this hint text here as well so just with that selected let's just move up here to the the actual hint text here I can find it there it is so it says some hind text let's just change that to enter your email address something like that and then with inside here we can just do the same thing as well enter your the password something along those lines that's good now with inside the column just choose the column again let's now add a button in because obviously going to want the user to actually log in that's going to be quite important so let's just hit the little plus here and let's just do a search for button there it is just choose button and we have got some Styles already set for a button across our application so just with this selected choose a theme star and choose button primary and of course we're going to probably just move our button off the top there so let's um just choose 16 there on the height that keeps things I'm pretty in keeping with the the rest of the spacing that we've got between those particular rows and then we're actually the actual title of the text the button sorry is called button we just want to change this to sign in like that that's all that we need to do there so that should be pretty good it looks like we got a bit of a bit of a margin going on here so let's actually just extend that out there so there we go so that's now in line with the actual show the actual form Fields as well so that's looking pretty good so next up we're going to add another widget into our column so just choose the little plus there and we're going to do a search for a rich text just select that and then with inside the rich text widget we've got a rich a text span that's going to be our first piece of content so that's going to say don't have an account so let's just select that and we're just going to say don't have an account like that with a question mark and put a couple of spaces in as well and we're going to now choose the next Span in as well so that's with that rich text selected let's say add text and then in here we're going to say sign up here like that so that's perfect now with the rich text selected let's just put another piece of padding in here of say 16 that just brings it down a little bit and then within the font weight let's just choose font uh Medium as a size makes things a little bit more bold on the top line in there and then what we're going to do on the first Rich Tech span we're just going to make sure we've got a font family selected as a themed font a font and primary family which is pop-ins is the font and then we just need to change the text color to be the secondary text so choose secondary text just makes that a sort of slightly grayed out look and then within the second one just choose Rich Text span and with the font weight we're going to make this pretty strong of say 600 semi-bolds and then on the text color we either going to choose the primary color there so that's pretty well much our Rich attack setup there and of course when we come back onto the screen again we'll then link that through to the creation of the account page once we get there so that's this screen Pro much created in fact we've just seen here that we've got that that kind of visibility that's um the conditional visibility that's been added so let's just make sure that is turned off there so that's uh that's pretty well much as we need and of course Lottie animation is not going to display on this particular page at this moment in time because it's the first frame of the Lottie animation is completely empty so you're not going to see anything but of course when we do run this up you'll get that animation play out so that's this particular login page screen created let's take the screen and then let's create the next screen which is going to be the create an account and um well we can duplicate this particular page and we can then create that so let's get ready to do that now okay so let's take the contents of our login page and let's copy it and move it across to our create an account page and then we'll make the changes so with inside the actual container here of the login page just right click and just say or literally click on the little copy option here and select that and then on the create account page just move over there and right click and then hit the little p there to paste it and we're going to get everything as we had it previously and we can now just make those adjustments that we actually need on this page so let's move up to where it says welcome back let's just change the text there to get started like that and then we can just change this piece of content here as well okay let's get started by filling out the form below just a very simple piece of text here now on the password field we're going to duplicate this because we need to have a confirmation box for our um our password so just hit the duplicate there and then within here we can just change the hint text here to confirm password there we go and then with inside this and password field we're just going to move up to the top here we're just going to actually change where it says password we're just going to say confirm and then uppercase P confirm password um I'd just made a little typo there it's a confirm password there we go so I'd like to um with my Fields funny enough it's just a programming habit but you'll notice there that I'm using kind of like a camel case scholar like a lowercase um kind of first letter and then I've got an uppercase letter um I seem to do that when I when I'm actually applying it to my text Fields so um please forgive me for that but that's just an old habit but pretty well much everything else I do there I kind of have like an uppercase letter for the actual widgets when I actually change names but that's just a personal thing but of course you can follow whatever convention that you would like we just need to change this button here now we're just going to change this to the let's just find that the actual sign in here and we're going to change this to create count quite simple and we just need to change the text across the bottom here as well so on the first Rich Text span let's just change this to say um already um got an account like that question mark and then where it says sign up here we just need to change that so just choose Rich Text fan there and let's change that to log in here like that that's all that we need to do so that's looking pretty good that's looking good um so I think that is how easy it is to with inside photo flows to take something you've already got you literally copy it crane you you've got a new page you've pasted on there and you pretty well much got the foundations of everything that you you need in order for that page to to work so here we are then on the home page of my dashboard for Super Bass as you can see I've got one project already created called goals if you just created your Super Bass account then you'll have no projects on here so I'm just going to go ahead and create a brand new project now so I'm going to hit new project and click on the organization which is mine is called the digital Pro so I'm just going to put my name down here and I'm going to call this project my goals and database password I'm just going to sort of generate a new password here so just you don't need to make a copy of it but um I'm sure I'll put that into a notepad somewhere so you've got that somewhere safe I'm going to choose my region as the West EU and keep it on the free pricing plan I don't need anything more than that and hit create projects so this will take just a couple of minutes to provision your database and get up and running so just leave that to do its thing and we'll be right back so our project has just been created as you can see this is the home page you're likely to see something very similar to this now we are going to create two tables with inside our project now the tables are going to hold our data so if you're not too familiar with databases we've got two tables in this project one is called goals and one is called tasks and they're both going to contain different sets of data but we're going to link the two together and I'll show you how that's done very very shortly so let's first up start with by creating the table so what I'm going to do is I'm just going to bring up a couple of slides which is going to give you an indication of what the contents of those tables will look like so this slide is showing you our goals table that we're going to be creating very very shortly it's going to be used to hold all of the goals data with Insider application on the left hand side you can see the columns that we're going to be creating very very shortly pretty pretty self-explanatory there I'm going to show you kind of how they all kind of operate and Link together very very soon on the right hand side slightly we've got the type of the column that we're going to be creating as well plenty of text based columns in there as well there are other data types available I selected text for this particular project but if you were looking to constrain perhaps the data with inside your your table you might choose a varchar for example where you can actually give it a predefined set constraints such as like 100 characters 150 characters but I've just used text on this particular occasion there's also in2 in there as well with just like a small range number that we're going to be containing in that particular database column and also as well there's some default values there as well so you'll see how they are defined very very shortly when we do that with inside the the creation of the actual database table there's one more table I need to make you aware of and that is tasks now of course with each goal there's going to be tasks associated with the goals so I'm going to show you how that kind of links up a little bit later but generally you can see here we've got some a smaller number of columns in this particular table with some some simple sort of data types there as well so again I'll show you how that gets gets set up very very soon so that so that you please use these slides as a reference point into creating those tables just to make sure you've got everything set up correctly but I'll quickly get those set up very very shortly so let's now commence creating our goals table so just move over to the left hand side and click on database uh tables is already selected and then just hit new table up at the top right so my table is going to be called goals and I'm going to turn off row level security just for the moment we will come back to that so just turn that off let's clear the warning just hit confirm and then down here this is where all our columns are going to be create data from our database so leave the first two as they are we don't need to change those let's hit on ADD column and I'm going to type one in here called title and the type that's going to be for this column if you remember is going to be called text and that's all that we need to do so I'm now going to carry on creating all of the columns as per the previous slide and we'll come back and check in just a moment okay so I've added all of the columns to this particular table you can see there that's pretty well much as the slides that we had earlier on the only difference of course is we've inside the default value I'll just put zero down there because that is the default value that we're going to be including and I'll just also make sure as well on the actual Cog here that we actually take the little checkbox off is nullable and you can see the difference here between this one this one this one and this one that's what I've taken off we want to make sure that we're pretty clear that that particular field is not going to contain a null value basically nothing at all so we know we're going to set some values in there so that's pretty well much our table set up so hopefully if I can just hit the save now and our table will get created so let's now create the task a table so just hit new table here type in tasks and let's turn off the row level security just for a moment hit confirm and I'm just going to go through now and start creating the additional columns that we had in this particular table so we'll come back and check that in just a moment so now all of the fields are now created for our task table you can see that's pretty well much as we expected to be if you just follow along and just key those in as well you can see the only change I've made here is just on this field record here I've just made sure there is nullable is unchecked and just make sure that you've got the default value of false in there as well so that's pretty well much our tasks table set up so let's hit the save option let's just make sure that that table actually saves okay of course you've made any errors it will come up and actually give you an indication of what the error will be you can just go in and then change it and then hit save and hopefully you'll be presented with what you see now so both of our tables are now created so now that our tables are now created let me introduce you to the world of policies now this is going to be a step we're going to introduce which is going to move us towards enabling row level security with inside our Super Bass uh project now the key thing here is that on what policies are going to do for us in this instance is that when a user is authenticated with Insider application so they're signed in and they are exchanging uh sort of requests back to the Super Bass platform we're going to want to put some controls in place that's going to check to see if the user that is making that request whether they're updating data whether they're pulling data in we're going to want to check to make sure that that user is who they say they are okay that's really important so what we're going to do now is we're going to create some policies that's going to enforce those measures with inside the database so let's walk through that now so let's move over to the authentication option here on the left hand side and you can see here that we've got option called policies on the left hand side just select that and you can see now they're going to get these warnings about that we haven't got row level security enabled don't worry about that we'll do that very very shortly but let's now start thinking about our policies so we're going to want to apply some restrictions on our goals and our task table we're going to want to make sure that any operation that is taking place of inside those tables the user who is making those uh those requests are who they say they are okay so that that's important so for example if you have data that is associated to a particular user and the user is requesting that data back or they're making changes to that data we're going to want to check to make sure that they are who they say they are and the way that we do that is we introduce some policies so just move up to the right hand side here with against the goals table hit new policy and there's this option where we can use some templates or we can do a full customization now we're just going to do a full cost here the templates is actually part of this this kind of this window aren't what we're looking for so we're going to create a brand new one and I'll talk you through how that particularly this partic this particular section works so we need to put a policy name in so we'll do that in just a moment you can see here that we've got these allowed operations select insert update and delete now these are just traditional um uh sort of operations that you can you can do on on the database and so selecting is obviously when we're just trying to select and retrieve data insert obviously is for inserting data and updating is updating data and deleting is deleting data so it's quite self-explanatory so what we need to do is we now need to put controls in against all of those operations okay so we're not going to select them individually we're just going to choose all here and then in this particular area here we now need to apply some expressions in here so we're going to need to check for something okay so the way this works is that when our application makes a request into Super Bass we're going to be passing over a token now this happens behind the scenes in photo flow okay so this token will be exchanged between the flutter flow application and Super Bass we now need to take that token we need to check inside it we need to pull out a value which is going to be our user ID in this instance so we need to check to see if that user is allowed to perform these actual requests okay so there's a couple of things that we can do but there's a very very simple technique with inside a super bass that allows us to check this and it's actually got some helper functions that support it so what does this token actually look like well let's have a look at the flutterflow application here now this is the live version that we that we had in one of the earlier videos for preview and what I've done is I've just logged in okay and I'm just looking at some of the requests that are taking place back and forth and you can see here that it's um there's a request that was made to actually pull in all of the goals information within to the application and you can see here in the header there's this authorization token that has been exchanged between the final flow application and Super Bass you can see here that I've just shown you here is authorization so what I'm going to do is I'm just going to select this token now I'm just going to copy it we don't need the bearer a bit we just need all of this this data I'm just going to make a copy and what I'm going to do is I'm going to move over to a really really helpful website called jwt.io which is going to allow us to almost basically decipher or decode that particular um kind of token and we can see the contents of it okay so there's nothing that's pretty that's not insecure here so this is pretty an open token but what it's actually showing you is this particular data now this is kind of decoded and that's what the Azure token contains and you can see here there's some different bits there's got my email address in there but there's nothing particularly too sensitive and we've got some session information all that kind of stuff but what's really really important is this particular one here because this is the user ID of the user who's actually authenticated with inside the application so what we can do is we can actually store that value as a as some data with inside our database tables if you remember when we actually created those database tables we created one called a column called user ID so what we can do is we can associate that value to the user ID and then when the request then comes in we can use some support and functions with inside Super Bass that actually allows us to check to see does that value there match the value of inside the database and if it does then it returns true if it doesn't it returns false so that's what we're going to do here so just keep an eye on here this is the sub okay so we're going to be pulling this value out of the token and then we're going to be able to perform that particular check so going back into Super Bass then we can we can put an expression in here which allow us to do that check okay so let me put that expression in now for you so the expression has now been loaded okay I've just put a policy name at the top there okay but just would describe it exactly what it's doing but you can see here that the user expression has been added so I've got all selected here that's really important and then here what we're doing is this particular command here is is kind of something that super bass actually understands so off is something it knows itself it is dot JWT and it's pulling out a sub here which we know is of type text and is checking it against the user ID so this is the column that's with inside the table that we created earlier on of course the task table also contains exactly the same thing so really we're just basically checking to see um the the sub value is matching the user ID which we know if it does it's going to return true back okay so that that that's super important because if that's true it means that the operation that we're looking to do will be successful okay so we now need to put this actually in the bottom expression as well and so this bottom expression is is used for doing inserts and updates of course you could actually write some some expressions in here it could be checking other things so for example there might be maybe a value with inside your database you can actually say you know say an age for example somebody who is over the age of 18 or under the age of 18 you could actually check on the server to see okay is that person over the age of 18 which if they are then you can then make the change to the uh to the database or if they're not then obviously it doesn't make that change at all so there's some controls you can put in place if that data was available to you but in our instance this is really simple is that we're just checking the contents of the token that's available to us and checking to make sure that they match so that's pretty well much all that we need to do so I'm just going to keep this in my clipboard because we're going to apply exactly the same thing as well to the task table so let's just hit review and this should be successful for us so don't worry too much about this it's just pretty much giving you the statement that it's going to run to set everything up for us hit save policy and that should all be set up for us so you can see it says policy success releases saved so we now just going to do the same thing now to the task table so just hit new policy up here click on this one here and I'm just going to select all and I'm just going to paste that into there and I'm just going to give it the policy name as well so enable all actions for users based on their user ID so again that's exactly the same we can just hit review and hit save and those policies will be innate it will be created for us so we know that now when we Now activate row level security we know that we've got those controls in place at this particular stage so before we enable row level security with inside our database there's a couple of extra little bits that we just need to do although we can do this at any particular time but I'm going to do that at this point so the first thing that we're going to want to do is we're going to want to associate our tasks with our goals okay so we're going to want to define a relationship between the two tables and the way that we do that is we just go into the task table so just hit the little pen here and just make sure sure you're you're actually on the database and you're on the table section just hit the little pen here and you can see this is the The View that you saw previously but one thing we didn't set up earlier is this little bit here which is this a particular uh sort of Association of a foreign key to create this relation so what we're going to do is we're going to hit the little little uh sort of like uh link there and we're just going to choose the table that it referenced to which is going to be the goals ID is going to be the ID of the goal so what's going to happen is that every task that we create will have the ID of the goal okay so that's how the two tables are going to be Associated okay so what we can also do here though is that um is this particular option here which is quite important actually is that um we don't want to leave any uh sort of tasks redundant within our table okay or we don't want to have any issues where we have constraints where we're trying to delete something but actually we're going to leave something as an orphan or it's just going to kind of exist on its own or it's going to cause us some some issues with constraints so what we need to we need to say actually is that if we actually delete our goal then we're going to actually going to want to delete all of our tasks as well we don't want to have to do a follow-up operation of any reason to delete our tasks or or delete our tasks first and then delete our goal okay so whenever we delete a goal we want to delete our tasks and the way that we do that is we set this particular option here of cascade okay so Cascade will mean that when we delete that record then it will Cascade down to the task and delete those as well okay so just hit save and then that relationship should all be sell out for us now so if you hit save hopefully fingers crossed we'll get an update and we'll get that successfully updated okay so that means our tables are now set up from that regard I think we can go on now when we can enable row level security so let's just click on the goals up here let's enable row level security and then hit save and that should be good for us and they move on the pen there as well and let's do that as well so we've now got everything created for row level security so excellent everything is all in place so there's some further steps that we now need to do in our database just to get us ready for the next video where we're going to end up getting the UI linked up to the Super Bass database so with inside the uh the actual uh sort of authentication area there I'll get the right place we also need to choose the providers option so with inside our application and the only thing that at this time of recording this the flutter flow supports is email as a provider okay so we can't use Facebook or any other sort of social media or anything like that but in order for that to be nice and smooth and run nicely for us we just want to choose uh email um at the top there's a provider and let's take that off there for secure email and take that one off as well confirm email that's all that we need to do just make sure you hit the save option there and that's successfully updated for us so now that we got our basic login and create Pages created we are now ready to hook up our application to our Super Bass project that we just created previously so what we're going to do is we're going to move over to the settings option here on the left hand side so just choose a little Cog here and now we're going to move down to the authentication option and we're just going to enable authentication for our project so just choose that and then here you've got a couple of different authentication types you've got Firebase and Super Bass obviously we're using Super Bass in this application just make sure that's selected and then with inside the initial page this is where you're going to want to make sure that you've got this set so our entry page will always be our login page now the power of this a particular application is that when the user is already authenticated inside your application they will bypass the login page and they'll be automatically redirected to the logged in page which is the home page now of course if they're session times out for over a period of time then they'll go straight through to the login page but that's something that flutterflow is going to handle for you okay so just make sure you've got login page settings entry and your home page are set as your logged in page so next up we're going to need to tell our project about our Super Bass database that we've actually got created so if you move down to here to Integrations just select Super Bass here on the integration you can enable Super Bass so just select that option here and these particular details we're going to need to pull from our Super Bass project that we created earlier so let's do that now so here I am now within our Super Bass project so I'm going to move over to the Cog here just on the left hand side of project settings and I'm going to move up to API so these are the settings that we're going to need to take across into flutter flow so the first thing we're going to do is on this URL we're just going to hit copy so this is the URL to the to the uh the location where our flutter flow project is going to communicate um to our distinct application which is this particular one here so you won't see anything here that's kind of easily identifiable but this is the reference into Super Bass that we need so just make sure you've got that copied and then move back over to your flutterflow project and we're inside the API URL if you just paste that there we also need to capture something else which is a key so just go back to API settings and then with inside our project API settings just take this one here okay so just hit the copy option and then let's move back over to our flutterflow projects and just paste that in there so we can now hit the get schema and hopefully fingers crossed we'll get our details come back to there we go so we've got our tasks table this come back and our goals table here so pretty well much that's how we left it when we actually created everything with inside Super Bass so there should be no surprises there but that um is a good sign that our application is communicating through to Super Bass so we're we're set up here that's great and um the next bit we're now going to do is we're going to move back into the UI and we're going to start configuring our login page to then hook up and authenticate against Super Bass let's do that now so this is the page that we created previously this is the running version the final version of the application you can see here that this is the login page we can simply just hit the kind of the sign in button out and our user will then enter the application so I'll just hit that and in they go so our application doesn't do that but we're going to do that now we're going to set that up we're going to want to put some defensive application building in here as well so of course once the user has tried to key in their details so for example we just kind of delete these details out here and we hit the sign in we're going to want to put some form validation in there as well we don't want to make sure our user is actually putting in the right details and of course if you put that in there of course it will validate that it's an email address and of course we want to make sure that we put some limits as well on the password as well because within Super Bass the minimum password length is six characters so we're going to want to support that within our application so let's make those enhancements now to our application let's get our sign in button hooked up and we should then be able to get ourselves ready to then create a new account which is going to be some more modifications to our create page and then of course we then should be able to get both of these Pages working together so let's do that now so here we are then on the login page for our application we're now going to want to add a form validator into our page we're going to want to ensure that what the user is typing in is accurate before we actually hit the sign in button to Super Bass so we can simply do that by on the left hand side moving over to the column the column is what contains all of our form Fields so now we're going to want to right click and we're going to we want to wrap that widget with another widget called form validation so just choose form validation and you'll see that it gets created here we're just going to want to change the name of it so just make sure that you've got it selected up on the top here we could just want to then change that to say login form It's always important to rename sort of key widgets with inside your application certainly ones like this because we're going to referencing these with inside the action flow editor very very shortly so once we've got that selected on the right hand side here you can see that we've got the validation options for this the email address and the password of the two fields that it's detected that we actually have with inside our form now we're going to want to make some changes to these in just a moment but let me explain to you what automatically validate means and what that really is if I was to turn that on what that would mean is that as the user is actually typing in to a particular field then all of the form will end up getting validated now that's not going to look particularly great for our users because we don't want to see bid big big sort of error sort of boxes or red text that would appear when it's not really applicable to the field that we're actually completing so for large forms it's not particularly ideal to include that I know we've only got a small form here but I just want to keep our application quite clean um so we're going to validate on the point that our user has actually hit the sign in option okay so that's when the form validation will occur so we're going to keep that turned off but what we're going to do is move over to the email address here we're just going to choose this and turn that on just select it now we are going to want to not make too many changes here other than the fact of the tax validator here at the bottom so just choose text validator and choose email so the values that's going to be keyed into that field will be validated against a a valid email so determine whether we're typing in an email that conforms and if it does conform then the validation will pass if it doesn't look like an email address then the user will see an error message so let's move now down to the the password option just down here on the left on the on the right hand side here just choose password just hit that and we're going to want to make some changes in here so within the minimum amount of required characters for a password Super Bass only supports six or more so we're just going to want to choose six here and then in our sort of our minimum characters error effects now this is the texture that will appear if the user is typing anything under six characters so I'm just going to paste some text in here and it's going to be passwords must be six or more characters so that's what will also get displayed on the screen we don't need to include anything else here but that should be good for our form so that is our our login form validator set up for the time being of course we're going to want to um sort of kick off that form validator and we're going to do that with inside the sign in action and that's what we're going to focus on next so the next change that we're going to want to make is we're going to want to put an action behind this sign-in button so the user is going to have completed the form they can hit the sign in option and then we're going to need to authenticate against Super Bass But first so we're going to want to validate the form so just hit the sign in here click on the action flow editor up here just to make sure you've got that selected up the actions and just click open and here we are with the ontap event so here's your different events up here but on this one we're just going to simply just put one on the on top of the event so a very very quick press of the button so we're going to now want to add an action so just choose add action here and what we're going to do here is we're going to first look for validate here so let's look for validate form so let's just choose that and that's the first one that's going to get selected and now with the option here where it says unset we're going to want to choose the login form now this again is where it's quite important that our our names of our widgets are quite uh useful to actually be something more meaningful so here we've got login form so that's the first thing that's going to do that's going to kick off the form validator and it will not continue with inside this flow and until that form is actually valid so what we're next up gonna do is then we're going to actually then do the key action which is going to be to then uh authenticate against a Super Bass so let's just choose add action there and up here we're just going to do a little search for Super Bass uh there it is and we're going to go to Super Bass authentication and we're going to want to choose the login option so just choose login and then on the auth provider we're going to choose email because that's the only provider that we currently are supporting with inside flutterflow of course depending when you're watching this particular video there could be more auth providers available but at the moment there's only email so we're now going to want to choose our email field again importantly to keep your widget names there because here we can choose email address and then the password field is also going to be password here as well so that's um that's that's referencing our Fields directly with inside our form incidentally you can see here there's this little pen option here of course if you were storing values with inside a variable which could be in sort of the application State or the page State then you can actually reference the uh the actual values that you would be storing there but we're not we're actually just referencing our actual form values directly from from on the actual page itself so just bear that one there for the future if you if you were looking to do that so that should be it that is all that we need to do now flutterflow will take care of everything else now as soon as we then validate and we get a successful response back from Super Bass then our application will automatically move through to the home page of our application of course if there's an error that comes back from Super Bass then what will happen is then there'll be like a message with inside the application to say that the I don't know the username or the password is incorrect or something like that so um but there's other means and ways that you can actually handle responses back from uh from a super bass but um flutterflow provides this really really simple for us it will just block the user from progressing until they've corrected their mistake so that's all that we need to do just hit close there and then that should be our page now all ready to go so we're not we can't do nothing with this particular page at the moment because we actually haven't even created any accounts yet of course so what we're going to do now is we're now going to work on our create account page we're going to get that up and running and with very similar techniques that we've got here we'll create an account and then we should be able to then use this screen then also to log in as well so let's move on to that now so here we are then on the running version of the create user account screen you can see here now that if I put my email address into this particular field here and hit the create account then the form validation takes place as I start typing in some details here I hit a create account it said the password must be six or more characters so it seems to be working quite nicely there for us if I hit the value there password must be more than six characters now if I do type in more than five so one two three four five six seven but just do one two three four five six and hit create an account then we've also got another error that's coming up saying that the passwords must match so that's like an extended piece of functionality with inside the action flow editor there I've introduced and we can put that in our application as well just to make it a little bit more defensive because we don't want any errors coming back from Super Bass there we want to try and correct it with inside the form directly so we'll Implement we'll Implement all of these features now for this particular page here we go so back in Florida flow I've got the create account page loaded and I'm going to add the form validation widget to the column that we just as we did on the previous screen so just hit wrap widget here and choose form validation we're just going to change the name up here to the create account form here just give it a good meaningful name and then of course we've made sure the form validation was selected and we're now just going to go through now and just modify our our validation field so just choose email address here we're going to want to choose the the validator as an email just as we did previously move down to password Here choose the uh the the details we need here so the minimum number of characters is six and then in the this particular field just as we did before let's just put our content in there passwords must be six or more characters we're just going to click on confirm password as well and we're just going to do the same thing there as well so minimum number of characters is six and then put that value in there as well so that's all that we need to do on that particular form there that's all set up for us let's now focus our attention on the create an account actions that we now need to do now so let's choose the create account option here let's move over to the actions and then let's open up the action flow editor and the first action I'm going to add is going to be the the actual form validation itself so if we go back and do a little search for uh to validate form just choose validate form and of course I'm going to select my create account form so that's now going to validate the form we next now need to add in the piece for Super Bass to actually create the account for us so let's hit the little plus here click add action and on the right hand side here just type in Super Bass and we're going to want to select the create account option so just make sure that's selected and we're going to choose the auth provider as email and this is where we're now going to want to set the fields from our application so just choose the email field here and just choose email address and the password is going to be password and you guessed it the next one's going to be confirm password so it's that simple to create Authentication with a super bass and what will happen now is that if we were to run this application our form will be validated if that passes then straight away our account will be created and they'll be signed in and will be moved to the home page of our application but that's not particularly defensive of course because we do have this little Challenge on our hands with the password now if the user types in um or mistypes in a password or it doesn't match we're going to want to handle that with inside the application itself we want to try and do that as close as we can at source to when it actually occurs so what we're going to do is now we're going to extend the application now to include this new error kind of row that will just display this amid this mismatch we're going to create some page State as well just to track the visibility of that particular error and then we're going to come back in here and we're going to make we're going to see how the error then plays out as far as the logic that we're going to need to add so let's let's move over and do that now so here we are back on the create account page and we're now going to create this state variable now to track the conditional visibility of the text row that we're going to add very very shortly so on the right hand side let's just choose the little option up here it says State Management let's click the add field option and the input inside the field name I'm just going to paste this in here but it's called is passwords mismatch if this value becomes true because it's going to be of type Boolean if it's true then it will display that row if it's false then it won't be displayed so just choose a type where it says hit here and then choose Boolean here as an option take the little nullable checkbox off let's just toggle this field to be red we don't want it to give a positive value to start off with if we left that as enabled then what would have then happened is that as soon as the page had loaded we would then see that message appear instantly with inside the UI so I'm going to keep that one turned off just hit confirm and then that's all that we need to do as far as the State Management variable is concerned so let's now move on and let's now create that row with inside the widget tree So within the column on the left hand side of our page just choose that and then hit the little plus option here so we can add a row in and then with inside that row we're just going to hit the little plus and we're going to actually add some text in there and we're going to want to reposition this okay so we're just going to move this above the button to just hold that down the left Mouse bar to move that up and then just drop that in there and we're just going to go to our row and we're just going to want to firstly give our rows some padding at the top there of 16 that keeps it then in keeping with the rest of the the gaps in between our fields and then with inside our text here we're just going to want to make a slight change here so we're going to go down here to the size so where it says body medium choose that down to body small just makes it slightly smaller and with inside our primary text just select that and we're going to want to choose the error color there just to give it that kind of red look now the the text that we're going to want to just include in here of course will be um passwords do not match okay so that's just a very quick statement that just to give the user some guidance there on the status so that's that um with inside the row now of course we now need to give this now some conditional visibility we're not going to want to display this off the bat so this is where we now use our state variable here so let's move up to conditional visibility let's just turn that on here and the conditional visibility that we're going to set is going to be a condition so just choose conditions and it's a single Condition it's just a single check that we need to make so in here we just need to choose the first value here choose this and we're going to go to page State okay and we're going to choose the is passwords mismatch now we're going to want to say is this equal to and then of course this value in here will actually be a specific value and it will be true that's all that we need to do so if the value is true then display that message if not it disappears so just hit confirm so that's all that we need to do to get that row up and running now of course we're not going nothing's going to happen at this particular stage because we're not actually setting that value so let's now move back into the action flow editor and let's get that sorted right now with some conditional checks to get that displayed so let's do that now so let's move down to our create account button here let's choose the actions option up here and then choose open on the action flow this is exactly where we were before but now we're going to add a conditional check-in we want to see do our passwords match or do they not okay so just with inside the plus here just choose that and say add conditional and then up here we're going to go to conditions and it's going to be a single condition because we're just checking between the two values so the first value we're going to be checking will be the first password so we move down to widget State and we choose the password there that one just in the middle and we're going to say is that equal to the to the other one okay to the other password value so this is the confirm ones we're going to go to the from variable here and we're going to just choose this and we're going to go to widget State and we're going to say confirm password so we're just saying are they both equal to each other hit confirm now of course if they are equal they're going to move in this direction if they're not equal they're going to move down in this direction the negative State okay so on this particular the location we're going to want to clear the visibility of that particular row and then carry out the authorization if it's if it's false so if the passwords are not matching we just want to make sure that we then display that message that's um that's on the conditional visibility so let's just do that now let's just hit the little Plus on the false here add the action and we're going to want to update here so just do a search for update if you can find it here update page State here so just choose update page State hit the add field option and it's the is passwords mismatch so we're just going to want to set this particular value so we know that the passwords don't match so we're just going to go set value we're going to go here and so the same false we are going to say true okay that's all that we need to do here and then on there what we're going to do here though we're going to copy this action and then we're going to go here hit the little plus and then we're going to paste that action just here because what we're going to want to do is we're going to want to set it to false and then we're going to want to do the authorization okay now there's going to be a slight um in the UI the create account is going to happen really really quickly but it's just good practice just to remove any kind of Errors from the screen of course because if there was an error that come back from Super Bass it may likely not be that the fact that the two passwords are mismatching so we just want to do good good practice there and make sure the UI remains clean all the time so with inside here just select this and we're going to want to just choose this and say false and then with inside this particular this off here we just want to copy this here and we're going to go up to the little plus and then we're going to paste that action in here and then here we're just going to want to then delete that action so it's not needed so we've got everything we needed so we know that we're here in a positive territory down here false that should be all that we need to do in terms from the form validation perspective so just hit close and I think we are pretty close now to trying to run this application to see what behavior that we get so let's give that a go and let's see what happens in test mode actually before we run this application up I've just spotted that we've um that we haven't actually hooked the pages up to actually take us to the create account page so with inside the login page we need to add some action to this particular row here so just choose that and we're going to move over to the actions here and we're just going to click on the add action and here we're going to just do and just type in Navigate Okay so we're going to navigate to the create account page of course and we're going to allow this we're going to set all these up as the spot as default and that's all that we need to do what we're also going to do with inside the create account page we're just going to do the same thing as well we're going to go down to the already got an account we're just going to click on the actions up here we can add the action in here and we're just going to go to navigate again just type that in and we're going to navigate back to the login page so it just allows us to go back and forth between the two pages right that's all that we need to do so let's now run this in login and let's actually run this now and try logging into the application but firstly we're going to create an account in the test mode let's do that now so here we are in run mode let's give this a go let's hit on the sign up here option let's type in my email address the digital Pro at outlook.com there and let's put a password in here okay so I'm just going to put a an invalid password in for starters let's just see if that's all working for us create an account there we go plus passwords do not match that's fantastic I can just show you here the password that I just typed in there so it's just the mistyped it slightly so let's just take that off there and then hit the create an account let's see if that works Bingo that's exactly what we would like to see now we've got nothing on our home page whatsoever so that is fantastic we should have our account created let's just have a quick look in super bass here let's go to the uh the actual authentication here and you can see here that my account has been successfully created that's just as I would like to see it so we're looking good so hopefully our login page will work as well so of course without of course if I was just to reload this now then our application is going to remain logged in so I'm going to end the session and I'm going to reload it back up so I can try signing in so I'm going to do that now so of course I should have realized this of course but what I've done is I've ended the session I've reloaded the application but of course I'm still authenticated so what we're going to want to do is we're going to want to put a button on our home page here just for a convenient way for us to kind of log out um our uh us as being a user okay so let's just move back over to the dashboard here let's go to our home page and let's really really simply just add a little option in here let's add a button in so just choose that and then we're inside the action flow editor just select that say add action and then we're going to want to go to Super Bass here and then we're going to say log out and that's all that we need to do so let's go back to our application let's just do a quick instant reload and then we should then magically see that button should then sign us out of the application there it is just hit the button there and then we're all signed out which is fantastic so let's now try logging in now so let's put my password in okay hit sign in and then magic brilliant so that's everything working for us are both our create Pages working and our login page is working of course we need a little bit of animation on there as well as the as a you might have spotted on the actual preview of the file application we've got some animation going of course we're going to come back and do all of those niceties on another video but for now the main key point of this video is to kind of get most of the functionality implemented and we can put the bells and whistles in a little bit later so that should be everything we need right now so let's focus our attention on building the home page screen this is the first screen that users will see as soon as they're signed in they'll be directed to this page and it's going to display all of the goals that they've got created with inside the database as you can see here at the top here we've got our kind of our road that kind of is our head of our application and then just below that we've got a list view that contains independent containers that will then display each and every goal and obviously the properties that are related to each of the goals themselves and just at the bottom here we've got a Fab button of course when you actually hit that a bottom part A Bottom bar will be displayed which will then allow the user to actually create a goal with inside the application so let's focus on building this screen out and of course there will be some more bells and whistles that will put onto this screen as the series develops but we'll at least get this um set up ready for us then to hook into Super Bass to then pull those goals into the application so just remember then if you want to start from this particular point with inside the application build please do check the link in the description and there'll be a link there for you to clone this particular project please remember as well though that when you actually then clone that project you'll also need to make sure that you just go into the settings here and you're going to need to make sure that you set up your API URL and your Anonymous key from the previous videos we did when we set up our Super Bass project just make sure you put yours in there as well because the Clone project won't have that and every time you do clone a version of this project it won't include that in there so just make sure that you pull that in so let's move back to the UI builder then to The Witcher tree should I say and now now let's start now focusing on building the home page out so just select home page here on the left hand side you can see here that we've got nothing else in our page whatsoever so the first thing that we're going to want to do is add a container in so just choose a little plus there and let's just choose container and then with inside our container we also need to make sure that we then put a column in there as well okay so going back to the container we're just going to want to stretch this container out to be the full width and height of our application so let's now go over to where it says width there just change that and just click on the little Infinity option there that stretches it right out to the full width of the UI and then of course we just need to do the same thing for the height and we've inside the fill color for the secondary background let's just clear that color because we don't need a set of color on our container because the background already contains the base color for our application so that's everything set with inside our container now with inside the column as well we now need to now start working on that as well so the first thing that we're going to want to do in our vertically stacked column is we're going to want to add a row in okay so that row is going to be the header of our application so just choose a row so it's going to kind of be like a bit like an app bar really but we're going to sort of customize it ourself so with the Row the first one that we're going to put in there okay just hit the little plus is going to be our Lottie animation this is the little goals animation that we got at the top left so just choose Lottie and choose Lottie animation we'll come back and we'll sort the properties out of this in a second next up we need to hit the little plus there and we're going to put a text in there as well that's going to be the this can say my goals which is the title our application and we're going to hit a plus as well and we're also going to choose the icon button here so just do a search for Icon and then choose icon button and then we're just going to right click and we're just going to duplicate that widget as well so we've got two icon buttons we'll go and sort those out in just a second so moving back over to the Lottie animation let's make some changes to our properties on the right hand side so where it says width of 150 let's change that to 70 and on the height let's just change that to 70. with inside our animation Source just select that and then choose asset now of course we've already got the target icon already loaded with inside our project so let's just choose Target icon and then where it says animation type we're going to want to change this and we're just going to want to say once okay we're going to keep Auto animate selected so when this page loads for the very first time the animation will play just once and then when we then kick off events with inside our application we'll then make a call into the Lottie animation to then play its little animation okay so we'll do that as a more of a Finishing Touch a little bit later so that's that then let's now move over to the text so we just need to set the widget styling so we have a style that's already set for this so just choose a text style heading and it just makes it um so it kind of makes it a little bit too large actually the textile heading that we've got here so we just need to drop the size down so just down the font size there just choose 24 and we might just lose the padding actually of 16 to the left hand side that I don't actually think we're we're going to need that there so that means our our text style is now set for our heading we're just going to now focus on these icon buttons as well well so let's Now work on those now we're going to need to make as few changes to our icon this that we got selected down here so let's just choose the icon and we're going to do um we're just going to keep in keeping with our application just put a sign out option there so just select this particular one here so I'm just going to choose log out there and then just choose log out as the icon there and then on this particular one we're going to make this one a filter type icon so just type in filter and then you should find one that looks just something like this here filter list rounded or we can have that one there for the list filter this up the top right there we go that's perfect for us we just want to drop the size of these icons down a little bit because they do look a little bit large so let's just drop that down to 24 and let's just select that particular icon there and drop that down to 24. so I think that is looking pretty good for our icons for the moment we might need to just come back and Pad those out a little bit later but that looks pretty good for our application so with inside the text here we're just going to quickly change that instead of it's saying hello world just going to say my goals like that and that should be everything that we need in our header at this moment in time so let's Now work on the next part of the application this just below so let's now create a column with inside a column so just choose the little column there and hit the little plus here and just choose column and we're going to want to call this this column goals a column so just up the top right there just rename it just hit the little tick box there and we're all good now we need to make some changes to the properties of the parent column okay so just choose parent because we're going to want to set everything up that falls with inside it just to make sure it's got the right setup so on the right hand side we want to actually mark this column to be scrollable this will be the primary scrolling column with inside our applications as we add more and more goals to our application inside the list view that we're going to create in a moment the the goals will actually fall off the screen once there's an once there's more than what the screen can hold so that's going to be the scrollable column with inside our application the list view is not going to be doing the scrolling for us okay so by saying primary it means that that is that is now the primary scrolling and then on the on the cross access alignment we just now need to shift everything over to the start of The Columns you can see here the main access is pushing everything up the top this one here is just pushing everything over to the left hand side so everything that falls with inside this particular column will position to the top left so now we need to now add our list view now so within our goals a column just hit the little plus here let's just choose a list view so just choose the list view here and we've inside the right hand side let's just turn off that primary because we've already selected it to be on our column that we just we did just a moment ago and I think that is everything that we we need at this moment in time so what I'll do now is we'll um we'll go in now into the list View and we'll start now building out the uh the goals container that's going to sit with inside there so just looking at the final application here this is the section that we're going to now focus our attention on is this particular panel don't worry about this panel because this is a repeat of this particular one here but you can see here that we've got like this container this white container and with inside that container we have a column because everything is vertically stacked with inside that column we've got a number of rows which can which contain text and then we've got this one here which is a progress bar and then that progress bar over the top of it has another sort of container with some text in now they are situated with inside a stack because a stack allows you to sort of overlay widgets on top of each other so we're going to build that out very shortly and then just down on this particular row here we've got so we've just got a simple icon we've got a number of tasks and how many is completed is represented in this particular piece of text here and then we've got another icon then with the date of the uh the actual gold when it's created so let's now build this out we're not going to worry about this little bar that runs along here that we're going to come back in a later video and introduce that into the UI but let's focus on getting this fleshed out right now so let's do that so back in the widget tree then let's now start making some changes to the UI so we're inside the goals column just choose that and we're just going to give this some padding okay so just put 16 in here and just hit the little lock that just locks everything in around or even all of the directions of the actual column itself now with inside the list view just hit the little plus here let's add a container in and let's now rename that container to a goals container so just say Goals container just hit that there and with enough styling we just want to choose a theme of style and just choose that and we're going to say container primary so just choose that and we know that we've now got the correct styling that's associated with our sort of our parent container that's going to contain everything that we need so just by clicking away you won't see it yet but when we start actually adding in widgets in here you'll start to see the style take take shape so we've inside the goals container let's now add a another column in so just choose a column and we're going to want to give this a column a name as well so let's just call this one goal details column like that just hit the little little tick there and with inside the gold details column now let's start adding the applicable row so the first one that we're going to add in is a row and we're just going to re name this row to a title row so just select up here and say title whoops title row like that just hit the little tick there now inside this title row we actually then how have a column and with inside this column we have further two rows so just choose that and choose row and we've inside this first row we're going to include some text and then we're going to click on this particular column again let's just add another row in and then we're just also then going to choose the new row and then just choose text so we've got our two text widgets that we need in there for our goal title and our goal description so let's now style those up so let's comment in with some formatting then of our title row so if you just choose title row here on the left hand side now this is obviously the uh the the kind of the the grouping of our our title for our goal and our description so let's give that some formatting let's um on the right hand side here let's just sort some padding out here so 16 from the left 16 from the top and then 16 from the right that just brings it off of The Edge now let's then look at the actual column itself so I think we need to actually do some alignment here so let's just push everything up to the top there so it's it's just pushes everything to the top left of the actual row itself and now with inside our actual formatting of our text so if you just choose text there this is the the actual title itself let's give this a formatting of title small here that's good there I don't think we needed to change anything there and now just choose the description which is going to be this text down here let's change the uh the actual font style to be then a body small so it's just slightly smaller and our primary text is going to be the secondary text it just gives it that sort of slight gray look we also want to change the line height as well so just put 1.4 in here and what that will mean is that when this then wraps to a second row if the description is quite large then you'll see a slightly more gap between both rows it just makes it look a little bit more pleasing to read with inside the user interface so let's now select the column here on the left hand side now let's expand that column out to the full width there and we also then need to go into the actual text themselves and we also then need to press the expansion against the text we'll do that for both of these and the reason why we do that is because if we don't expand then what will happen is if the text then becomes too large for the row it then will not then wrap okay so by doing this it means that the text will then wrap to a second line instead of it just disappearing as a boundary error of the side of our UI so that's everything set up now with inside our title row we can come back and we can we can make some further adjustments to that when we need to so now let's move on to then the next part which is the progress bar just below so let's move over to the goal details column just select that and hit the little plus there let's now add a container now with inside our container we're just going to want to take off the width and the height we just also want to take off the fill color let's clear the fill color we're not interested in that just hit clear color so that's everything that we need now and of course it's going to look a little bit odd with inside the UI but we're now going to put the progress bar in that as well so just hit the little Plus on the container we're going to choose and search for Progress bar now you're going to see a circular looking progress bar we're going to want to change that from circular to linear on the right hand side let's just take off the width and the uh the width there but let's put the thickness as a five so it's just going to make it a nice very very narrow sort of height actually that we want on our on our progress bar and the end radius we're just going to choose as five so this will just give it some nice little circular kind of edges to be more in keeping for our application and then the text down here let's just remove the text we don't to display any text and that should be everything that we need set up on our progress bar for the time being now we also now want to move on now and now wrap the progress bar with a stack because we're going to want to put another container on there which is going to display the percentage so let's do that now so let's now right click on the progress bar let's just say wrap a widget and we're going to wrap with a stack now you won't see anything visually different with inside the UI builder at this particular stage but what we're going to do is now include a new container here so just press the plus let's hit container and we're going to have this rather large container that's going to look somewhat overlaid with the progress bar so let's make some changes to the the the dimensions of the container now so on the right hand side here where we've got width 100 let's make a little change here so let's just make that 40 and then on the height let's just make that 25 like that and then just further down we're going to want to change the Border radius to then 16 so just gives it that sort of rounded edges and with inside the Border color just select that where it says unset and let's turn that to be Ascent three so just a slightly lighter gray with inside the the actual border color itself so let's now position the actual container so let's just move over to the stack itself let's now just literally press the little uh little row there and then press the little row there and you'll see that now our our actual child element is now positioned nicely centered with inside the stack as well and it overlays quite nicely there with our progress bar by just click away you'll get an idea there of what's going on so let's just do some little bit of formatting here with our container you can see it's going right to the edges here we just need to make some adjustments so just with the container selected let's just choose 10 from the left let's choose 10 from the right and then at the top just choose five and then from the bottom just choose five so you can see that that's now nicely spaced out from with inside the panel itself so let's now add some text with inside this particular container here so just put down on the container here just hit the little plus here let's hit text and then we're just going to want to then make some changes to the theme text style so just choose that and choose a body small here and let's move down here put a font size of a 10 in and just to replicate what the UI will be doing let's just put something small in instead of saying hello world let's just put say 50 in and this will then mean that when we now do the positioning of like the the centering with inside the container you'll then get a proper representation of that if you just kept hello world in there when you try centering it then you wouldn't have seen anything visually difference inside the container so I just scroll down here and in fact I could go to The Container itself sorry and just scroll down and then you can see we've got the child and the horizontal vertical if you just choose a little zero there and a little zero there you can see that everything is now nicely centered if I just kept hello world in there you wouldn't have seen that centering occur so that sets us up from a star perspective it very very nicely for when we then start binding all of these fields to the the data that comes back from Super Bass so we now need to focus on the next row that's just below so let's now start doing that now so let's get ourselves ready then so let's just collapse down some of these uh previous widgets that we don't need to like title row and uh title and sorry just container let's just collapse those down just gives us a little bit more room now to create our next row so just hit the little plus there against gold details column let's add in a row so just choose row and then we're also then going to give this a row a name so let's just call this task footer details row just hit the little tick there and then with inside this we um we're probably going to want to just adjust some padding here on the left hand side so just choose 16 there just choose 16 there and let's just give this one perhaps just a height of say four there and of course maybe at the bottom just a further 16 just to push it off of the bottom we can make some minor adjustments to this later if it's not quite what we're looking for So within the task for the details row hit the little plus so if you recall in our row we've got an icon with some text and then we've got some icon and then with some text okay so the first icon that we're going to add is going to be the little tasks icon that we had so just choose that and on the left hand side I just choose the icon size is 16 and we're just going to set the actual icon itself so let's have a look for one cool task okay now what we want let's choose font awesome there we go that looks like a little task list so just choose that and then we also going to want to change the icon color so just choose that to be secondary text so it just gives it that little gray look and then um the icon we're probably going to want to put a little bit of padding on the right hand side so it pushes our text slightly away that we're going to now add so just hit the little plus there let's add the text in and we're going to just rename this to say uh task counters text just a little tick there and we'll just go into reduce the size of the text to body small like that and then we are going to want to choose the expansion to go right across and you'll see why that's important and it makes it it's going to push our icon and our text this is going to be after it to that particular side as well so now let's just add in the next one so just hit the little plus here let's add in another icon and then with inside this icon just choose the size of 16 let's change the icon color to be the secondary text color and the icon we're just going to change the setting to look like a calendar so just find a calendar icon that's suitable so maybe just that one there should be fine for us and then we're also going to do the same as well let's just put a five a padding there to the right I'll push the next piece of text over so just hit the little plus option here again let's add in another piece of text and we're just going to change the the actual the actual the actual title to be task goal date like that hit the little tick there and we're also going to want to reduce the size down to body small we're going to change the uh actually I think that's probably all that we actually need to do actually there yeah I think that sets us up quite nicely now to when we then start now binding these values to the data that comes back from Super Bass as mentioned previously so just one more small thing that we need to do with inside our application in this particular video and let's add in the Fab button so just have a home page selected up here hit the little plus and then let's just choose a Fab there and then just select it and then the fan button is going to be created down the bottom right hand side but of course there's gonna be nothing in it we're going to need to put an icon in there so you guessed it we need to look for Icon and then just select that and our Icon by default will just be black but we just need to change the color of that so let's just move over to Icon color and we can choose the custom color here we've got one called primary button text just press that and then we need to change the icon up here so just choose that and do a search for plus and then we can choose this icon just on the side here which is called add so that is pretty much all that we now need to do with our user interface in this particular video and we're going to end up getting ourselves very very close then to start binding this into Super Bass to then start seeing some real data appear with inside our application so the first thing they're going to want to do in our application is create a brand new component and this component will allow us to create a new goal with inside our database so let's do that now so on the left hand side with inside the widget tree we're just going to move down to the components folder just there we're going to right click and we're going to say add component and we're going to keep it as a blank component we're going to create this one completely from scratch we're not going to use a template so just hit the create blank and then we're going to just call this one create goal component just like that and then hit the create component option and there we are we're just in with a brand new component now that's just situated with inside our components folder so let's just move this out a little bit here just gives a little bit more screener state so the first thing that we're going to do on the left hand side is we're just going to press the little plus there we are going to create a container for our component and the first thing that we're going to do on the right hand side is just hit the little Infinity option here less stretched that out to the full width and then the height of our component is going to be 500 that should just give us some enough room to contain our form items that we've actually got on screen so the on the board radius we want to just give this um these edges here at the top here a little bit of a bit of a curve okay so just on the left hand side here just in fact just take the little little lock off we're just going to hit 16 here and then 16 on the top right and if I just click away here you can see that we've now just got those those curved edges now with inside our container the first thing that we're going to do is put a column in there because we want all of our child widgets to be vertically stacked so let's just press the little Plus and hit column and then the first widget that we're going to put inside there will be a row and that row will be our little bar that will be presented at the top of the Bottom bar that looks like we can actually then hold it and then drag it back down to the base of the screen so just hit the little plus here hit container and that should be fine and let's give our containers some properties here on the right hand side so on the width we're just going to put in here 50 and then our height we're going to put in four and On the Border radius here we're just going to keep the lock on there this time but we're just going to put eight in and that will just give it some rounded edges on the actual container and then for the fill color just choose that and choose Ascent three so they'll just give it if I just click away in fact I just need to give a little bit of padding there actually it's just from the top here so let's just put a bit of padding at the top here to say 12 and just click away and you can see here that it's now positioned nicely in the center but it's kind of just got those rounded edges now before we go any further I just want to make some changes to our themed widgets with inside our project so just move over here to the left hand side click on the little theme settings option here let's scroll down here to these particular uh sort of form elements down here so I want to make some changes to the colors that's currently set with inside these particular form elements because when this base project was actually created the the scheme that it was set is not quite how I want them okay so just select the text field a single Row first so just scroll down and just on the border color here we just want to select that and we actually just want to choose Ascent three so just select that yourself and then with inside the error border color just choose that and then on the alternate just select that there so that's that's how we need it to be so just hit the save and we also need to do the same thing for our text field multi-row so just scroll down here and then up the Border color here just choose Ascent three and then our error border color we just want to make sure it's alternate that's fine and just hit save and then finally on our drop down standard not quite so many in this particular one just scroll down down here and then on our border color just choose Ascent three that's all that we need to do so just hit save so that's now put us right back to where we need to now we can carry on now creating the form Fields actually on the screen itself right back with inside the widget tree let's make some further adjustments so with our actual container what we're going to now do is we're now going to wrap this into a row because we want to centrally positioned the container with inside the row and then what we're going to then do in the column when we add further widgets actually in there such as the header and then the further text Fields they're going to be justified to the left hand side so we want to make sure that the container here maintains its Central position so with the container selected just right click and say wrap widget and then choose row and then we just need to make sure that on the right hand side here we say main access alignment we're just going to click that and you'll see now if I just click away here that our little container in the middle here just remains centered with inside the column itself so now with inside the column we just want select the column here and then on the settings here we just want to make sure our cross access alignment is set to be to the left and of course you can just see here that by default we everything with inside our column is his top is pushed basically to the top to the left hand side so that's just how we want everything to be set up so let's now continue now creating our Fields with inside our our component so with the column selected just choose a plus here and we're going to create a text widget and we're just going to go up to the theme style here and we're just going to select that and we're going to choose a text style heading we just want to remove the expansion that's been applied here so that's happening to you just make sure that you choose this one here to the left hand side which will just mean that the the widget will not fill the available uh the actual available space so just select that and it will just drop it down here and our font size is currently set as 28 we don't want 28 we want to change that now to 24 we just want to reduce it just slightly and just one more final thing up the top here with inside the padding just put 16 here know just just drop it down a little bit from that that row that we've got above so we're now going to carry on now creating our actual text field widgets okay so on the left hand side just with inside the column itself just hit the little plus here and we are going to select the text Fields just just to search for text here you can just see here at the bottom called text field with that selected now this is where the styles that we've now just modified we're now going to apply to the text field so the first text field that we've got here is the the actual goal title here so just with that selected move where it says theme style unset let's choose a text field single row and if I just click away there you can see that we're starting to see the look that we actually need for our our application so with that just selected we just want to make a name change here so instead of it saying text field we just want to call this one goal title text I just hit that and then we just want to then change the the actual hint text here as well so just set the syntax as enter your goal title I'm actually just going to make a change here actually I'm not quite I've made a bit of mistake up here I said goal title text we don't actually want to be called text so I just want to be called goal title there we go so next up we need to then add the next one in here so that's going to be the goal description okay so just hit the little Plus on the column here and choose text field here just select that and this time we just want to rename this now to to go description like that and then the theme style we're just going to choose as the multi row so that will give us the the look that we need so we're just going to now change the um the hint text here also to say enter your goal description like that and then with just a couple of little dots after it as well so that's that selected for us now we're inside um I'm just going to stretch this down a little bit here just to give a little us a little bit more space here so I'm just going to just validate to make sure that our container is still set as 500 yeah that's good that's what we've set so let's Carry On Now creating adjust a further sort of widget so just hit the little plus here and we're going to want to do a search for a drop down so just choose drop down here and again just up to the theme style here just make sure that we choose drop it down as standards that gives us our our nice looking drop down that we're going to configure very very shortly so next up with inside the actual column let's add our little slider that we're going to add in so just hit the little plus here and we're just going to do a search for for slider here you can just select that there and we're just going to make some property adjustments to our slide as well to get it to the style that we actually need it so we can see here the maximum we want to change to be 100 because we're going to go from a progress of zero to 100 and then with the the actual color here the inactive color I'm just going to make a little change there and I'm going to set that to Ascent three so that just sort of just tones down that darker greater background that we that we had I think that's all the changes we actually need to do there and then finally next up we're going to then add another row in okay so just choose the column here this is going to be for our button just choose a row here and then hit the little plus here and we're just going to choose button here as our option just hit button and we're also there now going to give our button the style that it needs so just with that selected go to theme style and we're just going to choose button primary just going to drop this down a little bit more so it gives a little bit more space here now with inside our row we just want to make sure that everything is then centrally positioned so just with the row selected just choose a center here as the main axis alignment and of course we're going to want to change the the button text as well so we'll go back and change that in fact we'll do that right now so let's um that's just going to change this to um goal submit button just like that and then our title of our button let's just move down here and we're just going to say create goal just like that oh because that's all that we need to do for the moment so that's pretty well much um the main form elements actually created here let's just make sure that we change the drop down here let's just move up to the name of this instead of a coordinate drop down we're just going to call this goal status just like that and then with inside our hello world here we just want to change this to say create goal okay so that's pretty well much everything that we need on the form there we've got our our sort of field names and everything that's perfect our slider we just want to change the name of this as well so let's just select the name up here and let's just call this goal progress like that and just hit the little tick I think also we might want to just put a little bit of padding on here as well just to just to push the button down just a little bit so let's just choose five on that in fact let's actually just bring that up to say 16 like that I think that is pretty well much what we need let's just drop that down a little bit we might need to make some adjustments to this in in just a moment but um I think that pretty well matched when we actually then display that with inside the actual uh the parent page there might be some just little adjustments where we can make with the the spacing in between the rows here just to make sure it just fits nicely in our 500 sort of height that we set this particular component so next up we need to wrap a form of validator around our form because we're going to want to make sure that the user does key in these details okay so with the column selected let's just right click here and let's say wrap a widget and we're going to want to choose form validation and we're going to call this one form create goal just like that just hit the little tick there and we're going to make sure that we select our goal title field is required and our goal description we want to make sure that that is selected as well so that's fine that's all that we need to do for now that'll just ensure that the user is actually keying in those particular details okay so let's just make a slightly little change here on the actual slider here just make that selected so just scroll down to the right hand side we just want to make sure that we got the number of decimal places is going to be zero because what this um actual component actually will do is is it will actually produce you a decimal point numbers okay so when we actually go to actually create the goal we're going to have to convert that decimal number actually into a whole number because it's going to be a whole number that we're going to be storing with inside our database so just make sure that set is zero and we want to take the show value as well because as you obviously move the slider we're going to want to see the number on the UI as well so now that that bit is done let's now move on to the more interesting stuff now and let's actually create the goal with inside the database so let's choose the create goal option here move up to the action flow editor hit open and the first thing that we're going to want to do is validate the form we just want to make sure that the user has actually put some details in okay so choose add action and we just want to select a validate form here so just select validate form and the form that we're going to validate is the only form that's on our component which is form create goal so that's now all in place now let's now make that call into Super Bass okay so hit the little plus option here hit add action and on the right hand side let's just do a search for Super Bass here and we're going to want to insert a row so hit insert row and our table that we're going to make that insert is going to be on our goals table as we're creating goals so now we need to set the actual a field values with inside our Super Bass a table so choose add field here and where it says ID just select that and on the field actually choose a title so the first field that we're going to select is going to we're going to set its title and then we've got the value and that is going to be our widget State and it's going to be the goal a title so the so whatever's key into the title field is going to be then saved into the database a column let's hit add row again sorry add field hit the field name here and choose the description and then we've inside the description side the value choose a widget State and then choose a goal description that's that one done and let's hit add field again choose that one choose the field and then move down to the status with inside the value we're going to want to choose widget state and choose a goal status just connects that up here and then we're going to add the field again and choose this one here now this is where it gets slightly a little bit more complexes because as I said previously the slider is producing a decimal point value okay so it could be anything from like 0.2 or 3 or something like that we're going to want to convert that into a whole number so what we need to do is we need to choose the uh the actual progress field because that's the the field in the database we want to set but the value is actually going to be a code expression okay so we're going to take the value in as a floating as a decimal point number okay and then we're going to convert that to the whole number so the first thing we're going to want to do is choose add argument and we're just going to choose this particular value here we're going to just change this then to progress like that so it just matches the name it can be anything but it just matches the name then of our field where it says type choose double because that's what it is and we're going to choose the value of that it's going to be then our widget State and it's going to be then our goal progress so just choose that so now we've got that value available to us now we're going to want to now take that value and make this change so just scroll down here and we're going to want to in the expression here in fact we're just on the return type here we just want to make sure the integer is selected yes it is so it's going to be integer which is the the fault type here and with an expression we're going to take the name of it so this was progress this is what we just set just above and we're just going to want to do this operation here so just do type the word round it's going to round the number up we just need to put the the brackets in there okay so it's um so then it's complete the expression will then validate so we just say check errors and you'll see here then the ex we should get a no errors that's come back so that's literally all that we need to do okay so that's how very quickly you use an expression we're taking a a kind of a double type and we're converting it into a whole number so just hit confirm and Away you go now if we didn't do that and you tried selecting the actual progress you would have seen that it would have been red because there would have been a mismatch in its typo case so that's how you get over that particular problem so just a couple of more fields that we need to set with inside our create goal so just hit the add field here let's choose the ID here choose the field ID here and select archived and we just want to make sure that that value is true the next field that we're going to need to set is our user ID okay so this is the authenticated user that's actually into our application we're going to want to make sure we set the user ID because all of the the both the goals and the tasks with inside our database will be Associated to the user that has actually created them okay so just where it says field ID just change that then to user ID and within the value we're now going to want to pull this from the authenticated user Source okay so just select that and then choose the user ID of course we don't that's all that we need to do there and then a couple other little Fields just for good measure just need the set and just select here and this field here and we're going to say the number of tasks so of course a brand new goal won't have no task so just set that as zero and of course finally there's one more field we need to set and this is going to be the number of completed tasks to just select that number of tasks complete we are going to set this value as 0 as well so that's pretty well much everything set up there we just want to do one final thing in it is that once the actual the row has been created we then want to then just close the Bottom bar that's actually going to be shown to the user just hit the little plus here hit add action and then of course we're going to want to hit this option here close dialog drawer Etc so just select that and that will mean it will just disappear from the screen so that's pretty much all that we need to do there so we just want to quickly add a sign out option to our icon button just up here so just select that go to the actions option here click on open here here the add action and then on the right hand side just do a search for Super Bass and we're going to want to do a log out so just select that and hit close and that is all that we need to do so back on the home page of our application we're going to want to Now display that create gold bottom sheet okay and the way that we're going to do that is by just adding an action to The Floating Action button down here the Fab button just with that selected just move over to the actions hit open and we're going to want to now add an action on here okay so just select that and the one that we're looking for is bottom sheet so you want to select show here and then we are going to want to then set the height here so just set this as 500 and the component that we're going to want to select is the create goal component that's the only component that we've actually got with inside the application so pretty well much it that's we don't either set anything else in any of these um these values or anything like that that's pretty good and of course that once the actual bottom sheet is then closed it's actually then finished we're going to then want to refresh the database that's actually on the page now we haven't quite got to that yet but um we're going to be adding another action in here to actually then do that refresh which will then ultimately then refresh the actual list of goals that the user is seeing behind the scenes so that we can then see that newly created a goal but we'll come back and do that when we then apply the actual updates to the actual home page so that actually then displays that goals we'll come back and do that shortly so that's fine just hit close and I think that is pretty well much although we need to do so let's now try firing up the application let's see if we can successfully get a goal created uh before we then move on to the next section where we're going to start working on this particular screen which is then going to display the goals with inside the UI so let's do that now so here we are in test mode the first thing you're probably going to want to do if you've come back to this after one of my previous episodes you're probably going to want to sign out because it might be that actually your session at this moment has gone stale okay so it might be that your token is no longer valid so just hit the little sign out option here and I'm just going to sign in as myself okay so I'll put my username and password in hit sign in and here I am on the home screen which is fantastic I'm just going to hit the little plus option here and I'm going to try creating the goal so this is the screen that we just created and I'm going to put this is a test goal I'm going to set one of our options here say in progress I'm just going to move this up here to that so any number it doesn't matter hit create goal excellent so we're not going to see anything visually here because we haven't made changes to our screen to show the goal but if we go over to our Super Bass database let's have a look and see if the goal there it is so our goal has been created perfectly for us I'm over on the table editor here and I've got the goals table selected you can see here that we have a goal created so it looks like all of the details are in there we've got our user ID we've got the description we've got the status which is passed across and the progress of 42 that's looking really really good number of tasks zero number tasks complete that's perfect for us an archived is set as false so it looks like we are all in a good position so now start building on the next episode where we'll start fleshing out that home screen so let's look at the first change we're going to make this is the running application as you can see here that we've got the goals that are being listed on the front screen now our application doesn't do that but we're going to make those changes very very shortly we're also going to set some application State up that's going to get us in the position to handle the filter option here we've got this show archived option that we can toggle on and off so we'll get that set up in the App State as well so let's start making the changes to the application so back on the home page then within the widget tree let's move over to the application State option this just over here so just choose App State here and we're going to create a new state variable and this variable is going to be called a show archived like that and it's going to be of Thai Boolean okay so it's going to be simply true or false it's going to start off in false so we're not going to actually have the any archived records being shown but of course as the user then toggles that then see that and then just hit create and that's simply our Application Study Braille but that's the only one we're going to need to create this stage there will be further application State variables that we're going to create very very shortly so we're now back on the home page with inside our application we're in the widget tree and we're going to choose the list view now okay on the left hand side and what the list view is going to do for us is going to allow us to make that back-end query that's then going to show all of our goals with inside the home page but of course we're going to filter on those goals we only want to see the records that are important to us which is the non-archived records at this particular stage now of course we've just set that application State variable up so it's going to be false when the application first loads but of course later on when we add the filtering in we're then going to set that to true and of course in the list view is then going to update and then it only show us our archived records so with this view selected here just move up to the properties here just make sure that you've got back-end query selected choose add a back-end query and on the query type we just want to choose a super base query here and then our table we're going to choose goals and then of course we've got the query type here is we're going to we're going to be bringing back a list here so just make sure you've got a list of rows selected we're going to keep the limit as it is for now but this is where we now need to put our filtering and so choose add filter and if we just move down here to the field name this has now pulled these from Super Bass we know that we've got the schema already loaded with inside flutter flow so it knows about these fields and we're going to choose archived here now the relation to this particular field is going to be equal to so just choose equal to and then with the value this is where we now need to set our application State variable so just choose the little toggle there and then within aside the App State option just down here choose the show archived now we know that show archived as I said is going to be false by default but of course then as we set that elsewhere in the application that'll become true and then it will show the related records so further down we're going to need to do some ordering as well so just scroll down here choose add order and the Order of the goals that we're going to have to display that this particular time will be on the date that they were created so let's just choose I'm decreasing here so we're going to be putting the newer records actually at the Top If I were to choose these two ascending then the older ones would be at the top so we're going to keep that as decreasing and we're just going to hit confirm so if we just need to just bypass this dialog box now just hit confirm here and you'll start to get that view of inside flutter flow this shows that this is actually almost like a dynamic widget now so we're seeing all of these ghosted kind of panels in here to show this a dynamic one so that's pretty well much our list view configured we're now going to go in and we're going to now start setting the individual values of these to bind to the fields within our Super Bass tables let's do that now so let's start binding our fields to the Super Bass goals column okay so just select on the Hello World here this is the first one we're going to do now if you remember this is going to be the title okay so just move over to the little selector here just select that and we're going to go to the goals row now if you remember the goals row is each row that comes back from the Super Bass table we're just going to choose title here that's quite simple and within the hello world the the actual description here just select that and of course we're just going to go up here choose the goals row and choose the uh the actual description which is just there there it is so next we're going to move on then to the progress bar which is a little bit more complex but let's do that now so within the widget tree adjust select the progress bar and then on the progress value we just need now to select that out this is going to be the value that we're going to pull from the database let's move down to the code expression now if you remember the um the actual progress value that is stored um with inside the uh the actual slider itself is down as a double okay so it's a floating Point number so we need to convert that into a whole number so what we're going to do is we're going to add in this argument here so just select add argument within here we're just going to choose and type in progress so this is what we're going to reference in the code expression I'm just like we did actually when we did the the Bottom bar panel that come up so very very similar to that and the uh the actual type here is going to be the double okay and the value is going to come from our goals row and it's going to be the progress that's there so we've now got a variable that we're now going to use an argument that we're now going to use that's come from our this referencing our progress field with inside our Super Bass database so of course now this is where we now need to do the conversion so quite simply all we need to do is we just need to divide this by 100 okay so we're just going to type in progress forward slash forward Division and then 100. so that will then give us our whole number if I just hit if I just hit check for errors here that should pass okay and give a little tick which it does and we can hit confirm so now we're going to be able to translate where we set something at 10 20 30 we know we're going to see that then with inside the progress bar so now let's now focus our attention on this little value this just here so let's change that now so what we're going to do is we're going to add in a text combination change here okay so what we're trying to do we're trying to get the progress and then we're going to put this little percentage indicator on the end so we can do that quite easily by just choosing that option up here and we're going to choose the combined text option and the first text is going going to be our progress we're going to go to the goals row and we're going to choose progress and hit confirm we don't need to make any further changes and then add the text we're just going to Simply put a percentage symbol in here hit confirm and quite simply you'll now see that we've kind of got the the reference to the variable but you see this little percentage symbol just there so let's now focus on this particular row just here which is going to be quite simple for us to set up so on the left hand side choose a task account as text okay we're going to do the same very very similar we're going to use a text combination for this particular one so just move up here to the little selector here choose the combined a text option and the first one that we're going to put in here is going to be the field so this is going to be the number of tasks that we've actually got okay so if we just move to the goals row here choose the number of tasks here we're going to hit confirm as simple as that and then add some text in and here we're just going to put a space in with a forward slash and then another space and then we're going to add the next piece of text in we're going to choose that and we are going to choose now the goals row once more and we're going to scroll down I'm going to do the number of tasks completed and just hit confirm so we'll see that combination come to come together when we hit the confirm buttons you can see that now so now let's focus on the date now that our goal is actually created so let's choose the hello world here and then choose the selector up here now on this one we're going to choose date time from Unix okay so we're going to select our actual Row first so let's go to goals row and choose the creator app and hit and fetches the time unit we just need to change two seconds actually and then the default value just put zero in there and just hit confirm we know we're always going to get in date and time from this particular field now the time unit we need to choose here again says seconds here and then the available options we just need to select this and say date time format and then the date time format that we need to choose is one that's going to suit our application so I'm based in the UK so I'm going to choose d m y to represent the date month and the year so I'm just going to choose that of course feel free to choose a year month and date and day if you are obviously in the states just hit confirm and I think that's all that we need to do just hit confirm there and we'll have our formatted date and time now so of course so whenever you're working with any uh kind of dates definitely have a look at that you might be able to format them with inside flutter flow instead of doing on the server side depending on how they originate at the source but certainly um use that to your power of inside flutter flow to format the data if you would like so that's pretty well much our panel Now set up let's quickly fire up the application and let's see if we actually get our goals displayed on the screen to make sure we've got no error so let's do that now so here we are then in run mode I've just put my details in let's hit the sign in option and hopefully we'll see the goal excellent there we go our goal is being displayed and it looks like all our details looking pretty good we've got 42 in there we've got no tasks and then no tasks completed and the date let's quickly move over to the Super Bass here let's just change this then to uh say I don't know 66 we could just move over here and we can just put the archived as let's let's put the archived as true here and then we need to just we haven't got any refresh option here but let's just sign back out and sign back in again and we shouldn't see any goals displayed with inside our application so let's do that now let's just hit the sign out so sign in again and excellent no goal is being displayed so our filtering is definitely working that's good let's just set that back and I'm just going to set some tasks here let's just put one in here for completed as well let's go back to run mode Let's just sign out sign back in and there we go looks everything as we expected we've got the 66 in there we've got the details being displayed there so perfect everything seems to be hooking up really really nicely for our application so let's just head back to flood them up flutterfly make some further tweaks actually just before we go any further I want to talk to you a little bit about row level security and why what we did in a couple of videos back was so important for us okay so when we actually created the list view here and we did some filtering so we won't have to edit back-end query you can see here that we only just put one filter in and that was just for that show archived indicator what we didn't do is we didn't put a filtering in for the user ID and the reason why that's important is because what we've done is we've actually let Super Bass do that for us okay so that's really really important we're letting the the back end actually manage that security level for us we don't need to filter it here so we can be confident that the rows that will be coming back will be for the user ID that will be associated with each record with inside our table so if you just move over to Super Bass you can see it in operation here so here's the user ID we know that when we actually create a goal we're actually passing that user ID actually into the record we could have done that actually at the super base level we could actually have uh pulled the um the actual user ID out of the token and then Associated that with the actual the row at that particular time actually at the database level but we chose to do that with inside flutter flow which is fine but what we are certainly doing here is then controlling the um the the further operations that we need are on the actual database row we're actually right at the source okay so that's one thing we want to try and make sure that we do whenever we're building these type of applications is to ensure that and we lock down the security as close as we can to the data as possible instead of it just being on the client side because flutterflow is really in all intents and purposes is a client-side application so of course if you had a website then you could then be in a situation where if you don't lock it down at the database level you could then compromise the security of your application so by doing it here that's it's a really really safe bet for us and if you recall of course we went into the authentication option we went up to policies and with inside one of the row level security so if you look at the goals here hit edit you can see here that this is the token that is coming back and forth between flood and flow and Super Bass as we mentioned earlier we're pulling out this term called sub which is just text from the actual token itself and of course that is the user ID so of course on all of the operations that we're doing on our database you know select delete and updates and all that kind of stuff we are cross-checking to make sure that the token contains that user ID and that's why it's really important then that we see them inside our flutterflow application that I don't need a filter on those uh that you those users itself the database is doing that for us okay so um just a bit of um interesting information there just to bring you up to speed on how the row level security is working with inside our flutter flow application so back to our application then let's now create the update goal component we're going to want to obviously update our goals with inside this application now the good thing about this is we don't need to start from complete total scratch we're going to take the create goal component and we're going to change it to how we need it for the update goal so just right click on that let's duplicate the component and then just scroll down here and we just need to rename it first just move up to the uh the the pencil up here and let's rename this now let's just move the copy like that and then just change this to update gold component just hit the little tick here and we're going to just change our form here and we're going to rename our form to form update goal and then everything else is a pretty well much how we want it we just want to change our goal submit to the button to goal update button okay just like that and then with our title we're just going to rename this to update goal like that so what we now need to do is we now need to pass the record from the home screen into this particular component in order for us to update so the record is going to be the Super Bass row so we're going to pass that into this component we're going to then hook onto it we're going to then make these changes and we can obviously then update their row with inside the database the way that you do that is you need to set up a component parameter okay so with the um the actual update a goal component selected there at the top let's move over to the components so just up at the top right here just go to where it says components and you can see if I just hit a little plus here you can see we've got some options here where we can set that a component up let's choose add parameter and we're just going to call this uh goal here and then in the type we are going to choose a Super Bass row so just down the bottom there it says Super Bass row pass that in and the table name is going to be the goal so that's all that we need to do just hit confirm and then once when that's then passed in we can then now start hooking on to the the actual Fields themselves so we're going to want to display the details from that row with inside these particular Fields the way you do that is just simply select the actual goal with over to the the actual text field there just select that and choose the uh the actual goal itself there and we're going to choose a Super Bass row we're going to choose the title and then just hit confirm and we just need to do the same as well for the description just select that one choose the toggle choose the goal and then choose a Super Bass field as description hit confirm and then here with the goal status we just need to do the exactly the same thing as well but this is slightly different when you just need to we need to move down to the initial option value just select that we go to the goal itself go to Super Bass row and then we choose the uh the uh the actual status there there it is and just hit confirm so we know now that um when we when this particular field gets that value is that it will actually identify the initial value then matches these ones here now remember when we actually created these a particular drop downs and when we actually first built the application we use a theme to style widget which already had these options defined in it as well so of course if you want to add some additional options into this not just these ones or you want to make changes to them then also you can go in here and make those changes but all of that was passed across from the widget styling that we had set previously with inside the base project so finally then let's set the goal progress here just choose the goal progress here and on the initial value you just need to select that we can go to the goal and then we can use a Super Bass row field and we're just going to choose progress so we know that we're going to get that set let's hit confirm oh we just need for the default value in so of course we're always going to get a value passed across but just put zero in there just hit confirm and that's pretty good but just need to update this button here let's just change this to update goal here and we're just going to move now into the action flow editor and we can then put the the actions in there to then actually then make these changes with inside the super base database so let's move up to the action flow editor up here let's click open now this is the actions that were part of the create we now need to make some changes so where it says validate form just have that one selected we just now need to choose the new name because we obviously renamed it previously just choose form update goal and then within the back end row we're not actually inserting our own now we're actually doing the update so just move into the action type just say up to date row and of course the good thing is that all of these kind of are remaining for us but we just want to review remove a couple of fields out so we don't need to worry about these particular Fields here so like number of tasks and we don't need to have those with inside here so we can actually remove that out remove that out we can remove the user ID out as well because um the this is an update so those values are already in our Super Bass row so we don't need to worry about that um we'll keep um archived in there for now because we will need to come back and we're going to add some additional details into our update panel to then support the archive so we're just gonna and keep that in there as well progress remains same so all of these details now remain the same and then finally after that of course we then just close out the the actual drawer itself so that should all work fine for us so just hit close so that's pretty well much um our our actual update component created already so this really really quick to get all of that completed but what we now need to do is we now need to go back to the UI we need to now then make a change to the UI to actually then show this Bottom bar so let's do that now so back on the home page then within the widget Tree on the left hand side let's choose the goals container so this is the goals container that's going to take our long uh sort of key press okay so that will then show this Bottom bar so that's the overall panel here for the goal so we just need to move over to the actions here here and just choose action flow editor let's load that up and we need to choose the on Long presser here's a different kind of your TAP events here we just want to choose on long press hit the add action and we're going to want to show the bottom sheet here so just choose bottom sheet show and then of course we now need to set some details with inside here so we need to set 5 20 here we're going to select the components and we're going to choose the update goal components and we're going to want to pass our parameter in as well so just choose the pass here option and we're going to choose the parameter goal so this is the one that we created on our component and we're going to want to set the value to that so just choose the value and of course the goals row so this is the row of inside the list view that's the one that we need we're just going to select that and choose the Super Bass row and hit confirm and that means that we've now got our our component now hooked into the parameter that's going to be passed across everything else can remain the same there so that's fine and then of course after that now what we're going to do is when the the bottom sheet is then uh exclosed we can then want to refresh the table actually with inside the uh with inside the home page so this is going to be refreshing the list view so just hit the add action option here and let's just do a search for refresh and we're going to say refresh database request we're going to choose the list view as our option and that's all we need to do we don't need to set any more sort of details on here um for the for the moment so just hit the close and we are good to go so let's now fire this up in the uh in the Run mode and let's see how it works actually before we run this up I was getting a little bit excited there's something that I've we've I've actually forgotten to do okay and that of course is when we're actually updating we need to actually tell Super Bass which row that we are actually updating so I was a little bit ahead of myself there so just move over to where it says update goal let's move over to the action flow editor and with inside the update row action we need to move down to the matching rows option here so just select that and then we need to add a filter in there so choose add filter and then with inside the field name we need to choose ID okay so the relation to this is going to be equal to and it's going to be to the goal ID that we actually had passed in so just choose this so we need to make sure we just choose a Super Bass row feel this ID and then just confirm that of course and the two will match so the the goal will be passed into the component we grab the ID we match it with inside this filter and that means that everything that we set then below will be matched to this particular goal and of course in the update will then occur and there's probably one of thing I've also forgot to do and this is maybe something that is slightly a bit of a quirk maybe in flutter flow but of course is it when we actually renamed and we made a copy of this particular sort of component what tends to happen is and I've noticed this as well that our actual form validator kind of almost like turns itself off so we just need to choose the form update goal here and we just want to make sure that we continue to validate our goal title and our goal description so just put the two Tech sort of tick boxes on there and that should be good for us to then mean that our form will remain uh in in a kind of a valid State before we actually then update the goal so let's now run this up now and then hopefully fingers crossed everything is going to work for us so here we are back in run mode let's hold the left Mouse button down on the goals we've got the goal Bottom bar that's been displayed which is fantastic we've got the gold title here so I'm just going to change this to my goal one and then here I'm just going to type in my uh my goal description here let's put a status of say in progress here and there's this just move this down to say 30 there and just hit update goal brilliant there it is all of our details have been updated our progress bar has been updated as well so um everything is looking really really good so I think we're in a good place now there is just one more thing that we actually need to do so we'll go back we'll go back to the update goal component and we're just going to add that archive to indicator onto the actual update gold components let's go and do that now so then back within our up-to-date goal component let's add the archived indicator in for us so we can actually now set that with inside the UI so let's make some changes on the left hand side where we got the text for the title just wrap that so just right click and say wrap with Widget and we're going to say a row and the first thing we want to want to do is about text is we're going to want to reduce the height of the padding so just remove that and remove the 16 from the top there and what we're going to do is we're going to introduce that 16 on the actual row so choose 16 on the row just put that in there like that that means that we now can add some further text in so just on the row hit the little plus we're going to choose text and this is just going to be called archived like that we'll sort out the spacing and everything in just a moment we're then going to then add in our next uh sort of widget in there so just hit the little plus and do a search for toggle so this is going to be uh I I when I write funny enough I call it toggle but it's actually a switch in flutter flow so just choose the switch option there and we're just going to style that up now to um to how we actually want it with inside our application so just on the active color just choose the primary there that just gives it its blue and on the active track color let's just choose a scent three that just then makes a little bit more toned in the background and then on the inactive color just choose the secondary text color there now that should be everything that we need there and we just need to set the initial value so of course this is going to come from the Super Bass Pro itself so just select that and then we need to go to where it says goal here and we're going to say super bass at row fields and we're just going to choose the archived option just there just hit confirm and that should be everything that we need set up so just with inside the first text there so just select that and we're just going to now expand that out to the full width so it just pushes everything over to the right hand side for us probably going to want to lose the the padding actually just there um it doesn't really make too much difference but let's just move that out there just so it close up a little bit more because I don't think our R2 which is forever going to sort of so we'll touch each other so that's okay to do that keep it nice and clean and I think that is pretty much everything that we need so let's now fire this up one last time and let's see if our archived indicator then works for us so here we are in run mode Let's just hold this down of course we're not going to get an update happen at the moment but you can see here that it's displayed quite nicely with inside the UI so what we just need to Simply do now is now hook this into the action that's going to be updated so we just need to set that with inside our um our action flow editor so let's just hop over to there let's hit on the update goal here go to the actions and we need to go to the back end call here and then on the archives option just here instead of just having this default value of false let's just select the little toggle here and we are going to choose the um the actual widget State just down here and we're going to move down to the switch of value now of course we could change this and rename this to perhaps um like you know like gold gold archived um toggle or something like that but um we've got it as that and that should all that we should need to do just hit the close here go back to test mode let's just do an instant reload hold our left Mouse button down here toggle that archived hit update and there we go the goal has now been archived perfect I think we're in a really good place now and um in the next uh session we're then going to sort of build out the UI even more but um I think that's in a in a good place for us to manage our goals at this particular stage we do need to add the delete in there as well we'll come back and we'll do that in in a new video but for now um we're in a good place so let's have a look at what we are going to create in this particular episode so we're going to now focus on building out the tasks page of our application so this is where you should be at this moment in time if you are running the application we've kind of got our goals screen generally created there's a few little additions that we're going to need to make such as deleting goals and all that kind of stuff but this is what you should be presented with so far the sample data will obviously be different depending if you've been running it so far but what just what we want to do now is we want to actually just select a goal now and we want to be in this particular screen where we're going to want to start creating tasks so quite simply come down here to the plus here and I can create a a task in there just for some information for the description hit create task and we should see that task get created so let's focus on start building that part of our application right now so here we are then back in flutter flow and we're on the widget tree let's start now creating our new page so just right click on where it says app pages hit the little plus there hit add page and we can very quickly come up with this wizard here and we're just going to want to say create blank and you're just going to want to call yours uh tasks page and just hit the create page there and so we've got that all set up for us we don't want to have any of the basic widgets that are in there at the moment the app bar we don't certainly need so just on the right on the on the app bar here just press Little X and it's gone for us we're going to kind of introduce our own app by and we kind of did that on the home page so we're going to go there now we're going to copy that and we're going to bring it across to this page so if you go back to the home page and on the row itself just right click and then hit the little copy icon here just hit that go back to the task page go back to the column just right click there and hit the little paste option and then that's going to be of carried across now the bits that we don't need we don't want a lot of the animation here so let's just choose bloody animation to delete that out this particular icon button we can that we can delete here and on this particular icon button we're going to reuse this one okay so we're just going to move this by holding down the left Mouse buttoning very quickly dragging up to the row and dropping and we've got our icon button there so let's make some changes to this now so we want to make sure there's no actions there no we haven't put any filtering on there at the moment so let's just move down to the filter list let's just change that we're going to want to look for a back so we just want to choose any kind of back um the arrow here I think that one there is quite simple Chevron left that's what we want everything else should be set up the same for us that's perfect and we it what we'll do is we'll now go in and actually create the action now to navigate back to the home page okay so we're not going to be technically going back now we're going to be actually navigating back to the previous page there's a very good reason for us doing that and I'll explain a little bit more about that later so um on the uh on the actual actions here so just hit the little action icon up here just select that and say add action and just do a search for navigate there and we are going to want to navigate navigate back to the home page so just choose that well now we're going to want to turn this option off here to allow back navigation because we don't want it to remember us from sort of going back so we just want to just turn that off here and then our default trans transition is going to be a slide right so that's kind of the the visual effect that you see on the screen when you actually hit that icon and the milliseconds that we're going to put in here is 200 that at least gives us that that nice more pacier look of the of the navigation moving back to the previous page everything else is perfect for us and we're just going to want to change the text here and we're going to want to change this and just just go up just select it and just change the word to goals tasks in fact goal to us would probably be better there we are goal tasks and that's everything that we need to do on this particular sort of row that we just introduced so then next up we need to create our list view but that list view is going to contain some further widgets for us okay so we're going to need to introduce a panel and that panel is going to have a a couple of different widgets inside it that's going to have visibility rules associated associated with it for example this task here as a sample is not complete but if I was just to select that now then you're going to see that the visibility rules have now played out because we've now marked it as complete and you can see here that we've got some strikethrough on some text so we can now introduce that panel with these widgets now and of course we've got the little delete icon here that we can introduce at this particular stage let's go and do that now so let's carry on then building our list view for our tasks so on the left hand side where it says column we're going to want to add another column in okay so just hit the little plus there choose column and we're going to want to call this one tasks a column so just up the top there I'm just going to rename this to task column of course um I as a as a long-term flutter flow user I always rename up to the the right there but um you can also do it just down here in the actual widget trees and just double click and you can rename there as well but it's just my habit that I go up to the right hand side so choose which method that you prefer yourself so once we actually have our task column we're going to want to put some tasks in it and that and that we can do by adding in a container and then with inside that container then we've got another row which will contain all of the additional widgets So within the task column the first thing they're going to do is add our list view so that's going to be our wrapper that's going to contain our multiple multiple tasks so just click on list view here I'll type it right there we go list View and then of course this view is then just added in there and of course this is now where we can start adding in those visibility widgets so the first thing that we're going to add in is our our container so just choose container and then the first thing that we're going to do is move over to the style here let's give our style the selection of container primary so just select that now you won't see anything visually there straight away but what you will see of course is that the uh the the panel has actually got that now associated with it but what we're going to do with inside the actual task column itself we're just going to put some padding in just to bring that off the edges here so just choose 16 here and we're just going to lock that in so of course all of the directions are all covered there by our padding and if I just click away here you'll just slide out you can't quite slightly see yeah let's add a let's add a container in here let's add the row in and you'll now start to see if I click away you're starting to see the uh The Styling of the container coming through so now let's work on our row so if you remember back to the little preview that we had just a moment ago our row has some icons which represent whether something is completed or not completed so we need to add those in and then also as well we've got some text in there as well we've got two text widgets that will have either a strike through text or a non-stripe through text to represent that it's it's not complete to that particular task and of course on the right hand side we've got our icon as well so everything is horizontally positioned so this is where we're going to use a row so we've got the row already in line there so let's now start adding the widgets in so hit the little plus so if I just going to do a search for Icon here let's choose the icon option that's just here let's just choose that and we're just going to duplicate that so just right click and say duplicate and then of course we're just going to add a text in there so hit the little plus just hit text there and of course we're just going to duplicate that as well and we're going to hit another little plus here and we're just going to choose an icon and we're just gonna this is going to be actually an icon button of course because it's going to be a button that will actually have a that have like a little Trash Can associated with it so just hit the little plus there and then we've got our icon button in place we'll come back and we'll style those in just a second so let's just change our icon names here so let's choose icon to type the right word in icon complete and let's just double click this one and say icon not complete okay and then with our text what I'm going to do actually is I'm going to wrap our text actually into another row okay and the reason why I'm doing that is because I want to make the actual row actually push out to the full width we want to push that icon to the right hand side okay if I just right click on the text there and just say a wrap widget let's just choose rows we've got a kind of a row inside a row and we're just going to push this text actually inside there like that so it's all inside a row here now when the row is actually selected we can just choose the expansion icon here let's just click that and that pushes everything out there and of course during the recording of these videos you'll notice that that with the final flow team we've obviously continually updating the product so things will gradually change it depending what time you start watching this series but you can see here that the icon buttons have changed here so the one that we've been using quite often in here is this one here on the right hand side which will expand the widget out to the full available width of the uh the space that it's with inside okay so just um just remember the icon do do change along the way so um that's good so let's now make some further sort of cosmetic changes now so with our icon we want to now select the right icon here so let's just choose that um the color is going to be our primary so let's uh oh sorry that's going to be our secondary of course that's just going to be a slightly sort of hint of green and we're gonna our icon size is absolutely fine at the size of 24 and then we want to actually then change the name of the actual icon so let's just select our icon that we actually need so this one's going to be a solid Circle okay so this is going to represent the completion state so if we do a search for solid uh let's see if we got anything under font awesome here uh let's try type in solid check so there we go solid check this is the one that we need here so just choose this a solid check Circle there and then on the next icon let's just choose that one here that's going to be slightly different this is just going to be more circular so let's just choose the color first actually let's just choose the secondary option and then we're in the settings outlined let's change this one as well let's just search for Circle let's see if we can find one that's going to work for us that is on the front awesome as well that's looking pretty good let's just choose that and you can see here that we've now got this circular now actually we don't want the icon color to actually be um actually be the the secondary color actually we're probably just going to want to change it to a secondary text so that's gave you this kind of this gray sort of look now that's looking okay there at the moment we'll sort the padding out in a second now with inside these particular areas here um these two text Fields here we just need to make a change there to the text that we've got here so let's move over to the styling so let's choose a title small like that and that's just going to set the characteristics here of the um of the actual look and feel that's fine we just need to do the same thing for this text as well so let's choose choose that and let's just choose title small that's good so now with the text selected let's just make a couple of our little cosmetic changes we need to do a strike through for this particular text and the primary text is now going to change to the secondary text this just gives it that look of of something that's just been kind of struck through being completed but it just kind of just takes the the boldness of the text away a little bit so it looks a little bit more meaningful let's focus on now the icon on the right hand side here so let's choose the icon here the icon button let's give this some details let's just select that let's move down here so let's change the fill color let's say clear color there so we've got no fill color now the Border color we I don't think we've actually got any border cars let's just clear that color there so we've got no border color here now the icon needs to be a kind of like a trash can so let's in fact let's just do delete outline so that's looking good for us we just take that one there so it's got a little Trash Can here and we can just change the font size down to 20 and whether it says the icon color we want to kind of give that just like a like a a like a ready sort of color here to represent so just choose the alternate color there and that gives us our little Trash looking symbol so finally let's sort out the padding now of our our actual row here so this is the row that we need to make some adjustments to so on the left hand side here we've got 10 and then on the right we've got 10 and we're just going to do five from the top and five from the bottom I okay so things are looking quite nicely for us we've got um pretty well much most of the UI elements that we need in order for us to now make that call out to Super Bass we're now going to want to bring back all of the tasks for a particular goal so the way that we do that is that from the home page when they actually choose a goal we're going to want to pass the goal ID from Super Bass into the task page for then the task page to then do the query into Super Bass to pull back all of the tasks that are associated with that particular goal so what we need to do is we need to configure our task page to accept that parameter that's going to be passed into it so let's create that parameter now so on the tasks a page just choose that we are now going to give the parameter uh we can actually create the parameter on the page so just press the little plus up here and we're going to define a new parameter hit the little add parameter and all we're going to do is we're going to type in goal and then uppercase i and then D okay so it's called goal ID and that type is going to be an in integer because in our database it will simply just be a number that we're going to pass in the the actual ID of the goal it is going to be required because every time you go to this page you're going to always be passing that goal ID so it's important to make sure you set that up as required everything else is the same so just hit confirm of course once we've got that we can now hook on to that now with inside our actual list for yourself that's going to then make that query so let's now configure the list view to to make that call out to Super Bass so let's head over to our list view then just choose the list View and we're going to move up to this option up here which is the back end query option just select that let's add a back-end query in now of course we are using Super Bass so just choose Super Bass query and the table that we're now going to interrogate is going to be the task table so let's just choose tasks and we're going to bring back a list of rows at this particular stage we're not going to put a limit on for now within our filters just choose the add the the ad for the filter and then in the actual field name let's just choose that and it's going to be goal ID okay so just choose the goal ID and then the relation to that is going to be equal to and of course the value is going to be then the the actual page parameter itself this is the one that we've just created okay so just choose goal ID and that's pretty good now we need to add some ordering on here of course we can hit add order let's now go to the table field name let's say the Creator that so what we're going to do do is we're going to actually put the the uh the actual task that was created most recently at the top but of course you can adjust this ordering however you want if you want increasing then of course it will be then the oldest one at the beginning so just hit the confirm there and that should be everything that we need just hit the confirm and then you'll see that we get this kind of ghosted look to the list view to represent that we've got a dynamic back-end query this actually occurring so let's make some adjustments with inside the list view then we're going to want to change the term hello world to map to the title which is the field obviously in our Super Bass task table so just choose the text option here choose the options off here against the text and we're going to want to choose the task row so this is the this is each individual row that comes back from Super Bass we're going to want to map that to the title so just choose title and we're going to want to do the same for this one as well so just choose that select that and go to the task row and choose the title so they are all set we just want to want to change a little bit of padding as well so on the row here we just want to push this from the left hand side of the two icons to maybe have just like a 10 margin on the on the actual padding here so just pushes it off the side there that just makes it look a little bit more nicer says work on the conditional visibility then so on these two icons here we're gonna have some conviction conditional visibility that's going to be set that's going to either display them or hide them depending on the value from the database okay so with this particular one here let's just choose the icon complete and let's add some conditional visibility behind this so just toggle this option on and then let's click on this particular option here on the unset and we're going to want to choose a condition okay so just at the top here we're going to want to put a single condition on this okay so just choose single condition and the first value that we're going to want to set is this one here so this is going to be the complete field okay so click on tasks scroll down here and there's one called complete and we're going to want to say if it's equal to true if it's complete then we're going to want to display this icon with inside the UI so just choose the second value here choose value Source we're going to say specific value just scroll down and we're going to choose this to be true and hit confirm in fact what it will do we're just going to literally select and we're just going to move up to here and we're going to copy this because we're going to want to do the complete opposite of this okay and we'll be able to copy that in so we're going to paste that in and then we'll be able to be able to then change those values so just choose the copy option and then on this particular icon here if we just choose that and we go up to conditional visibility just choose that on and then with inside here just choose this little option up here which is called paste variable so when you've got something in the clipboard it will then allow you to paste it in so just choose paste and this and everything else is going to be exactly the same but on the actual second value here we're going to want to display is false so we're always always going to show one icon okay but of course it's going to be dependent on the on the actual condition that we're applying here so just choose confirm and we are good so that should actually work for us now if we had a a task with inside our goal so funny enough we now need to do exactly the same thing actually on our title but this time we're going to choose the one that's that's a strike through so we're going to paste the same condition that's going to be the same as this icon complete here because both of these are going to be on a completion okay so with that one actual selected just choose conditional visibility we're going to go here again and we're just going to Simply paste that in and hit confirm and of course on the title here just select that one go to the conditional visibility let's just choose that one let's paste that in there and quite simply on the second value just switch this around to then false so we should have everything set up quite nicely there so let's Now work on the delete action now this on the right hand side so let's now choose the icon button and let's click on the little actions up here and let's open up the action flow editor now of course when somebody Taps on this we're going to want to delete the row from the database and that's done really really easily with inside uh Super Bass so let's hit the little plus action and we just need to Simply make a call out now to the Super Bass database to make that happen so using the power of flutter flow just choose a Super Bass on the right hand side and there's one just waiting for us called delete row which is great so choose delete row and now this is where we now need to set some details up so with inside here we just need to set the table so it's obviously a task it's going to be deleted so just choose tasks and then we're going to want to then say the matching row we need to match this to to then identify which which tasks that we want to delete now obviously with inside the list view there's many many rows so we can simply just reference that row with inside here to then make sure we're selecting the right one to delete so with that just drop down selected just choose add filter now with of inside the actual filtrate safe choose a field name and we're going to choose ID because every single task that gets created within super bases can have a unique ID created for it so we just need to say ID and the relation to it is going to be equal to and then the value is going to come from the row itself okay so just choose task row there and we're just going to quite simply just select ID from here so we've got a match between the ID that we want and then the value that we're passing in on the row and that is all that we need to do so just hit close uh no so I'm not going to hit close just for a second there's one more thing we need to do actually once we've actually deleted the row we're going to need to perform a refresh of the of the actual database query okay you can do that really simple and we can just hit the little plus here hit add action and if you just do a search here for refresh we can say refresh database request and the widget that we just need to select is the list view we've only got one list view on this particular page and this is going to make a quick call out to Super Bass do a refresh and of course we'll instantly then see that task deleted so that's all that we need to do just hit the close and we are in a superposition right now so um everything's looking pretty pretty good um obviously we can't actually create any goal any tasks yet but we certainly got everything hooked up just as we need it in order to display all of the tasks that we've actually got with inside the UI okay so let's have a look at the next bit that we're going to build we're going to want to now start creating task Okay so we've got the little plus button down here when you hit that then you get the create task kind of Bottom bar that will appear now this is nothing different to the creating the goals but obviously there's less fields on here it's a much much more simpler Bottom bar so let's have a look then at how that works so what I've done is in our project I've actually created the very basic elements of this and all I've simply done is I've just copied the create goals one I've renamed some Fields um just to get ourselves ready for us to then start hooking that into UI so let's walk through that now so back on the task page then let me talk to you about the the duplicate of the goals component that I've done so um all I simply did is I went over to the the left hand side here as I right clicked on create goal component I just said duplicate I gave it a name of create task component and then what I did was um with the with the new component now created I went in there and I then went to remove the stuff that I weren't interested in okay just get it looking like this we simply got a a title and two fields for this particular component and then obviously we've got our button which has been re-labeled to create tasks so all you simply need to do is just just rename the form to uh sort of form create a task I'll see I'll rename these as well so please go ahead and do that and we have everything as as it was on the on the actual create goal also all the stuff that we don't need I've got rid of we've got text heading there of rename to create task and we've got title and description and I've just simply renamed the fields there and the and and the button has got no actions or anything like that associated with it so it's pretty pretty clean the first thing that we need to do do is just click on the form create task we need to make sure that your task title and task description are checked if they're not make sure you do that so just hit the little ticks against the side of these and then the validation of the form will become then active and ready for us to then make a call with inside the button itself so just make sure that's all done sometimes it applies that sometimes it doesn't but my um I believe I don't think it's actually ticked by default so I'll just make sure that you've got those selected there so then next up what we need to do is we then need to do the most important part and that is actually creating the task itself but before we do that what we need to work out is um how do we associate a task with an actual goal and the way that we do that is what we'll do is we'll Now set up a parameter in this component where we'll pass in the goal ID so this will be the ID that we would have passed to the task page okay we're going to pass that into this particular component and then we've got it available to us and then we can then perform and reference that particular goal with inside this particular action itself so the way that we do that is we go up to the actual top of the component and we create a new component parameter so just choose a little plus here and we're going to say add parameter and quite simply we're going to type in goal ID g-o-a-l and then uppercase i and then D okay I just put an uppercase an uppercase i i in there you don't need to do that of course but that's just for my programming days that I always do like a camel case there so then with inside the actual type we know that it's going to be an integer it's going to be a number that we're going to pass in it is required into this particular component so just make sure that's selected and then hit confirm so we've got that now set up ready for us to Now hook onto in just a moment so we're going to go to the create task now of course and this is where we need to make all of the magic happen so let let's open up the action flow editor hit open and it's on tap and we're going to add an action in so the first action that we're going to add in is the validation of the form we're going to make that call out the form validator just to make sure that everything is good for us and just hit that and then we just want to choose that it's the form create task that we want to make sure is selected hit on the plus and this is where we now need to call out to Super Bass now to perform our insert of our task so with with this one selected just move down here to Super Bass and we're going to do the insert row so just choose that now of course the table that we're going to be referencing here is the tasks themselves such as choose tasks and then in the set Fields just choose the add now and this is where we're now going to want to set up the um the actual like the title the description and of course the goal ID which is really important as well so where it says um ID just select that and we're going to the first one that we're going to choose is the actual title itself and the value so just choose a little selector here the value is going to be the widget State just at the bottom if I just scroll down and choose task title and then we're going to want to then add another field in as well just choose that there choose the field name choose description and just choose a selector I'm just going to scroll down here to widget State and we're just going to choose task description so that's the two main Fields now hooked up with inside the UI itself now this is where we now need to set the goal ID okay so choose add field choose the ID and we want to change this to goal ID okay and the selector just select that and we are going to select the component parameters you can see it's just kind of expanded for us and we've got the goal ID in there okay so just to recall then we're passing the goal ID from the home page itself into the task page and we're then passing the goal ID from the task page into this particular Bottom bar component that then appears on the bottom so with all of that selected that's pretty good we don't need to set any of the other fields for us in fact probably what we'll do is we'll um just for completion actually I'll tell you what we'll do is we'll just choose the field here and we'll choose complete and we'll just pass in the term false we know that when we create a an actual task itself we're just going to force it to set it as false for us so now finally all that we need to do now is then actually close out the bottom bar so just choose the add action and we're just going to select the close dialog drawer Etc just select that and we know that will just naturally then close that Bottom bar up that's all that we need to do hit the close and we should be in a good position now that once this is actually up and running we should then be able to create the actual task itself okay so we're not quite done with our UI changes just yet because we can now create tasks but of course we're going to want to update them as well so what would happen is in the running application we'll just hold down on the actual task itself the update task Bottom bar will then display the component and of course we can make these changes and hit the update and once we do the update then the actual tasks behind the scenes will then refresh um now we're going to make some changes just like what we did before I'm going to take the kind of another component I'm going to make a copy of it rename it and let's let's walk through that together and I can show you the changes that we've done in order to get us ready for us to start adding the logic in to then apply those particular changes so let's sum let's let's do that now so they're back with inside the widget tree you can see here on the left hand side we've got this update a task component so all I simply did was I just right clicked on the create task component duplicated it and then called it update task component so let's have a look at that now now what we're going to need to do is we need to make some changes to this of course because the behavior is going to be slightly different because instead of us passing a goal I sorry a goal ID actually into this particular task we're going to need to pass the task in in order for us to update it okay so the first thing that we're going to want to do is and once you've kind of renamed all of these fields so just have a quick look at this now you can see that everything is as it was before we just need to rename all of the fields and remember to do the form as well if you haven't done that so just select that and then on the right hand side just make sure they're both task title and then task description are tick so just make sure you do that everything else should be as you had seen it previously but just with those changes I've removed all of the actions out of the button update task as well because we'll walk through that together in just a moment but some at the very top here we're going to make a change we want to want to remove the component parameter that it that was actually up there so you remember was passing the goal ID so just simply remove that but we're going to want to make a change because instead of passing that goal ID in as I said we want to pass the Super Bass Row in that represents the actual task so just choose add parameter and we're just going to call this parameter row task like that and then the type is going to be then a Super Bass row so just choose a Super Bass row there and then the table name of course will be then the actual task itself so that's all that we need to do so once we've then got our row task we can then do some further binding now on the UI because we're going to want to put the title and there's a scription actually into these fields so we can do that really really easily in flannel flow so just just choose the task title there and then down here and we just want to set the initial value so if you just um make sure you select that we're going to want to choose the actual row task itself so just choose a row task and then with inside the Super Bass row field we're going to want to choose title and then we just want to hit confirm and we just need to do the same for this as well so choose task description go down to the selector go to the row task itself choose a Super Bass field as the description and then just hit confirm so we know that we as soon as we then load this up we're going to pass in the row and then we're going to see the details that we need with inside here and of course we now need to move on to the update task piece we're going to want to update that row so let's walk through that now so just with that button updates are selected just choose the open of the action flow editor and of course just as we did before we're going to want to validate the form first so just hit add action just go up here and type in Val and then you can see you've got validate form just select the actual form itself so that just enforces it and of course hit the little plus hit add action and this is where we need to do the magic bit and then go to Super Bass here and we're going to want to update the actual rows to choose update row and then in the table it's going to be the actual task itself on the matching rows choose add filter and then the field name is going to be the actual ID itself so this is the ID of the row and the relation is going to be equal to and then the value will be then the row task and it will be the Super Bass row field which will actually be the ID so that will just make sure then that um that the it all those are the changes that we're making will be to that particular row just hit confirm and then we have a matching row set now of course the set fields which was very simply just as we did before we just need to say add field choose the right fields that we need so it's going to be the title and of course that's going to come from the actual widget State itself to scroll down and choose the task title we're just going to minimize that there and then go to add field we're going to choose that there the ID and just change that and then to description and then on the actual value itself we're just going to move down to the widget State and we're going to choose the target description so that should be our two fields that is now going to be set up that that's actually all that we need to do now so and finally we're just going to then do what we did before we're just going to close out the actual row itself so let's just sorry the actual Bottom bar just hit close here and then we're going to choose the close dialog drawer and that's all that we need to do so that should be all set up for us to to then now then then hook that up to the actual UI to then actually then display the actual task so let's now move on to that stage of the project now where we're going to start I'm hooking up all of these components that we created and then hopefully we can then fire up the application and hopefully if we haven't made any errors the application will be uh will be up and running but let's let's try let's do that now okay so in order for us to create a goal actually on our page we now need to add the Fab button in just as we've got on the goals page so let's go to the home page that is the goals page let's go down to the bottom here and choose a floating action button let's just right click on that and say copy and then we go to the task page here and then we can right click on the task page just here and then hit the little p option there to paste that in so you can see that now nicely at the bottom now we need to select the actual action here because we're going to need to Now hook that in to actually show then the um the actual Bottom bar that we need at the moment we've also pasted across the actual action from our goals of pay so we don't really want to um actually uh set that so let's go to the action itself so hit on the little action option that I open up the action flow editor and we're going to want to change the properties of this so instead of the actual create goal component we now need to make a change to actually say you know something let's choose the up let's let's choose the create task component that now the height probably isn't quite right so we probably need to make some adjustments to the height because we know that the the create task component is is not so high in its height so I'm going to make a bit of a guess here and I'm going to say 370 but we might want to come back and we might want to make that particular change now as we do know that we're going to also want to pass in the uh the actual goal ID actually into the create task component of course because we're going to need to tell everything inside of that what the goal ID that we're creating a task again so that's quite simple to do so just where it's got the actual pass here we need to select that so we need to choose the actual parameter here is choose goal ID and we need to set a value here so just choose the value and you can see the here that our page parameter is the goal ID so just choose that and we know that we've got the two hooked up there so we know now of course what will happen is our bottom sheet bar will be displayed and the action will actually pause at that particular point now it's not until that bottom sheet then disappears from the UI AI that the actions will can then continue with inside this particular section here so what we can now do is we can now call the and call out to the database and actually do that refresh of the database so just hit the little plus here hit the add action and we're just going to do a search for refresh and we're going to refresh the database request and on the widget we're just going to choose the list View and that's all that we need to do and that's what will quite simply mean that as soon as that Bottom bar disappears the um the actual task will then be refreshed with inside the list view so we'll know that we'll create it and it will then get displayed so that's all that we need to do there so of course we now need to do the update itself so what we're going to do is we're actually going to add it to this particular container here okay so just select that and then we're going to go up to the actions up here we're going to open up the action flow editor and what we're going to do we're going to do the on long press okay so just choose on long press there and we're going to add an action and of course what we're going to do here is going to open up the bottom sheet again so let's just choose the bottom sheet here and we're going to show it here and the the the height again we're going we know well I'm going to guess it's at 370 again for the actual update but we might want to come in and just change the height of that of course all of the other details there are pretty good we just need to select the component of course and we're going to choose the update task component and of course what we need now need to do is we now need to pass the Super Beta row actually into that particular uh into that particular component so print the little pass here where it says row tasks just select that we're going to select just choose a little selector there and of course we're going to go to the task row itself and we're going to choose the Super Bass row and hit confirm and that's all that can be expected now we could have done this in a slightly different way what we could have done is we could have passed in the actual task ID and then we could have then actually then done a query with inside the actual um the actual Bottom bar component to then go to the Super Bass and pull out that particular row based on the ID and then we have it there in memory and then of course we can then then combine that particular row details to then each of those widgets but actually moving the row around to the Bottom bar is a very very convenient way of getting all of the records that we actually need because we got it at that particular time instead of having to do that re-query again so um yeah that's just the reason why I've done it in this particular way um so just yeah a bit of helpful information there so that's pretty much everything I think that we need to set there I don't think there's any other details that we need so that's all pretty good so let's just close that and of course once um all in fact I keep saying close but I don't need to close it because we need to actually also add another action in here as well and of course once the update has occurred then we're going to need to do that database refresh as well so just hit the little plus it hit action and let's hit the refresh database request and just choose the list view there we go so um that will mean that the database will then get um we'll get a re-query and then we'll see the uh the the update of the task with inside that particular screen now we can hit the close button says hit the close and we are good so now we're super close now to getting this actually fired up but of course we are still uh have a slight problem in that actually when we actually fire this up we're going to see the goals page but we're not going to be able to navigate to the actual goals task page okay so we're going to need to sort of Link the the two screens together so we can do that really easily and if we go back to the actual home page okay what we're going to want to do is we're going to want to move down to the goals container and we're going to want to then bring up the action flow header to open now of course as you know we've already got a long press here in order to actually update the goal but we're going to want to actually select the on tap so since we actually tap it we're then going to want to then navigate to the actual task screen okay so hit the add action here and we just want to choose the navigate to and we're going to choose the task page now that task page is going to require a parameter so we're going to set that here so just where it says pass just choose pass and it's going to be a goal ID that we need to pass across so just choose goal ID and we need to choose a selector here and we're going to choose the go row and of course the goal has an idea itself so just choose ID and then we're going to then be able to pass that through to that screen now on the actual transition type we now need to change that to actual slide left okay and then with the duration just set that as 200 and we don't want to allow any back navigation so just turn that off so um you'll see the reason to why that is going to be important actually as the application develops so what we're going to do is we're going to be navigating um without without the ability to go back into the actual task page we can then make the necessary changes here and then when we actually then navigate back to the actual goals page itself then we're going to be literally navigating back not going back okay so we can ensure that when we go back that there's a database refresh that occurs on that particular page so it's just like we've gone to the page with the very first time and everything then gets refreshed for us and we'll we'll then see the uh the results so that that should be that all that we need to do here so just hit the actual close option that's it of course I think there's probably one more thing we need to do actually on the task page here let me just check here on the actual icon button uh yeah we are going back there I just want to make sure that I implemented that before we run it up so I think we are in a good position let's try firing this up I don't know if we're going to have any problems because we've done a lot in this particular video here of course so let's try and let's see what happens and if there's any issues we can come back and correct them okay so here we are in run mode let's give this a go then let's just choose one of our goals here um that's a good start we've got the goals a page that's actually displayed let's just see if we can go back yeah that's looking good so that's working for us let's try creating a new task let's just type here test task let's type in some details here and hit the create task oh okay so it looks like we've got a problem something's not working for us so let's have a little a little check I normally press about F12 in the browser here and let's see what error is coming up so always make your console selected let's have a look and see what's coming back so it looks like we've got a security problem so and my thought process is when I'm kind of looking at these thinking these errors is I will always think about what is actually happening at that particular time now we're we're clearly trying to create something in the database at this point and we're getting kind of like a an error coming back so it's likely that actually here we've been a violation with the security it's obviously something related to the actual user itself so it's likely that we've missed adding something into the actual uh the actual update request so that looks like that's the problem here let's just go to the network here let's just uh double check let's hit that little create task as well let's see what's going across here so we've got that 403 new react okay so it looks like we've got um definitely something to do with perhaps the user so let's go back to the application let's have a look here so let's go back to the create task component and let's see what we're missing go to create task because that's where we know that the problem is let's have a look we know the validate form is passed that's good so we must be breaking in here so let's have a look here so we've got all of our details here all right okay so the reason why this is not working by the looks of it is because it knows nothing about the user that I'm actually that's actually creating the task it looks like I've missed out adding the user ID actually in with the field here so let's do that now let's add the field in let's select the user ID here just choose user ID and then of course the value of the user ID will come from the authenticated user so just choose authenticated user and then let's choose the user ID itself so we know that we need to apply that to our database table that should be good for us so let's go back then to the actual uh the actual run mode itself let's give this another bar let's just close that down let's just do an instant reload so here we go let's try this again let's just click on that particular goal let's hit the little plus here let's try creating the task so just going to say test title just put some gobblygook in there hit create task ah Bingo excellent so that that definitely was the problem it's definitely to do with the user ID and we can see that we've got our task here so let's just try hitting this little option here so we know we've still got to set the uh the details up for that okay so we've missed that and um that that is something that's quite obvious to me that we've missed so we need to do that um let's just try deleting okay that's good so that's working for us delete's working okay let's just add that task in again test task and create the actual task itself let's try holding and doing a long update there excellent so that's looking good we've got the the rows being passed into our component so all of our details are coming up let's just try making a change I'm going to just put one two three four five in there hit update okay that looks good so let's just hold down again and then brilliant the details are all been persisted so everything is looking really good for our update so that's working great for us um but just clearly that with this just a little bit of functionality we're now missing in order for us to make this actually now complete so um let's go and fix the application now let's get all those changes done so by the way well done if you've been following along and you've got to this stage so far it's all part of the kind of the creation experience where you'll find that um you're kind of you you'll run through things and then you'll test it oh there's a problem and you need to go back to it it's common it happens all the time so don't worry about it um so let's now now fix up our application I think we've done really well at this point so let's focus then on these two options here there this is what I've missed previously we've got actions Behind These of course we're gonna let's let's work on this one first okay so this is when a task is not not completed what we're going to need to do is we need to make a call out to Super Bass and then Mark that particular task as complete and that's done really easily just select the actual icon itself let's go up to the actions let's load up the action flow editor and then let's add the action in and we're going to add this back end call in here so let's just choose a Super Bass here and we're gonna update the actual row itself we're going to select the table which we know is going to be the task and we're going to want to choose this matching row okay so we're just going need to make sure that we're only updating the task that we've got selected so just choose the add filter go into the field name here choose ID and the relation is going to be equal to and then the value of that will be the actual task row okay so that's the row specifically that we've selected so just choose ID so we know we've got a match here we know we got our row so what are we going to do well we need to mark this as complete okay so just choose add field select this go to the field itself choose the complete and then the value is going to be then true and you guessed it what we're going to need to do is we need to take this and then we're going to then apply this literally as a copy and then a paste into the other icon just to do kind of the reverse we're going to turn a complete task into an incomplete task and that's by us by setting this as false so that's good so we'll come back to that in just a second we just want to do one other thing here of course we're going to want to then do a Refresh on the actual databases just choose add action just type in refresh here refresh database request and we're just going to choose the list view so that should be all good for us so what I'm going to do here is I'm going to copy these and then paste these into the other action okay so let's just select that one up here select a copy action chain which will just copy that all of these actions of course if I just said a copy action it will just do the single one so copy the whole action chain and then just close that down there and we're going to want to go into this one here this icon here go back to the actions open up the action flow editor and then we can just select this option up here because we know that we got an action in our clipboard we can choose a paste action and just say paste and then it's all there for us we just need to go back into this update and of course we're just going to go down here and we're going to do the reverse which is going to be false and that's all that we need to do so let's go back to the application let's try this now let's make sure this works for us so here we are back in the Run mode Let's just choose this particular set here we can see this here let's just select that ah brilliant so there we go so it must be now marked as complete in the database and we can do a little check in in actual in Super Bass here let's just go to the task itself let's just do a refresh and we can see that that one is set as true if I go back into test mode Let's just un on sort of Mark that as complete go back into Super Bass and you can see that it's now it's now made it as false okay so everything is working brilliantly with inside our database so here's the final run-in application we're going to start making some tweaks now to the rui to make it a little bit more like this particular application we're going to start off in our task places if I hit that and bring the task in you can see that it says hit the plus button to begin it kind of appears here if I go back and just hit it again you'll see that it just kind of animates into the center of the screen there's also um our kind of fake app bar up here this kind of needs a little bit of padding that needs to be applied to it so let's go and make those tweaks in our application now so back then within the widget tree let's create our empty list components so on the right hand side where it says components just right click there and say add component it should pop up there just some hit the create blank and let's give it a name I'm going to call empty list component like that hit the create component so this is what we have created by default um so we can resize this on the UI so let's just make this a little bit smaller there we don't need it quite that big and now on the on the left hand side here let's hit the little plus here let's add a row into the mix and with inside there hit the little plus and let's add a text in there and with inside the text on the right hand side here just put these words in here I'm going to say hit the plus button to begin and then what we need to do then really just go over to our row and then just make sure that we have everything centrally positioned which it is and it's as simple as that so that's our component created let's now add this to the actual task page itself so here we are then on the tasks page and we're going to want to add our empty list component to the actual list view so when there is no data with inside the list view we're going to want to then display that empty list widget nice and centrally of course with inside the UI so we can do that on the left hand side here if you just select the list view here and we're going to want to now go over to the right here and we're going to want to toggle this option on where it says show empty list widget just choose that now we've got a choice here we can either do an image or a component of course if you've already uploaded some media to your um to your application you can use that or you can use a component and the great thing about using components of course is you can actually use lossy animation so you can put like a naughty animation actually into that component and of course then when that gets displayed then something can animate it but in our application we just keep it really really simple by just putting some text in okay so um just choose the component option here and then where it says select component just select that and of course we just want to choose the empty list component that's the one that we've just created and we just need to make some some adjustments here okay so what I'm going to do is I'm going to turn into a little toggle on where it says view in UI Builder you can see now instantly we're now getting that preview to what it would look like if this is actually running and with inside the application but we need to make a little change down here to the height okay so if we just select that and just type in 80 and then we do percent that oh sorry just type in 80 and then you've got percent stage you can see now that it's somewhat then more centrally to the screen so I've kind of calculated that we've got about 80 percent roughly and then this would be nice and Central with inside the the actual UI of the UI that's actually running on the device so so that means that will be displayed now now that's once that is the display we're obviously going to want to then animate that of course so we can do that really really simple so let's move over to the animation piece now so if we were to take a look at this now in the test mode here if I click on the uh the actual goal itself you can see quite simply now that that's all working for us we've got the hit the plus button to begin but it doesn't look particularly visually attractive it just sits there in the middle so let's now apply the animation so let's just flick back to the widget tree here and on the left hand side you can see I've got the empty list component selected so just go there and um for this demonstration I'm just going to move this particular kind of box here we're going to resize this out this has no um sort of influence on your project at all but I'm just moving out make it a little bit larger so we can actually see the animation previewed with inside this particular screen so make sure you got the text selected then let's animate the text so on the right hand side here we've got this option called animations so just make sure that is selected and you can see two types of animations you got on action trigger and on page load now we're going to want to animate this as soon as this component is rendered with inside the actual UI so it's going to play out pretty well straight away but you've got the other option to choose on action trigger so if you're looking with inside your application to trigger an animation at a particular point then you can actually with inside the action flow editor you can actually call out to your widget and to then play an animation so um there might be cases where you might want to do that depending on what your your kind of building so they're the two modes that we've got available to us now as I said we're going to go on to the on-page load so let's choose ads animation so what we want to do is we want to fade this actually into the UI and we're also going to want to scale it from something slightly larger to then to its appropriate size which is what the size is there at the moment so the first one that we're going to select is fade and of course we're going to play these both these animations at exactly the same time and we can do that by making sure that we select this option here apply a same duration and that DeLay So by toggling this on that means any animations that I I sort of add underneath here will all be played at the same time but of course you can visually if you wanted to you can actually play out animations in a more linear way where you can have one animation play then another one then another one and you just time it to how you want those animations to play out so what we're going to do is we're going to set the duration to be just 300 milliseconds so this is how long the overall animation is going to play for and of course here you've got one option called DeLay So what the delay is doing this is going to say how long do I need to wait before the animation plays out so let's just select this to 300 so we're going to wait 300 milliseconds before the animation starts I think that's absolutely fine and then below that of course we then got our options so when it comes to fading we've got the initial opacity as zero so this is just not visual in the UI at all and then the final opacity is one so it can either be zero to one it could be 0.1 0.2 not 0.3 but we're just going to go from zero to one within the 300 millisecond duration so that's good so that's our fade one set because we're going to go from zero to one we're going to now add our next animation in so just choose add animation and this one is going to be scale you can just see in the previews that I just move these you can see the animations playing out there so we're going to choose scale just scroll down a little bit more and then we're gonna we've got we've got some options available to us we we got both the the X axes and we've got the Y axes okay so we're going to keep these um all in sort of uniforms we're going to set them all at the same time so the initial scale is and what's our starting scale so for me um we're going to want to make this pretty well much double the size okay so we're going to do this on both the x-axis and the Y axes so all we need to do is just slide this up to two and then to two and I think that is sufficient for what we want to do and then the final scale is where it's going to end up once the animation hits the 300 milliseconds okay so the good thing about flutter flow and this is the Fantastic power flutter flow is we can Now preview that animation so if you look very very carefully here let's hit the little preview option and you can just see the animation playing in then so that's all we need to do that's our animation set and and we can then move back into the test mode now and we can actually see that play out so let's give that a go now so here we are in test mode Let's press on a gold and let's hopefully see our animation play out hit that there it is excellent so you can just see there that we've got that little subtle delay it just gives an opportunity for the screen to kind of get itself set and ready um to the user and that little delay is just ideal because it just means that if you've got quite a lot going on with inside your UI there's just that little pause that just makes it feel a little bit better for the user just to kind of get their bearings within the screen when it actually displays will highly encourage you to think always about the user who is using the uh the the the actual application there's most users tend to take a moment or so just to settle into a particular screen when they actually navigate to it so it's well worth putting in those little slight delays in there just to stop things from going a bit too fast so you can see just moving in that's the perfect look that we're looking for so we also need to apply that same uh actual empty list widget also as well to the gold screen as well so let's quickly go and do that now so on our home page then just make sure that we select a list View and then on the right hand side we can go then to the empty list widget let's toggle the option on here as well and then on the widget type choose components and then we'll just select the view in UI Builder just so we can see the actual widget itself hit the select component and we're going to choose empty list component and if you recall from the previous example we put 80 in there and I'm going to make the same mistake again because as soon as you press 80 it disappears so just choose 80 and then you'll get it nicely centered with inside the actual display so that's simply that's all set and of course the same thing will play out again when we actually run this application up just one thing to note of course is that we got where it says view in UI builder of course um you're probably going to want to then turn that off now because we know that we got that set we want to be able to then see the rest of the widgets with inside the list for yourself so just make sure you if you take that off in the UI UI Builder and you can also want to do the same thing as well on the tasks as well so just make sure you guys list view selected go back to this option here just say view in UI Builder just turn that off and we're right back to where we were previously so let's just make a few more tweaks then to our task page the first thing I just want to sort out is the padding on this icon button I think we just need to increase the padding a little bit so let's just increase it to 15 and let's just lock it in and that just means it just brings it slightly off of the the size a little bit for us so I now want to apply a little bit of Animation into this particular page and what we're going to do is we're going to animate the container that is containing the task information slightly shifting up a little bit so we'll get that into sort of visual look inside the UI so we can do that really simply on the left hand side if you just choose the list view so with inside the list you've got the container that's the wrapper for our task information on the right hand side choose the little animation option there and we're going to add the animation in and we're going to choose the um the actual slide there so it's a slight little slide effect so just choose that of course this is an on-page load animation we're going to want to instantly play this out and as I said we're we're not doing a horizontal animation we're actually doing a vertical animation it's just going to sort of bring it up so just down here we're going to select the initial position here as a five so if I just choose that you see that will give us the effect of it shifting upwards and you can see that now if I just preview the animation you can just see that little that little sort of section sort of play out there now the the speed of it is a little bit slow um for sure so we're going to want to reduce that down so let's just use down to 300 and that will give us double the speed so if I just choose that again you can see it's much much quicker now which is perfect we don't want to put a delay here at the beginning because we want this to instantly play out um on this particular animation and I think that is all we that we need to do here so that's I'm all ready to go so let's now go into test mode and let's just check that animation plays out and let's just make sure our padding looks good as well so here we are then in run mode let's hit the little plus button here to create a task against a goal so I'm just going to say test task here just for some sample takes in a hit create task we should see a slight subtle animation now as that task gets created there it is perfect just see it just kind of slide in from the bottom there it did happen I promise you you didn't quite see it but it definitely happened uh which is great so um that's really good and of course if we wanted to um and of course this is maybe a little bit of homework for you guys is that we could actually create an animation which will actually be a trigger animation which we could actually put behind this little Trash Can here so when I actually delete the task we could then in the action flow editor call out to this particular container to then play another animation out as well so that could be good we could just kind of maybe slide it sort of up or something like that um but um yeah I'll leave you to have a play around with that but we can certainly do that with inside this at this application so that's that let's now move on to the next uh sort of tweaks we're going to make inside the UI so next up in our application you can see here that we need to make some additions to our goals page and you can see here that we've got this like subtle kind of Border that's kind of representing the kind of the status of our goal and if I go down here and I add a new one in and I just put um you know another test goal and it's just some copy group description in here and I was to mark this as say a complete and hit create goal you can see here that we've kind of got this subtle green sort of Border that's happening so of course it's responding there of course to the data they were actually setting with inside Super Bass so let me show you now how to implement something like that within the UI and I'm going to introduce you to the use of stacks to create this effect so let's do that now so here we are then back on the home page of our application let me introduce you to the world of stacks because we're going to use a stack now to layer our flutter widgets actually on top of each other okay so for example we've got here the container that we they're pretty much encapsulates all of our goal information but what we want to do is we want we actually want to position one a pad that container a little bit down from the top but behind it we're going to want to put another container which is going to kind of represent the base layer of our stack sort of widget okay so the way that we do that and we need to do a little bit of adjustment first before we can introduce the stack widget and that is um by on the left hand side we just need to adjust our goals container because at the moment it's got this width that said there's 100 which is not technically playing out because all of our kind of our widgets underneath there are already pushing everything out so we just want to adjust this and we're just going to select this to be Infinity now you won't see any visual difference with inside the UI but it will be important for us to implement that when we actually add the stack in so what we're now going to do is and we're just going to collapse everything out the way because we want to keep this really really simple so everything's pretty well much collapsed for us and now we've inside the list view just below that we've got a goals container we now want to right click we're going to wrap the widget and we're going to choose a stack so you won't actually see much happen now with inside the UI but you'll see here that we got this stack widget and we've got our goals container I'm just going to collapse our goals container now slightly because what I'm now going to do is I'm now going to hit the little plus option here and I'm going to introduce another container and I'm going to position that container just at the top here so I'm just going to drop that in now you can kind of see it with inside the UI that is kind of just sort of playing out and you can see it there but we're now going to set the properties of that container now to represent exactly what we want so firstly we're going to call this we're just going to double click on this and we're going to call this container status because that's exactly what it's going to represent for us and before we adjust the properties there on the right hand side just choose the goals container at the moment because we're just going to drop this down we're going to pad this by two so we're just going to choose two and you just see it very very subtly drops down but we know they're just behind it our container will be pretty well much in view very very shortly so let's let's Now set the properties so on the container um the actual container status just just choose percentage here and then just choose 100 that will just stretch it across now with the actual height in pixels because we've got PX selected we just want to give this a height of 25. and then below that we're going to want to set these border radiuses to match the the parent container this on the stop we don't want to see any kind of visual differences with the with the edges or any squared Borders or anything like that so we can change the Border radius accordingly so the top left we only need to set as 16 and we just want to take the little lock off actually because we want to choose 16 on the left 16 on the top right and then these are just going to be just just going to remove these out so we've got a square a square bottom so that's all that we need to set now of course what we're now going to need to do is we're now going to set the fill color but the fill color will be conditional will be based on the status of the actual goal so we do that by moving up to where it says fill color and choosing the little selector here so let's choose a selector and we're going to want to then choose this option down here conditional value if then out so just select that and then of course we can now start setting those those values itself so what we need to do is we need to basically say that if our status is completed then show a nice green color and we can do that by just choosing this option here and this is going to be a single condition so just select conditions there and choose a single condition and what we're going to do is we're going to choose a first value and we're going to choose this and we're going to say to the actual goals row itself and we're going to move down here to where it says status we're going to say if the status is equal to completed because that's the value that we're going to be storing behind the scenes then we know that we can then say now set as green okay so just choose rest a second value you just want to use the specific value to scroll down here and type in say completed like that because that's the option that's in our drop down on the button bar that actually that comes up from the bottom so just choose confirm and then in the color we just need to set the actual value itself so if we just choose the value here and we're just going to choose the secondary color as well so we've got our first condition Now set so what we also need to do is we need to also then choose the plus option here because we need to actually add another condition in here as well so we need to choose the kind of the in progress color as well so within here we just need again to do the same thing again just to go to conditions and do a single condition and our first value is going to be set from the database as the database row should I say from goals row and we're going to choose again status and on this occasion we're going to say is equal to and if you recall from our UI we have one called in progress so just choose in progress like that and hit confirm and here we can just go in here and set a value now we haven't got a like an Amber sort of uh sort of color selector so just use um any anything here if you need to choose an amber color then just do that I've got one here already in my palette which I'm just going to select which is that one there and say use color and then of course we then need to say um for everything else then just set no value whatsoever so that it remains as it is else it won't set it to anything until all and that's all that we need to to do so just hit confirm and we've now got that now selected so if we now run this up in run mode we should see our color play out so we go instantly in run mode you can see the fruits of our labor there we've kind of got the the bar now being displayed which is fantastic this one hasn't got anything because we haven't actually said that but let's just hold the the mouse button down there let's update this and let's mark this then as uh sort of in uh sort of completed if we say update goal we then should see the green so everything is working just as we want with the uh Stacks uh perfect let's uh let's move on so since recording this series The flutter flow product has moved on a little bit there's been new features that's been added to the actual product that we're now going to take advantage of in this particular episode so um this is the final application we're going to make changes now to get us more closer to this application in this particular video but what we've done is we've got now the up in the top right here we've got a little filter option if you click that and then you can now see this a custom dialog that now gets displayed and this is going to provide a nice container for us to add in one this filter that we're using in this particular application but of course if you wanted to enhance this application photo you could add in more filters if you wanted to so we've got the show archive goals just by simply hitting the little check here and then clicking away we can then see that filter then take place if I then click up here take the filter off and click here and then of course the filter then takes effect as well so we're now going to start putting that together we're going to use custom data types as well to store the the values of those filters which you can then easily enhance in the future so let's move over to the uh to photo flow now and let's do that right now so here we are then back in flood of flow and on the left hand side I've got data types option selected and you can see that we're in this blank screen with nothing in it now what we're going to do is we're going to create a data type that is going to effectively going to store the um the actual filtered status of our our actual list view itself on the home page of all of the goals Okay so we've only got one which is just archived so we're going to create a brand new data type called filters that's going to include archived as a value that we can update and we can control with inside our application now the great thing about data types is that they're very very flexible we could just if we wanted to but all of our um our sort of our filtered statuses all with inside the App State but what's really nice about a custom data type is that we can kind of just have one called kind of sort of filters and then contain all of our different filters with inside that of course and it just makes it easy and makes it more manageable and and just generally is well organized with inside our flutter flow project so let's do that now on the at the top left here we're going tool plus option here we can add a new data type and we're just going to call this one filters and hit create and then within the actual schema this is where we're now going to set out all of our filters okay now as I said we've only got one in our project called archive so we're just going to hit the add field and we're going to call this one archived and our data type is going to be Boolean okay so it's just going to be a true or false so if it's true we're then going to display all of the archived goals with inside application if it's false then then we're not we're not going to display any archived okay so it's um it's just one or the other um just hit create and then now we've got our now we've got everything set for us so that's basically all that we need to do with inside this data type section of course if we wanted to put more filters in here like completed or something like that then we can add those in here as well so on the left hand side now let's move over to then the actual uh the actual App State itself so click on App State now this is a value that we created previously now we don't no longer need this because we've we've changed our application from when we first when we first set the first episode it out okay so we're just going to delete this one out of the display so just hit the delete and that one's gone and then we can add in this brand new estate variable so just just choose add State variable and with inside this particular State variable we're just going to call this one filters and then it's going to be a type data type which is just down the bottom there just choose data type and the data type that we're going to choose is the filters which is what we've just created okay so just choose filters and it's going to be persisted okay so we're going to be storing this on the device at all times not just on a on a one run time we're going to be just destroying this um continuously so just choose a little persisted option and then hit create so that's our filter setup of course if I can just select this you can see here that we just got archived in there now it's false by default that's fine for us that's all that we need to worry about and now we can now move on and now start hooking that up with inside our application so let's go and do that now so any eagle-eyed spotters would have spotted that we've got this error that this now appeared up the top right we can solve that really really easily because it's because we our list view is currently set to use that show archived um app stay variable that we've just removed okay so let's go down to the list view let's just move up to the back end query option up here just choose that edit the back end query if I scroll down here you can see here we've got this filters option so just select that and you can see here that the archive just currently saying this equal to well it's unknown because we just removed it okay so we need to make a little change here so select that and then on the little pen option here just choose the edit because we're going to want to choose a brand new variable so download if you scroll down here you can see we've got App State here we've got filters this is what we've just added so just choose filters and then we've actually got the field here to be selected which is now called archive so just select that hit confirm and we'll know that everything is all perfect for us so it's now going to use that particular value in order to apply the filtering to our list view for archive so just hit confirm on that so now we're right back to where we were we've got no project errors up here it's all gone back to a tick which is really good so now what we can do we can now start implementing the functionality now to then display this new custom dialog which is going to ultimately gonna allow us to then choose this archive status now let's create this drop down component so on the right hand side let's click on components with inside the widget tree hit add components and of course app pops the create component sort of panel now the great thing about flutterflow is it's got so many templates that you can actually use now we're going to create Ours from scratch because this is a full walkthrough video but of course if you wanted to you can just do a search for like drop down here and you can see lots of different options that the flood flow team have kind of designed which is a great starting point um if you're looking to kind of get yourself up and running really really quickly you could take one of these and just kind of customize it now what we're going to do we're going to create something that looks a little bit like this actually going to keep it really quite simple but as I said we're going to create that from scratch so let's hit the create blank option here and let's put a name in here of uh filter drop down something like that hit create components and then we're back into the the empty view so the first thing we're going to do is we're going to add a container that's going to encapsulate all of the all of the widgets that we need with inside our component so hit the little plus here let's choose the container option and then with this container what we're going to do is we're going to use one of our our preset of themes that we've got here so just choose the theme style here and just choose container primary and then that will then give it some of its characteristics that we need obviously for the look and feel like the sort of drop down Shadow and all that kind of stuff and we're going to be able to need to make some options some changes just down here so on the whip let's just choose the width of 300 that moves it just slightly across and then the height is going to be in fact we're not going to keep a height in there for now actually we're going to we're going to leave the the containing widgets to set the height of the actual container so we've got all the Border radius set that's all good for us and we've got the color set I think that's absolutely fine I don't think we need to make any changes just at this moment other than actually the the actual padding and you'll see why this is quite important actually because when this actually gets displayed with inside the UI we want this to kind of position itself off of the top and the right hand side of the of the actual application Display So within here we're just going to delete that 20 out here we're just going to put say 16 all the way around just lock that in and then you'll see that that's now bought just come off of the edges which is kind of what we need so now let's start putting our sort of our widgets with inside the actual container itself now so let's put a column in there for starters there we go and then with inside our column we've got two rows so we've got the row for the actual header of the actual component itself and then we've got then another row which is going to be for our archived options okay so let's just choose inside the row here let's just select row here let's just put another row in here just for good measure so we've got the two rows in here and then we've inside that first row and we're just going to put um a a text uh widget in there first so just put a text in there and then on the right hand side there's also going to be an icon button which is going to allow us to enclose down this particular sort of drop down list so let's just choose the little plus here let's go in here and just do a search for Icon button that's good and that will just position it here we'll just go and now set the properties of that of those particular widgets so on the left hand side let's just choose the text option let's go to one of our Styles here let's just select that and let's choose the uh the actual theme style Body we want to keep this quite quite small with inside the actual drop down we don't want to be too large and then just on the left hand side here let's just choose say 16 just to bring that off the edges here now of course a good thing about this this this the actual text option is we can actually expand that out so let's just expand that out and of course that will push our our button out to the right hand side and now we just need to set the alignment now with inside our text we've just scroll down here let's just choose the text align to be to the left hand side and then let's now move over to our button so we've inside our button just choose that and let's now make some adjustments so let's just maybe just push this off the right hand side let's just choose the 12 here just to push that off the side and let's now choose our icon so just press the little add here now we're looking for a close icon so we just want to do it just a little X there that's fine the we want to start setting some of these other particular values here because it looks pretty ugly like that so first thing to do is let's move over to the button size here let's just choose 36 let's just reduce the size of that the fill color we don't actually want so let's just clear that fill color that makes it look a little bit better and then on the border color let's just choose that we don't actually need that so let's just clear that color as well and then on the icon side just want to reduce this down to 20. that just makes it a little bit smaller for us so I think that is looking pretty good there I'm actually just going to make a slight change up here I'm going to move up to the top here I'm not so crazy about that particular padding so let's just drop that down to say five there I'm just going to bring five off of the top as well that's a little bit nicer for us so now with inside the actual title itself let's just change this now to go up goal filters just like that there I'm just going to select the text option here I'm just going to remove that particular padding there because we'll we'll sort ourselves out with the row just below on padding just just pushing that down a little bit so that's looking pretty good so now let's move over to our row now just down here let's now start working on that so let's now add a check box in so just choose check box here just select that and then the next one we're going to add in then is just another text field there so just choose that there so we just got our plain text and we can now format that in just a moment so let's work on our check box first because that looks pretty pretty ugly with inside the UI as well so just choose the check box on the right hand side here let's now make some adjustments here so secondary text is fine the primary checked color let's just change that to our secondary color okay so you can see now it's got that that sort of color to this just behind there which is very very similar to the other uh sort of buttons that we've actually got with inside the UI and with the actual checked info color let's just choose the primary option here the primary button text just choose that and we've now got that nice kind of white tick with inside our check box we also need to just do some adjustments here on the padding so let's just choose 12 here let's push that off and on the right hand side let's just choose 12 there that just pushes our text slightly over so we'll come back and we'll we'll adjust the actual the The Binding of the checkbox value to the actual application State very very shortly but let's just finish up with our styling here now with inside here we just want to make a slight change on the theme style here we're just going to choose a textile body as well we're just going to remove the padding that's been introduced from the actual theme style that we got here so we've got a kind of nice subtle sort of gray text and let's just change this now to show archived goals just like that so that's looking pretty good and we can just adjust the size this is why we don't quite need it that that large there just give us a little bit more look to our our panel itself so finally then on the actual row let's just choose that let's just give this some padding from the top here let's just choose 16 and that just pops it down a little bit so just adjust that down a little bit there we go so that's all looking pretty good for us and let's now focus our attention on binding that checkbox now to the the actual the actual application state that we've actually created to track the changes so now on the actual widget tree let's just choose the actual checkbox now so we're now going to set that to be the initial value and instantly just until you've got this um as a preview you can just kind of see the difference there between the actual checkbox value and what it looks like with inside the UI so this is fine we're just not going to worry too much about that for now we can keep that on but let's just choose this particular option here and let's choose the in the checkbox initial value and that's done really really easy so all we've got to do is we've just got to hook onto our app State um there to actually pull that value in so just choose app stay here and then move down to filters and then we're going to go down to select filter and we're just going to Simply choose archive to hit confirmed now we know that as soon as this now then gets displayed with inside the UI it's going to look for that value if it's true it's going to mark it as checked if it's false it's going to be unchecked so that's going to set the initial value now of course setting it is one thing but we're actually going to want to Now hook on to the fact of actually changing it so as soon as we make those changes we're then going to want to persist that value with inside the actual application State and then once it's persisted then of course the list view on the home page will then refresh and then show them the correct results from the database so we can do that really easily again and that's this moving now up to the actions so with the actual checkbox selected move up to this option up here for actions open up the action flow editor and this is where all of the magic will happen so with inside here we've got two events that we're looking for here we've got the on toggle untoggled on and on toggled off now actually the actions with inside each of these are going to be exactly the same except one is going to set the state to be then true and one of them is going to set it to be false so we can create it in one and then we can copy it to the other so let's now create it on the on toggle on so as soon as somebody hits a check box um actually it's the tick we can then display and the uh we can set the value sorry so on the add action just choose add action so we need to do here is then go to the update App State so just choose update App State here and let's move on to where it says set Fields just choose a set fields and we are going to want to choose the filters here and then with inside the filters itself we're then going to want to now move to the update type so just going to choose that and we're going to choose update Fields okay so just choose update fields and this is where we now need to set the field value so just choose add field we're going to choose archive that's the only one that we've got on here just choose archived just choose it again and then we're going to want to set that value so we're going to set the actual value to on this state it's going to be true so we just need to go to the set the value and the quickest way to do this if you scroll right down to the bottom here you've got this option called constants just choose constants just scroll down again and you'll see that we've got one in there called true fossil now we're just going to want to choose the true option so just hit the done there and and then that's all that we need to do now we're going to now copy this now say copy action move over on toggled off hit the little paste action up option up here and choose paste we're going to go back into this we're going to go back into this section here we're going to go back into this section here and where it says archive just choose that and now we're going to select this and then we're going to just edit the actual constant here I'm going to scroll down to the options we've got here for constants and then select the false option and then hit confirm it's as simple and as easy as that and that's all that we need to do with inside this particular actual filter option so just hit close and we're right back to where we were now what we need to do now is we now should just need to now dismiss this actual uh the actual drop down as well so just choose the icon button up here let's go up to the actions hit the um add action here and we can just select this one here called close dialog drawer there we go so that's that's all that we need to do and of course when we actually click away from this drop down the guest displayed within the UI then the drop down will disappear itself as well so let's add a little bit of Animation also into this drop down just to give a little bit more UI attraction okay so if you remember back on the actual final application as soon as I hit the little option here you can see here that the actual panel just sort of slides down there and Fades in um into the actual UI so let's now add those animations into our application so with the container selected here um just on the left hand side we're going to move over to the animations option here choose add animation so this is going to be an on-page load animation so choose add animation so we're going to want to do a fade and we're going to want to do a slide so let's focus on the slide first let's just choose slide and what we're going to want to do we're going to want to apply the same duration for both the animations that we're going to put here so we're just going to toggle this on and the animation is going to be 300 milliseconds that's just enough there and to give that kind of nice smooth sort of entrance into the UI and you could do it slightly quicker than that if you wanted 200 milliseconds and have a little and see what you like there but 300 is how we're going to set it here so the first thing we're going to do is we're going to focus on the slide so of course it's not going to be horizontally sliding and from either left or right we're going to bring this down from the top okay so and what we're going to do we're going to set the initial position to be minus 20 okay so we're just going to bring this minus 20 from the top and you'll see that just play if I hit the little preview here you can just see it drop down there which is just what we're looking for and then of course now we're going to choose the add animation for the fade as well so let's just choose fade and we're going to keep this as zero initially and then out to one so we're going to go completely invisible to then fully visual onto the screen okay so we just now move up to the top here let's just preview and we've kind of got that look and that's it that's as simple as that as we need to do onto the actual drop down so I think we're pretty well much and complete now on this drop down so let's now move back into the the main home page and let let's get this drop down displayed with inside the UI so here we are then back on the home page let's invoke that custom dialog box to open up and we're going to select the icon button here the filter icon button go to the action flow editor hit the open and then we're going to make sure that we've got on tap as the event that we've got um to trigger the dialog box hit the add action option here and then on the right hand side we want to do a search for alert so just do a little search for alert there and we're going to say custom dialog okay so just choose a custom dialog and the component we're going to need to select is going to be the component that we just created called filter drop down just select that and we're going to want to set some parameters in here as well so we want to make sure we constrain the size of the custom dialog box and of course if you added more filtering options in here you can then adjust the height and the width as you need to but we're just going to put 260 in the width and in the height we're going to keep it just as 150 might be some little subtle adjustments we need to make but that's what I'm going with at the moment 150 and just scrolling down here we've got some other options that we need to select as well and that is aligned with the current widget we're going to want to position the custom dialog box to appear around where the actual button is actually with inside the UI that we've selected so by saying the line with current widget that allow us to do that we're also going to want to choose this option here about avoiding the actual overflow itself as well but this is just to prevent the actual widget from sort of Disappearing off of the the screen or in an area which we we do not want it to um crash with anything else or anything like that so just make sure that you got a void overflow selected as well so that's everything that we need to have said on that one there I think we are looking in good shape I think we can just uh now move on now there's one thing that we also need to do and just to point out here that's quite important is that this is going to be a uh the alert dialog box is going to display the this this action flow will pause at that particular Point once the dialog box is then dismissed we're then going to want to refresh the database the actual list view itself on the actual screen that this has been invoked from so we can do that by just hitting the little plus here say add action and then we can say refresh database request and of course we're going to need to choose the list view on the home page and that will allow us to do that there so this is really really important because um depending on how you build your applications we're by blocking the uh the execution of this action flow at that particular point and that's where the the non-blocking option remains to be turned off if I was to actually turn that on it means that what will happen is is it sends the actual dialog box then gets displayed the execution of the events will carry on after it as well so we want to make sure that we keep that one turned off but of course it depends on how you want to use this in the future for any of your own applications that's what the non-blocking option will allow you to do so that's everything that we need to do there so I think we can now fire this up now in the test mode and let's see what happens so here we are then in test mode let's hit the little filter option up here brilliant our dialogue displays quite nicely hit the show archived goals I'm hoping that we'll we'll click that away we should see that there it is brilliant we we're seeing the archive goal that's exactly what we want if I just hold this down here of course and just toggle the archives to be off there hit update goal and it should disappear which is done excellent I'll just click on little filter here take the little tick box off close that down and then there it is so everything is looking like it's working perfectly for us so um we're now ready now move on to the next bit so one final thing I want to do in this episode is add in the ability to actually delete a goal as well and that can be done really easily by us updating the component that allows us to update a goal so just choose update goal component on the left hand side and we want to put our little delete button just to the right hand side of this sort of row here so we just need to navigate down to the row so just choose the row that's just there and we're just going to add another option in here so just click the add a child there and we're going to choose an icon button here choose icon button and we're going to want to style this icon button up so just choose the theme style unset choose the icon button standard and we've now got that icon button displayed for us so we just need to choose the actual icon button itself which is selected and we're just now going to now add the action into now perform the deletion so let's choose the action up here to click open there and let's now add the action that we need in so just choose add action we are going to just to a search for Super Bass here and we're going to want to choose the delete row option choose delete row and the table that we're going to be adjusting will be the goals themselves and we're going to want to match on a particular ID okay so this is the ID that we have available to us at this particular time with inside the the actual Bottom bar itself so just choose the add filter we're going to go to field name and we're going to choose ID we're going to go to relation and of course it's going to be equal to and then we're going to choose the value itself and you can remember here this is the component parameter this is what's being passed in via the to the actual Bottom bar choose the goal and the Super Bass Pro field is going to be ID so matching ID for ID and that's all that we need to hit confirm and that's all we need to do with the Super Bass call so one final thing we need to do is is just close the actual Bottom bar itself so just choose the close dialog drawer just hit that and that's everything sorted for us so let's Now quickly just check this to see if the goal gets correctly deleted from our list so let's now select the actual goal itself I'll hold it down there we've got the little button that's appeared here if I just hit the little delete here magically it's disappeared so everything is running perfectly for us I've got delete in there as well so um yeah let's now move on so just before we get then started and get into the meat of this particular episode we are talking about super day Super Bass triggers now of course now what is a Super Bass trigger well we know that super bass uses postgres under the covers as a database platform of course now what we're going to do is we're going to be creating a series of functions with inside our application that will be then called in invoked by way of a trigger so this is something like an insert or an update or a delete on the actual database itself so of course when those events happen then of course we're going to fire out to these particular functions so then do something with inside our application so just just by the way I have a little introduction there a little bit of a bit of text there for you to follow but um now let's move on and let's now start getting into the meat of the episode so here we are then with our application running as things stand at the moment I've cleared all the data out I've kept it really really simple for this particular episode you can see I've just got one goal created there is no task behind this gold at this moment of time so we've got a really really clean database now if you recall when we built this application in a quite a number of episodes ago we bound these particular values here this is like a um this particular number here that is representing the number of tasks that we've got associated with our goal and this number on the right hand side is the total number of tasks completed and they've remained zero throughout this particular Series so far we are now going to level up our application to start getting these numbers now working correctly and we're not going to do that with inside flutter flow we're going to actually do that within Super Bass we're going to sort of Empower Superbass to keep those numbers in sync okay so um the good thing about that of course is we can take some of the complexity away from our from our app our actual application and we can move it over to the database so with inside flutter flow we don't need to worry about it whatsoever so let's move over to Super Bass now let's walk through that so here we are then back in Super Bass and let's have a little quick recap of how things are set up so on the left hand side here you can see we're in the table editor and we've got our two tables we've got our goals and we've got our tasks and here is the single goal that I've got created the one that you've just seen with inside the application um there's nothing special about this particular goal there's nothing set up in particular but you can see here that we've got the number of tasks as zero and we've got the number of tasks completed there set as zero as well so as we know they currently do not update so this is where we're going to start now working in Super Bass world to sort of get those in sync and in the task table just have a look here there's nothing being created at two but of course as you remember our goal we've got this kind of relationship between our tasks and our goal we know that every goal can have many tasks associated with it so let's get ourselves then ready then to start working on these so-called triggers these triggers it's going to now start doing what we want them to do so with inside um Super Bass on the left hand side you've got this option called database if you just select database this will kind of give you kind of some options here on the left hand side that um it's kind of all like the interconnecting parts with the database and um on the left hand side you can see here we've got triggers and we've got functions and all this and Magic we have been in some of these areas before of course earlier on in the series but there's this particular area of functions and triggers that some of the most interest to us in this particular episode now what we're going to do is we're going to create some some logic with inside the function section that's going to allow us to then um then call out from that when certain database operations occur so these are what triggers are so a trigger is just okay well soon as something happens with inside the database that we're expecting like a like an update of a record or an insert of a brand new record then we want you to call out function do something for us and then you'll then should see the output of that particular function with inside the actual database so just think of it like that don't think of it as programming code when you're in the no code world and you're not a developer or anything like that you've got no real skills in programming then I want you to consider this as more as a configuration okay now there's a little bit to learn but don't worry about it I'll try to walk that through and if you're trying to then then obviously play this out inside your own code then hopefully you'll get an idea of how it all kind of hangs together so let's have a look then at functions on the left hand side let's choose function so at the moment we've got no functions at all with inside our database we've got a really really clean database so what we can do is we can just hit that option there where it says create new function now on the right hand side here this is where we can now start setting up some details about our function so of course we've got the name that we're going to use we've got some other various sort of parameters that we need but this this definition this area here is the bit that where we're going to have to get our hands dirty a little bit and actually write some some SQL um so just think of it as SQL was just like it's just a syntax that we're going to use in order to do what we actually want it to actually do okay so what we're going to do first with inside our database is that we're going to say that when we actually create a brand new task we're going to want to update the the number of tasks that are associated with the goals we're going to start with part one that's what we're going to do we're going to focus on that bit first and then we're going to then extend out to then do other things as well when tasks get kind of deleted and all that kind of stuff so let's focus on that first so I've typed in update goal task count this just up there so update underscore goal underscore task count we can call it whatever we like but if you keep it to that for this particular series if you're following along then that will be really really helpful when you see that reference elsewhere in the application now moving down here we don't need to change any details down here um everything we're doing here is public the return type of course we do need a change now okay we're not gonna we don't want to return void as in return nothing we're actually going to want to return a trigger so just make sure you've got trigger selected and that's what you need for this particular type of function now we're not going to pass any arguments in that's fine we don't need to worry about that but this is where we now need to move into the definition and then start now writing out this particular configuration that we're going to happen in our database so what we're going to do is everything with inside the definition starts with a begin okay so it's got to begin and it's got an end so I encourage you to kind of type in begin and then just down here just type in end so we know everything inside that is what we're going to end up having to create now this is where we now start getting into more kind of more database kind of programming World okay so um what we're going to first do is we're going to um we're gonna check to see is this an insert okay are we actually inserting a row into our task database so the way that we can do that is we can say if and then we do an Open Bracket and then what we do is we type in this um This this term as in TG underscore op and now what that basically is telling us is this is actually something that is local to a postgres data database this is um this is something that we can actually use to determine what type of operation is being performed with inside our database so what we're going to do is we're going to say TG underscore op and we're going to say is equal I'm going to do a single uh quote and then type in insert okay which represents the insert of a record okay we just need to move out of that let's just move out the way here type in then okay and then just hit the enter okay and then just down below this we're just going to type in end if and then just do a single colon there okay so that's also everything we're now going to do is now going to be in between this okay so if we know that if we um if we've got an insert of a record then we're now going to carry out this particular uh change to our database so I'm just going to tab now and I'm going to type in update okay and then do goals so all lower case goals so goals is the name of our database table so we know we're going to want to update the goals and I'm just going to hit the enter here okay and I'm going to do a set okay and then what I'm going to do is I'm going to do a number underscore task so if you remember that is the field that we've actually got with inside our table that's the column that we have in our table this this tracking the number of tasks that we've got we're going to say is equal to the number of tasks again and so what we're going to do is we're saying we're going to set the field name of number of tasks to be equal to the value that's currently in the task so for example if we had five tasks in there that would be five but what we're going to then do we're going to say plus one and that's that's all we we simply need to do that so we're going to say and we're going to say take the number of tasks we've got at the moment add one to it because we're doing an insert and that's good enough for what we need to do and then on the next line we then need to say where and then we're going to do ID so this is the ID of the actual record itself is equal to and then this term called new so this is going to be the actual new record that we've actually got created for us okay so you've got old or you've got new and on this occasion it's going to be new we're doing an insert so it's a brand new record we're going to say new and then we're going to say dot and then we're going to say goal underscore ID so we're going to add one to the tasks where the um the ID of the actual record is equal to the goal ID okay so those two are going to need to match up okay and then once they do we then need to do a return new like that okay so we're going to return so what return you will do that will turn the return the new record that's just been created for us um with that that change that's been made okay okay so once we are ready we're ready now just to hit the little confirm option that's here just on the bottom right hand side you just hit confirm and um hopefully without success there you should see that we get an option that's just up there the little notification actually that says that everything is good now of course if you had an error and you can't quite figure it out please do check the link in the description because I've got links that will take you to the actual code um examples where you can actually then paste those actually into that box so hopefully everything should work out for you there now our job is not done we created the function that's the first thing that we need to do so we have the the statement that's there to be run we now need to actually create the trigger because the two don't know anything about each other the database doesn't know nothing about the function yet so we now need to create that trigger so on the left hand side here just choose triggers so this screen will um show some details here they were not too worried about here this is all kind of internal to um super bass but we're gonna create a new trigger this up at the top right here hit the little create option and we're just going to put our our name in there so just down for Simplicity just keep the name the same as the the actual function that we actually got created now the table that we're going to want to now um make uh make changes to um here is um to actually look for the actual task changes okay so just choose task public so we know that um Whenever there is the uh any of the following events which is going to be an insert update or delete this is going to be specific to then the actual task table itself okay so we're going to want to choose insert update and delete so we're going to want to fire this function whenever we do any of these particular events and the um the actual trigger type we're going to choose as after okay so you can see here that the trigger fires after the operation has actually completed so you've got a choice of either before after so we're going to do after so um this what's important there is that this will actually the actual trigger will fire once the record has actually been written to the database of course but you could do it before if you wanted to but um of course it wouldn't make sense in our application for the option is there depending on what you want to do in your own application so everything else is the same here um the statement though we just need to change to a row so this is going to be for every single row that actually takes place for this trigger it's going to be the trigger is going to be is going to fire Whenever there is a row that is processed okay so just make sure that you just choose a row there otherwise if you don't choose row you'll find that nothing will happen on the actual database itself just down here we've got the function to trigger just choose the function and we want to choose our update goal task count so just choose that and that should be everything that we need we can just hit the confirm button just down here and we've got a success message up there so as you can see here we've now got this entry that's now being created here we've got this uh this the this function here that's going to be called this trigger called update gold task count this gonna fire this particular function update gold task account here and it's going to be on the table of tasks and the events that it's going to fire is is on the insert the delete and update now we have only configured our function to work on the insert at this moment in time okay we're going to come back and do the delete very very shortly um so let's now um just quickly test this out now within five inside flutter flow just to see if we actually get that that number incremented for us and we'll come back of course in the database we can see that in there as well so here we are then in run mode in flutter flow let's press our going so we've got zero down here let's press our goal let's create a brand new task so let's just do test task one let's just put some sample text in there hit create tasks and then we've got our entry there so everything is good there let's go back here and hopefully we should see one which is exactly what we do so let's have a quick look at the database and let's just see that reflected in there as well so let's go back here let's go back to the tables itself go to the goals and let's move across here just for good measure and you can see here that we've got the number of tasks now of course if I was to go back into flutter flow now and actually try deleting that task then this is going to remain as one so let's get that fixed up right now with inside our function so let's move back over to the database option here let's go to functions and let's go to the right hand side here and choose the edit function option I'll be back into that familiar screen that you would have seen previously now this is where we need to make the chain so we know we're handling our insert so we now need to just go on to the particular end of the semicolon there and just hit the enter and let's now put another little check in here and we're going to type in this we're going to type in Els as in for else and then we're going to say if okay and then we're just going to do the Open Bracket again we're going to say TG underscore op so we're going to look for this next operation which is going to be then a delete okay let's just move across here to the then and just type in then and then we're just going to hit enter and we're just now going to make some changes here so of course if we're now deleting we're now going to want to do pretty well much the opposite we're going to want to say set the number of tasks equal the number of tasks minus one so this quickly type that code in now update goals set a number of tasks equal number of tasks minus one where ID equals and we can say old here okay we um it doesn't really make any difference because we're going to be deleting the row anyway so you can say old and then we'll just say ID and that's all that we need to do so we're going to say and we're going to set the number of tasks equal number times minus one where the ID of our record equals the goal ID okay and that's all we need to do and so I think that is pretty much it we can actually just here we can just say return old actually it's it's no no problems we'll just type in return old and that should that should be all that we actually need to do now so we can now hit the confirm as the option here hit just hit confirm and that's good for us now we can actually go back into flutter flow now we can actually try deleting that goal and we should see fat reduction so let's give that a go now so I'm in flutter flow here let's uh click on our test goal let's now actually delete it and go back and we can see it's zero is zero so everything is kicked into life for us we now are handling both insert and deletions which is fantastic but um again our work is not done there's more work we need to do in Super Bass so let's go and do that now so of course we're now tracking the actual tasks themselves but what about the completed tasks of course so we're inside flutter flow when we actually then Mark our tasks as completed we're going to want to obviously say that we've got one of one or two or two completed so in order for us to do that we need to create some more functions and of course another trigger as well so let's move back into Super Bass here and you can see I've got function selected here on the left hand side let's move up to create new function so I've called This One update underscore goal underscore tasks underscore completed underscore count okay so you want to try and keep that the name the same if you're following along in this particular episode and of course down here we're going to want to do the same thing we did before we're going to want to return a trigger itself and then in the definition this is where we now need to start adding in some further details here so as we did previously we have a begin and an end always and then with inside here we're now going to do some various checks just going to tap here I'm going to say if and then we're going to say TG underscore op okay equals single quote and on this occasion it's going to be an update of course so we did inserts and deletes previously this is going to be an update and then we just want to then put then and then just go down here and just do a uh and and if like that we're just going to keep it like that for now and now with inside here we're now going to want to now carry out this um this this further change so this time we need to do if okay again and on this occasion we're going to say the new record okay so this is the the new database update we're going to say is complete and if it's equal to true so if we mark this as complete we then need to do this so to type in then and then just down here we're now going to I'm just gonna put um and and else here so we can say else if okay and we'll come back to that in just a moment so we're going to go with inside here and we're the type in update goals okay and we're going to say we're going to set the number of tasks underscore completed so this is our our column of inside our database numbers task oh actually just called complete actually equals then the number of tasks complete plus one okay and then we're going to do what we did before we're gonna say where ID equals the new record and then we're going to say goal underscore ID as simple as that so we're going to say if this new record is marked as complete we're going to then want to set the number of tasks complete to be equal to the number of tasks complete that we got there at that point plus one so we're just going to add additional one to it now we need to work on this on this a little bit just below as well on this else if so it's very very similar to this song we're just going to be very descriptive here so we're just going to say um we're up with an Open Bracket again we're going to say new DOT complete and on this time we're going to say false and then we're going to say then okay and they're just going to move down another line here just press enter here and we just need to just give ourselves some space here I'm just going to choose and type in end if again so we got like an end diff with inside an end if and we're just going to do the opposite okay so we're just gonna probably just copy this actually I can just do a a control C or an apple C on that and I'm just going to paste that in there and we're just going to do minus one okay so we're just going to reduce it okay so if it's false we're gonna then set it to minus one and then down here we just want to do then a return new so we're going to return the new record and of course just down here as well we're going to do a return new so just to summarize then what this is just doing is this is just going to look for an update okay and if it is an update we're just gonna we're gonna we're checking to see if we're passing in from flood or flow um the the actual value of complete is equal to true for example and then we're just going to increment the number of tasks that we got completed by one but of course if we pass in a false because sometimes in our user application somebody might actually Mark a task as incomplete they may reverse it from being complete to incomplete and of course we're going to want to do the reverse of that as well so that's all that we need to do for now we will need to come back to this very very shortly and make some more changes but that pretty well much should get us up and running with inside our applications so just hit confirm and hopefully fingers crossed will be no errors there isn't and then of course we now need to now create that actual trigger itself so let's just probably just copy this so just copy this to the clipboard here the name because we're going to use that we're going to go over to triggers and we're going to go up to create new trigger we're just going to paste that value in there we're going to choose the table that we're interested in which of course is tasks just there now we are doing an update so just choose update on it saying that's all we're going to we're going to be doing here and we're going to do again the after so after the actual database event has occurred and we're going to go to orientation we're going to choose row and then here we're just going to Simply choose the function that we've actually just created which is this one here just choose that and we can hit confirm and then fingers crossed we have everything that we need so we've got this particular one here which is going to play out here we've got and although we're not doing anything with the update in here it doesn't matter um we've got the update here as well so we'll just follow on into this particular trigger as well and then carry out that particular function so I think we can now go back in the flutter flow and try this out so here we are then back in test mode we've got our goal in here it has no tasks associated with it so let's just hit that let's create a quick test task here test task one let's put some rubbish in there and let's add another one in there as well test task two small rubbish hit create also got two tasks if I go back here we should see correctly that we have the two tasks if I just go back here let's now try completing this task so just hit the little complete option go back and we've got two of ones we've got one completed fantastic that's just for good measure just Mark that one as complete and we have two of two which is great now of course we do um this is great this is all playing out exactly as we would like it in a more of a happy day uh scenario but of course we would have some issues with our application now if we try kind of breaking some rules so for example if I click on this particular option here and I I delete a completed task so I hit the little delete and go back you're going to see that this now still says two with only one task in there so that the single task is correct but we still are marking a completed task inside our in in inside our actual database so um that's not a behavior that we're gonna want so we're gonna have to make some fixes with inside Super Bass to support that now we're going to carry we're going to carry that out inside the next episode because I'm sure that your your minds are probably absolutely exploding this particular point but if you've got this file and your application is working exactly how this is behaving then I'm saying fantastic well done for getting this far so let's look at the first a problem that we're going to solve then as referenced in the previous episode so of course here I've got my test goal okay if I go in there you can see I've got a couple of test tasks that I've actually created if I Mark the test Task 1 and task two there as completed if I go back we correctly see that we've got two tasks and then we've got two which are completed but the problem occurs of course now when I go back into this one and then I actually delete one of these out if I delete that out and go back you'll see here that I've still got two actually marked as completed but of course I've only now got one task so we need to go back over to Super Bass now we need to get that sorted so let's do that now so back in Super Bass then let's just make sure our database is correctly set up now just for us to continue with this particular episode so on the goals table here I've just clicked on the table editor gone to goals if you have a look here we just want to make sure that we where it says number task one we just want to make sure that we've got this set as one task of one complete because in the task table we know that we've got one task in there and it's smart as true there so just make sure that we've got the proper syncing of our goals with our tasks and of course if you've got multiple tasks in there and all that kind of stuff then I recommend you kind of delete all of that up out and just leave yourself then with one goal with one completed task and that sets us up quite nicely then to continue the examples with Inside the episode okay so let's now focus on solving our problem so on the left hand side just make sure you've got database selected and you go down and choose functions we're going to want to change this a particular um sort of a function with inside a Super Bass because it's this function that handles the insert and the deletions of our tasks and of course this problem is occurring because we have a task marked as complete but we're deleting the actual task itself so what we need to do is if we go over to the right hand side here click the little the three dots there click on the edit function and then you'll be into this familiar territory that you see before with us now modifying the definition of the of the actual uh sort of function itself so we know we're okay in the insert section we know that we're um we're as soon as we add a task in that we're increasing number of tasks we know that we're inside the delete section so this is the bit that we're going to need to make some changes to okay so we're going to be deleting a task but what we're going to need to do is we're now going to have to check to see is that task completed if that task is much as completed then we then got to reduce the number of tasks completed with inside our goals uh sort of record okay so the way that we do that is we make some changes just in here so where the where we've got this where we don't want to we just want to put some spaces in between here and we're now going to put another if check in here okay and we just want to check to see if the old record is marked as complete and the way that we do that is this we type in if and then we just do the Open brackets again and we're going to say Old Dot complete so this is the old database record okay it's com is marked as complete and then then down here we just then need to then I'll always put an end if in here as well just because it just completes the set here and this is where we need to then put in an additional update now to actually set the the correct state of the database record so we're going to do update goals because that's what we're going to need to update and if I just do that here and we wanted to set okay and the number of tasks complete and then equal the number of tasks complete and of course we're going to want to reduce it okay so we're just going to do minus one there okay now that is um that's important and we also just need to mark this then as the of the the where option as well so just uh choose uh just type in where okay and then we say ID equals the old record so this is the record that we've got here at the moment is then matched to the goal ID so very very similar to kind of what we have done previously I'm just going to mark that then with a semicolon at the end now we've got just here we're just gonna We want to make sure that we just bring that up there so just keep it nice and complete and that is all that we actually need to do so what we're saying just to recap then um if if we have a record that is currently me marked as complete we're going into the actual goals table we are then uh we're then setting the the number of tasks complete to reduce by one because we're technically we're deleting that actual task in the first place so that is all that we actually need to do so if we just go down to confirm down here just hit confirm then we know that we get an update there and that should work quite nicely for us so let's pop back into flutter flow let's try carrying out that scenario again and making sure this works for us we'll do that now so here we are then with our running application just as we were before you can see here that we've got two tasks here where none are complete so let's just click on that and you can see that represented here now of course I can then Mark this one as complete I can mark this one as complete if I go back you can see that is correctly now two of two now let's try now carrying out that deletion and see if we get a reduction then on this value which this should say one and then this should say one as well so let's just mark this let's go into the deletion option we can go back and there we go one of one so we know that we've just solved that particular problem we've got everything now nicely in step okay so we're making really good progress so far but yet we have another problem and let me demonstrate it to you okay so we go into the test goal here and this is all looking pretty good we've just demonstrated that we can you know delete tasks or we can do all of that all of that good stuff but the problem we've got of course is that we hear that we've got two of two which is correct the current status is Right we've got two kind of completed tasks the issue comes now because when we go to try updating one of these if I just hold this down here and then update the task here I'll just put some more content in here and hit update task great that's looking good if I go back oh we've got a problem okay so we've got now three this now set so we've got three completed tasks but actually we've only got two so what on Earth is is going on let's go back to Super Bass and let's make a slight correction to stop that from happening okay so then we're back in Super Bass so let's have a look at this particular problem and how we're going to solve it so on the left hand side here I've got database selected I've got functions and here you can see that we've got now our two functions in view we want to make a change to this particular function here so just move over to the right hand side and click the three dots and then click edit function and that should get us back into this familiar view okay so what is going on here then so we know that every time that we do an update with our tasks that this particular function is going to run okay so what's happening is is that we are regardless whether we're just setting the completion status to either be complete or incomplete which is true or false in our in our case then this is always going to run so of course when we then go to do an update of some text like the title or the description it's going to drop into this function and then it's going to carry out both of these particular tasks here now we may not be changing the completion the actual completion status when we do doing a title change or description but of course every time it's gonna go in here and it's gonna end up making a calling out to these particular updates so that's why we're going to continually see this mismatch in the the number of tasks complete so how do we stop that from happening well what we're going to do is we've got to tell this function to only perform an update when we are making a change to the actual complete um value with inside the actual record itself so we're just marking something as complete or incomplete and the way that we do that is we have to put another some additional syntax in here another condition to actually prevent this function from actually uh moving down into this area and we do that really simply okay so let's just put an and in here and then I'm going to say that the new record and Dot complete if it's not equal to the Old Dot complete then what it will mean is that it will completely then not drop into here so if we've made no change to the um the actual completion uh update we've not we've not made anything complete or incomplete then it will not drop with inside this part of the actual function which is exactly what we want to do so if we can now just confirm this that is now all updated for us and we can now go back into flutter flow and we can now test that out so here we are then back in Florida flow as you can see we're right back to where we were we've got two tasks completed and two tasks in total if I press on the goal itself let's now manipulate these okay so I'm just going to hold down the left Mouse button here I'm just going to make a change here let's just hit update and we should expect to still see two of two which we do so we no longer have got that problem which is great so it looks like everything is now correctly configured in the use of triggers with inside our application so let's move on to the next bit [Music] thank you [Music] so I've been receiving fantastic comments from everybody in terms of this series and I really do appreciate that there's one particular comment that actually stood out for me and that was around the actual progress of the particular goals so at the moment as you know if I just bring one of these up you can see here that we've got this slider that represents the actual progress of an actual goal and of course that's represented up in this particular progress bar here and this particular percentage but actually there's a great idea from the community that actually said well instead of actually using that why not actually calculate the percentage on the number of tasks that are being completed against the total number of tasks that you actually have got so that is a fantastic idea let's go and change the application to use that now okay so we need to make two changes with inside our application to now use the actual tasks as our indication for percentage now of course we've got the progress bar in the middle here and then we've also got the uh the kind of a text combination that we have here that kind of shows the equivalent value less of focus on changing the progress bar and we're going to make some changes to the code expression itself so if you just select the actual progress bar on the right hand side click on code expression and as you can see here with inside the code expression we're putting in the progress um this is the number that we're representing within inside our goal we're going to have to remove this and then make some changes so the first thing I'm going to do is hit the remove option and I'm going to add an argument okay we need to put two arguments in here one to carry the total number of tasks that we've actually got and of course the number of completed tasks that we've got so with inside this just choose the VAR on the top here let's make a change here and let's say number tasks like that and of course this is going to be an integer and that's all that we need to do and then in the value we need to set this of course we're just going to choose the the selector here and we're going to go to the goals row and we're going to scroll down here and we're going to say a number of tasks so just choose that then move down to the add argument on this particular one let's just choose this one here and we're just going to call this one completed tasks like that and then with inside here of course it's going to be an integer and we're just going to choose the selector here and we're going to go to our goals row and we're going to choose the number of completed tasks like that so that's our arguments now all set up we now just need to now make a change now to our actual expression so if you recall our expression at the moment it's taken in what was the progress and it was dividing it by 100 to give us our percentage but we need to make a change here so let's now delete this out and let's now get a little bit more technical now with our expression but do follow along um it might not be quite so simple to understand for people who aren't particularly familiar with coding but um hopefully it'd be quite self-explanatory once I tell you what's going on so the first thing that we're going to do is we're going to tie we're going to say the number of tasks okay is going to be not equal to zero okay so the first thing that we're going to check is that is are the number of tasks not equal to zero so a positive value okay and then what we're going to do is we'll put a little question mark here and this is basically going to say that if it's not equal to zero then carry out the next part of the expression okay so I'm just going to do an open a space and an Open Bracket and I'm going to say completed that's where I completed the tasks and we can divide them okay by the number of tasks okay and then I'm just going to close that off and then I'm going to times it by 1.0 okay so of course we know that like 0.1 will represent 10 0.2 represents 20 Etc right up to 1.0 which will represent 100 okay now of course if our number of tasks here all right are not uh are anything other than not equal to zero so um for example just zero itself then what we're going to do is we're going to return so I'll put a little a colon here and we're going to say naught Point naught so that will represent zero percent okay so just always bear that one in mind that we're saying here the number of tasks are not equals zero carry out this particular calculation of course um if it's zero itself then uh everything after the colon there is just return 0.0 and what's really the reason why that's really important that we do it like this is because of course we're trying to calculate we're trying to divide completed tasks by the number of tasks and of course if you try complete if you try dividing Zero by zero well you're not going to get a result so this is why we only carry out this particular part of the expression of course if if number of tasks are not equal to zero and of course but anything else we just return the zero so hopefully that is self-explanatory for you here so I'm just going to hit the check errors option and hopefully everything should look good for us and I think we're in a good state so we can just hit confirm now I'm pretty confident now if we actually run this application up that um the progress bar will now represent the actual number of tasks so uh let's give that let's give that a go now so here I am then in test mode Let's click on the actual test score itself so you can see here that we've got two tasks and we've got zero that have been completed and quite rightly here in this progress bar we're seeing that this is not filled at all so that feels about right for me here so click on the actual goal itself let's now complete one of the tasks let's go back and you'll see here that brilliant the progress bar moves up to about halfway and of course we know that this is going to stay zero percent because we haven't adjusted that yet if I just go back here let's just choose this here let's go back and we should see the progress bar move right across so everything is looking great for us let's now focus our attention on modifying this percentage here because it's slightly different to what we just introduced on the progress bar so let's go and do that now so back then in the UI Builder let's make a change then to this particular text that we got here the first thing that we're going to want to do is we're going to want to click on the actual progress bar itself move over to the code expression and let's just make a copy of it so we can copy it to the clipboard and then we can then place that back in and then make a few modifications so just say copy variable and then move over to the text that we got here move over to the text combination up to where it says progress let's hit the edit here and then what we're going to want to do is just click on the little three dots there and say paste variable that will replace everything that was there previously we don't need to retype any of this stuff which is really good but what we need to do is need to make a little slight change here now we know that the number of tasks are not equal to zero this is all absolutely fine we're still going to carry out this particular calculation but of course what we're trying to do here is instead of um the progress bar which requires you know 0.1 0.2 0.3 up to 1.0 in our case that we're going to want to say one percent two percent 10 20 Etc so we're going to want to change this so this ain't 1.0 let's just delete that off let's just say 100 okay so if we say check errors that should all be pretty good for us I think there we go no errors that's exactly what we're looking for but we need to make some additional modifications of course we need to do some formatting now because we don't want to see you know 33.33 or 66.66 coming out we're going to want to bring that down just to say 33 or 66 so we need to do some custom formatting okay so down here we just choose this and we're going to say number format on the formatting let's just scroll down here and when it says number of format options you can see here we've got a number of different types of formats available that we're actually looking for but none of these are really what we want I mean this is not quite what we want 23.4 we just wanted to be like 23 or something like that so we're going to go down to custom and we're going to specify the format itself so just choose this and then in the actual custom format we just need to add some additional detail in here okay so I'm going to do hash hash and xero okay now if you can see here you can just see down the bottom here that we're seeing a representation down here of what it would actually be so we'll say like one two three four point fifty six is going to be one two three five obviously it's rounding it up but this is kind of the number that we're looking for of course you know you can put point in here and you can start seeing that we're starting to see different representations of the actual output that we need so this for me um is pretty well much giving us everything we need and of course you want to have a look at these custom format formats just click on the little little icon here this will take you off then to a web page which will give you some examples of these type of formats and the sort of things that you can actually use in here but this is um all that we actually need um we're gonna we're gonna put on the end of it the little percentage you can just see it here we're tacking this on the end so this is good as everything that we need here I don't think we need to put a default variable in there but um maybe just for goods measure let's just put a zero in there and say confirm there we go that's everything that we need hit confirm it's what again and hopefully that expression now should work for us so let's now pop back into the test mode and let's see if this now works for us so here we are running the application you can see almost instantly now I've done a Reload here you can see we've got 100 this written there but let's just test this let's just click on the actual goals here let's just take one of these off hit back and you see that it says 50 and just to prove that it's all looking good at zero percent let's go down there and you can see that it's zero percent so you can see now that by making this particular change the application it's actually more useful um so what we now need to do is we now need to go away and we want to probably remove now that that progress indicator that we've actually got to represent the goal so let's quickly go back to the UI and let's just remove that out and let us get us back to using this um as the as the final indication of um of our progress with our actual goals let's go and do that now so here we are then back in Super Bass and I've clicked on the actual table editor over here and I've gone to goals and as you can see here this is the column that we know we no longer need anymore so we're going to get rid of it so it's quite simple to do that and with inside here you can go down to the actual database section just here on the left hand side choose that you've got your tables come up and of course here are the two tables that we've created in previous part of the series so here's the goals one let's hit the little edit option just up here and we can scroll down here and we can actually just strike off this particular progress row here so just choose that choose the X and it's gone quite simple as that hit save and everything should be updated for us successfully but our job is not done we may have just got rid of the actual column of inside Super Bass but we need to go back to flutter flow now and we need to update our project to no longer reference that particular column so let's go back to flutter flow and do that now see we are back in Florida flow on the home page and of course everything is looking uh pretty good for us up there of course but if we tried running this application now it would fail miserably on us because we've just gone and removed the column from the database so when of course whenever you manipulate the database you know you add columns or you remove columns or anything like that you do need to go back into flutter flow and you do need to update the schemas okay so as soon as we do that of course then our project's going to have lots of errors that we can go and correct so let's move over to the actual little here on the left hand side here the settings let's move down to the Super Bass integration that we've got here now I'm going to say get schema here choose get schema and it's going to overwrite it say yes and with inside our actual goals you can see that the progress field has now disappeared but of course up the top right here you can see that we've now got some issues that we now need now now need to deal with but of course we were expecting that so let's move now over to the actual widget tree itself and let's now start correcting these problems now quite they're going to be in with inside our actual goal components here that we need to adjust but you can just select this here you can see that we've got some some particular issues so we can just click on these and it takes us right into where we have our first problem of course is taking me straight into one of the screens where we're trying to insert the row and you can see here here it says the field no longer exists so just hit the remove option and that should be good we've got the little tick up here which says we've no longer got any issues in this particular action itself so just hit uh close there let's now choose the next one let's just choose this again and you can see we're right back in here as well and we can just hit the little remove here and we know that we're all good hit close and we've got one more left let's just have a look here and it's it's talking about a property so of course this particular slider is no longer needed anymore so we can just select this we can hit delete and that's gone and you can see we've got a little bit of a visual issue here So within the actual goal status here we can just put some padding on here I think it was about 20 I think they were just brought it down a little bit more than 16. so that's pretty well much our our project sorted um we just need to make sure that with inside the update uh the actual create goal component we've also got to remove the slide from here as well we no longer need this anymore so just choose that let's go up to the actual goal status here let's just choose 20 and that moves it down so I'm pretty confident if we fire up the application now everything should be good so I'm going to give that a quick check to make sure we're okay so here we are in test mode um I think everything is looking pretty good for us here no errors or anything like that let's just click on the actual task itself everything seems to be working as it does let's just try to update the actual progress itself so let's let's change uh let's just just take the test goal to and let's say not started for example say update goal everything looks like is working as expected and obviously we've now no longer got that that slider that we now need to manipulate you can see probably got a bit of a gap here we probably need to sort that out at some stage but really that's just a case of just changing the the size of the actual reference on the actual component on the bottom the bar that actually loads up other than that everything's looking in good shape um so we can move on to the next one so let's have a look at the changes that we're going to make to our application if I hold my left Mouse button down on here you can see here that we no longer have a status drop down which we can set completed in progress or not started that's completely gone we're going to use the Paris Super Bass to actually manage the updating of that status with inside each of our goals okay and it's all going to be based on the completion of the actual task so if I click on this particular goal here if I mark this one as a complete and go back you can see here that the progress indicator quite rightly says 33 out of three but you can see now that we've got the kind of the the Amber band in this now appeared which means that this goal is in progress of course I can click on this I can then carry on I can Mark these as all complete I can go back and you can see that now I'm green so behind the scenes with inside the database row we've actually marked the goal as now completed and of course we can go back here I can take these off go back and we're back into Amber status so of course they're the changes that we're going to make to our application in this particular episode so let's do that now so here we are then back in Super Bass okay and I'm on the home page of my database project let's just have a look at the actual table itself so move over to the table let's go to goals and let's explain a little bit about what we're going to do okay so what we're going to do is we're going to manipulate the value with inside this particular uh column called status okay so we're going to set this depending on the values that we've actually got over here okay we're going to use again another Super Bass trigger to make that happen so let's move over and create the function first and once we've created the function we then can create the actual trigger to carry out the update to the status column so let's go and do that now so firstly let's click on the database option here on the left hand side let's go to functions and as you can see these are the two functions that we created previously in the series let's go up to create a new function just choose that and this is where we need to now put the title in so let's call this one update goal completed like that keep it the schema as public and then the return type is going to be a trigger and then down here of course in the definition this is where we now need to start writing out exactly what's going to happen so what I'll do is I'll type this out as I'm going along and I'll try to explain what it's actually doing so as we know already with a function we need to give it a beginning and an end so just my beginning ends I'm just going to tab over here and the first thing that we're going to do is we're going to do an an if okay so we need to check for something okay so if the new record okay that is being kind of operating like that that's being created at that particular Point okay the number of underscore tasks complete equals zero okay so no tasks at all okay we need to then and then just down here we then need to do a new DOT status is then colon and then equal to so we're going to use that expression there to actually set the actual value of the actual status column itself so we're just going to say is not oh not started just like that so really really simple if we have no tasks that are completed we just want to then set the status as not started okay but of course we're going to want to do more than that okay so just going to press character turn down here but we're going to also going to do an else an Els and then if and then of course we now need to write this out again so the new record itself the number of tasks complete is equal to the new record again to the number of tasks okay and then we just want to then say then and then we're going to set the status down here to say new DOT status and then we're going to set that is equal to then and we're going to say completed okay so of course what we're saying here is if we got a match there between the number of tasks that have been completed to the total number of tasks that we've actually got then it's going to be completed so we've got three completed three that we've actually set so therefore it's completed okay so that's good there's also another condition that we have to set as well so just another character turn here we're going to say else if again and then Open Bracket new dots and again here we'll say number of tasks complete and we're going to say is not equal to okay the new record again and we're going to say the number of tasks and of course we're then going to say then and we're going to just hit enter down there just tab across new DOT status is then colon equal to and you can probably guess what this is going to be okay so the number of times number of tasks are not equal to the number of tasks completed so they don't match up we're going to need to say that it's in progress okay so we're just going to say in progress as our spell it right as our status okay and then we're just going to go down here and this is where we need to do an end if okay we'll do a semicolon and then we're going to say return new and then a semicolon there is where again and we've also got our end down here so let's just tidy that up a little bit let's just move up here let's just move that little space out here so there we go then so we're just basically saying as a recap then the new record that we got coming in the number of tasks complete is zero we're going to say it's not started if the new record coming in is the number of tasks complete is equal to the total number of tasks we've actually got then we mark it as completed otherwise if the number of tasks have completed are not equal to number tasks so there's no match there whatsoever then we know that we must be in progress itself and then what we do is down here is we then just return the new record back so that's pretty well much it that's all we need to do in our actual definition and we just need to go down there now and just hit the confirm and hopefully fingers cross uh oh we've got a problem here um let's have a look here we must have made a little typo let's have a little look oh yeah I've missed off the semicolon so we just need to make sure that we put semicolons at the end of each of those there as well hit confirm well done if you uh spotted that oh and we just got a little typo there as well so just hit the confirm I said brilliant our goal has been uh our completed trigger function has now been created for us let's just clear those out the way so next up we now need to create the actual trigger ourselves so let's move over to the triggers option and you can see here these are the two that we got here and we just need to create a new trigger so just choose a create new trigger let's put the name in there okay and it's called update goal completed now the table that we're going to want to make changes to here is going to be the actual goals table itself so just choose goals from the list and then down here the um the actual event that we need to look for is going to be the actual update okay so whenever there's an update to this particular row this is when that trigger is going to fire itself so just click on the update now something slightly different here on this particular one we don't want to actually choose an after it's going to be before so what we're going to do is before the actual database change is actually committed okay before the actual row change has been committed to the actual database we're going to want to manipulate it before it is actually saved okay so that's why on the trigger type we're going to choose beef for the event okay because if if in this situation if we did it afterwards we could get into Some Loops because what we'll be doing is whenever we make a change to the update to the actual goal itself we could then be triggering a continuous cycle of updates which we don't want to do we want to do it before we actually persist it to the actual database itself so that's really really important so so just make sure you choose before the event and then down here the it's not going to be a statement here it's going to be a row so we're going to be handing this at row level and then of course down here we need to actually choose then the function that we're going to want to trigger so of course we're just going to choose the update goal completed and then that's all that we need to do so we just hit confirm and then you can see here that we've now got the uh the actual trigger created itself called update goal completed it's going to operate on the goals table it's going to call this particular function and it's going to be before that we actually do the update so that's really really important okay so that's pretty well much it we can now go back into flutterflow we can actually go back into the into the test and let's actually see this actually working in action so here we go then fired up the test app we've got one goal in here which has two uncompleted tasks okay so click on that you can see here that we've got task one if I just select that hopefully I'll see the Amber yes I do I see the ambus we know our status is set to in progress I'll just choose that choose that task there we've got them all completed and we've got the green so everything is looking like it's working perfectly for us which is absolutely fantastic so that is the power triggers please do consider using them as one option to pass some of the the heavy work back to the server itself let the server do all the Talking when it comes to making these type of checks and updating your database behind the scenes as well so next up we now need to then focus on modifying our application we need to start removing out some of this stuff we don't need any of this anymore we can remove that from our app so let's go and quickly do that now so here we are then back in flutter flow on the widget tree let's have a look here on the left hand side we want to remove them from the create goals we don't need the actual progress itself so let's just delete that so that's gone we're just going to put a uh some padding here just on that there so we just can move that down a little bit the container on the top there we're going to want to probably reduce its size I currently set to 500. let's try 380 okay that's just about right here so that's looking good for us and then on the we need to do the same thing as well on the update in fact with a little error up here let's sort this one out first here let's just go into here select the actual error itself and we're going to want to remove the status okay we're no longer going to be setting that so let's just hit remove and then the error should all go away for us which is great let's move over to the update goal let's choose the status let's just delete that and then again on this a goal description let's just put a bottom padding here of 20 and on the container itself just scroll all up here let's just select that and we can then also choose 380 there so it just brings a little bit smaller so that's good so that's pretty well much set for us oh we've got the letter up here we've got to remove that as well of course go back in here let's just remove the status from there so that's gone let's close that we should have our tick there that's again yo so now what we need to do is we need to just make sure that with inside our home page itself that we actually make sure we adjust the height that we're actually opening up that Bottom bar so let's just choose the uh the container here let's just scroll up onto the goals container that we've got here and let's go to the actions open up the action flow editor and on the long press we're going to want to change the bottom sheet okay so just select that and we're going to choose the height and we're just going to say a 380 because that's the size that we've got so just close that and we're also going to want to do the same here on the Fab button just select that go to the actions go to the action flow editor here and then just take and 500 out of there and just type in 380 and that should be good so let's have a quick little test in the in the actual test mode here this is an instant reload so there we go let's create a new goal so that's great so there we go nice height now that we've got the the progress um has now disappeared so test goal three just put some rubbish in there hit create okay so just go to the goal there and I've just spotted that actually it hasn't actually appeared okay so I think I know what the problem is I think what's happening is is we're not actually doing a refresh so let's go and sort that out now let's go back into flutter flow let's go to the actual uh we're actually calling the create which is just here so this is the floating action button here go back to action flow editor and you can see here we just got one uh we've actually just got this uh single call to the bottom sheet okay we need to actually do a refresh behind this so just hit the little plus had an action and we just need to do a search for refresh here refresh database request and we want to choose the list view so just choose that and that should be all that we need to do if I go back to our application just to an instant reload we'll see that goal that will probably appear now we'll just quickly try creating another one just to make sure that that goal does appear now you may have noticed that actually during the actual series actually I haven't actually spotted that myself that that was actually a problem so well done if you've corrected your code to sort that one out let's just hit the little plus here let's just create a test goal four just put some rubbish in here hit create goal and there we go we've got the refresh that's now happening which is perfect So within Tesco 4 let's just check that let's just crack a quick uh task here test task one just hit the button there to create and you can see there if I go back everything is looking pretty good if I just Mark that one it's completed and go back then we've got the full completion this set on the status so everything is working perfectly with inside our application so let's move on to the next bit [Music] thank you so here we are back in the final application I just wanted to do some corrections in this particular section on the actual animation that actually appears here because actually at the moment with inside the actual application we don't actually have any animations that's applied to the actual goal if I click on here and then go back you can see that we've got this little slide effect that's happening on the actual gold container so what's kind of happening is we've got the stack this animating and we've actually got the container on top that's actually animating itself as well so let's go and add those into the application now so here we are then back in the widget tree I'm on the home page let's first add the animation to the actual stack so the actual stack is what is gonna contain the whole of our goal so this is just going to slide the stack down just very very slightly okay so let's select the stack on the left hand side so if you just choose that with inside the list view move over to the animations here and we're going to want to do an on-page load hit the add animation and we're going to want to do a slide now what we need to do here is we're going to set the duration to be 200 milliseconds so really just a fraction of a second there that should be super fast for us we're going to put no delay in so we're going to want it to happen straight away and then we're going to want to also then move down to the initial position and just put minus five here okay so that's going to move this down by 5 pixels from the position that it starts with so which is zero and it's minus five if I just do a little preview here you can just see it sort of sort of drops downwards when I hit the a preview so that's the overall stack we now need to animate the actual goals container now with inside now with the goals container we're going to move this down very very slightly because we want it to then reveal the actual priority of the actual container status that's just behind Okay so just choose goals container move over to the actual animation choose add animation once again it's going to be a slide and this time we're just going to want to choose the actual duration here of 200 once more okay so we know that we got a 200 but what we're going to do is we're actually going to delay by 200 so we're just going to give a chance for this stack animation to play out before we actually then play out the actual slides it's going to look like we've got that little bit of a sliding effect so this stack gets animated first and then 200 milliseconds this particular animation then kicks in for the actual container the actual goals container itself so of course we're going to want to do the final position of two so we're just going to bring this down by sort of two pixels if I Now preview you might not see it very well here but you can just see that we've got a bit of a a two container that that's being shown but let's move this now back into the actual uh test mode and let's try this out and see what it looks like so here we are then in the test mode you can see here that actually the our border is looking a little bit thicker than what we need it to if I just click into one of these and then go back you can see that we're getting slide effect but it's looking a little bit thick and the reason why that is the case is because we've still got some padding on the actual container itself and what on this particular container which we need to reduce and actually remove set it back to zero so let's move back to flutter flow let's sort that now so let's move over to the goals container let's move over to the actual properties and you can see here they've got a panning of two so it's just bringing it down just a little bit too far we don't need that now so I've got the animation that's going to do that for us okay so just removing that let's go back to the actual test mode Let's do a quick instant reload there we go so we've now got a much much thinner line now so if I just click back here move back you can see now just slowly reveals it which looks um which looks really really nice actually inside our UI but one little crochet we now need to make of course is that our our task animation is is moving in the opposite direction so just for completeness let's reverse our animation and let's make this also go down as well so let's go and quickly do that so back into the Witcher 3 Let's choose the actual task page itself let's click on the actual animation so we're going to look for it here we know that we've got a little symbol here this is not on page so just choose the actual container itself move over to the animations let's just press on the little arrow there to just kind of to remove it out for us we're now going to want to now swap these over Okay so we've got the initial position is five but I actually want to bring the initial position to zero and the final position is going to be five itself let's just preview that and you can see here now that we're just sliding down now which will give us the same so let's have a quick look now the test mode see we are then back in test mode Let's choose Tesco here I've got a couple of tasks here and as you can see they're just sliding down from the top there just gives it a little bit more consistency than with the actual other screen itself so that's um pretty well much most of our animations that we need to perfect with inside our application so next up since recording one of the original videos from many many episodes ago we use conditional visibility to display the kind of the the check here and also as well the kind of the strikethrough of the text we were doing a conditional visibility check or whether the actual task was complete or not well since that time the flutter flow team have introduced the conditional Builder widget and I think it's well worth now replacing the conditional visibility with the conditional Builder widget in our own application and of course it'd be well worth you into also introducing that into your own applications in the future so let's go back into flutterflow and let's go and do that now so if you're new to the conditional a builder widget what the idea of it is that it allows you to show and hide a number of different widgets based on a particular condition or not so in our case on our goals task we know that we have a complete Aviva true or false and what we need to do is we can replace our conditional visibility that we've actually added here to these a particular sections here and we're going to actually now group those now into using the conditional Builder widget which will make it just much more nicer to use and of course the great thing about the conditional Builder widget is you can have many many different conditions and of course in our in our application here we've only actually got two or whether something is complete or not but of course if you're trying to check for multiple conditions and you want to display and hide something then the conditional Builder widget is a fantastic addition to your toolkit so let's now go and make that change now so as you can see here we've got the row itself we've got the icon completed not complete and then we've got this other row which encapsulates the uh either the title that um that's not complete um or the actual text which is complete here so now let's now group these now we're using the conditional Builder widgets so we're in the row we're going to keep the row there but what we're going to do is we're going to hit the little plus and we're going to do a search for conditional and just choose the conditional Builder widget here and you'll see that it's just been dropped down here so that's just going to move this up to here let's drop that in there so you can see it's the first one in the row now you're not going to visually see too much here but we're going to sort of drag and drop various bits actually into this conditional Builder widget from what we've already got here so let's now start off with then the actual conditional Builder so we've got this condition here is if something is true then we're going to display some widgets in here if it's not if anything else then we're going to display which is here we this little I is representing that everything that we do with inside the actual UI now is going to be the um the widgets that we're going to be actually editing but of course with it with the conditional Builder selected we can move over to the right hand side here we can actually then click on this little option here where it says show UI Builder and it means any widgets that I now apply will actually will be with inside this actual else if I just drop that down here will actually be just here okay so I'm just toggle which one that you want on we're going to first start with the first one so just choose a show a UI Builder so the first switch I'm going to add in here will be a row in itself okay so just hit the little plus option here on here and just choose the row so just select the row and then with inside this particular row this condition is going to be um for everything that is actually going to be complete so in our case it's going to show you the little tick and it's going to show the strike through tie to our case we need to now grab those widgets and then drag that with into the actual row itself so you can see the icon complete that's quite straightforward let's just drag that into the actual row so there it is and then we also now need to find the text so it's going to be that one there let's now drag that into the row as as well so just drop that in there and you can see that we've now got those two together and then within the else if we go up to the conditional Builder let's choose the show UI Builder option here and let's also do the same here as well so let's just choose the row so if I just hit the little here and just choose a row and then inside here the first one we're going to do is drag the the icon into the row so you can see it's now there and then we're going to move also as well the text there just just underneath now we can actually now delete this row we're not actually interested in this row so let's let's just just delete that out but we don't need that for now we'll sort out the um the other details in just a second the icon is the the trashcan icon has moved over but we'll saw that in just a moment so let's now move up to this first this first condition here so just choose the conditional Builder and let's work on this particular condition itself so let's just choose that and you can see here that we know that we're actually need to choose an if condition okay so just choose the condition and we're going to say a single condition so we're going to want to check to say is this actual task complete or not okay so if you just choose this and then actually go down to the task row and then choose and just scroll down to complete we're going to say is equal to and then just move that down here and say specific value and then say true so we know that all the widgets that's going to be displayed um with inside this block here is going to be of the true condition everything else is just going to be down into this particular row so a little tip for you um something that I found as I've been using um sort of flow more and I've been using the conditional Builder more it's this this this here is the first widget that will actually get shown with inside each of those conditions and the Habit that I've now started to adopt is I've started to actually name the actual widgets that gets displayed here so I can see at a glance if you're building up lots and lots of these conditions by naming the first widget here it's just easier to see at a glance um it's kind of um you know the actual widget that's going to be displayed and you just simply just need to go over to the row here so I'm just going to just change this to say um complete row just like that and then down here I'm just going to go down to this particular one here and I'm just going edit that and I'm going to say not complete row just like that and you can see now if I go back to the conditional Builder you can just see at the glance I can see the name of the actual widget that's going to get displayed so just just a handy thing to do there so just click on the show UI Builder we're going to go now back to the actual complete condition you can see here that we've got a little bit of a problem with inside the UI so we just need for some padding in there as well things a little bit sort of tight so let's just put an 8 in there let's just move that over and we're going to want to go back to the conditional Builder and we're going to want to say showing UI Builder this one here and then just down onto this particular icon here we just want to do the same thing as well let's just put an 8 on the right padding so that's looking good for us now so the final thing that we're going to do is we're going to want to move the actual uh so the trash icon to the right hand side but just simply need to go to this particular row here and we just need to actually just choose this option here space between so just choose that and you'll find that actually pushes everything across so the space is right in between this here that should be good enough for us so that's pretty well much everything that we actually need um let's there's oh there's just one more thing we need to do actually we need to also remove the conditional visibilities that's actually being applied here you can see the little the little eye icon here that's representing all of the individual um kind of visibility so if you just choose this bit so I've already got to conditional Builder here sorry let me just say show in UI build let's just choose the first one go to Icon complete we can now turn all of these off because we don't need to handle these is actually individually so let's just choose those off let's go back to the conditional Builder let's say show in UI Builder and then we can use we can go down to these ones here and we can also turn those off as well so you can see here it keeps it nice and tidy so there we go so that's the conditional Builder really really a fantastic addition I really recommend the user certainly if you're dealing with lots and lots of different editions you want to display lots of different widgets depending on certain conditions with inside your application then the conditional Builder widget is going to be your friend so let's now fire this up just to make sure that everything is working for us so we are back in test mode Let's choose this particular one here you can see that the conditional Builder must be working okay in in this situation because you can see here that we've actually got everything that looks like it's being displayed correctly based on the complete condition so and that's perfect let's move on to the next bit so that's it if you've got this fine you've been watching right the way through the series well done that you've come to the end of this particular version of the application of course if you would like me to improve this application if you'd like me to add more features into it please do leave those comments and I will be more than happy to follow up on a future video and of course I've done that on other videos as well on my channel itself please do like this video please do subscribe to my channel if you love learning flutter flow and of course I'll be covering more Super Bass in the future as well because it is just a fantastic platform for you to build your no code applications on top of it's awesome I love it and there'll be so much more coming in the future please do subscribe to the channel and I look forward to seeing you in the next video or the next series thanks for watching hello [Music]

Channel: The Digital Pro's NoCode Academy

Views: 36,250

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, supabase tutorial, supabase rls, supabase auth, supabase flutterflow

Id: t-CH0A5OVpI

Length: 304min 17sec (18257 seconds)

Published: Wed Sep 06 2023