#FlutterFlow Crashcourse 2024 - SE02 - Final App Walkthrough

hey everybody hopefully you are doing really well I'm going to start this particular episode in a slightly different way to how I've done anything previously with a bit of an announcement so if you've been a follower of my particular Channel you would have no doubt seen my 20124 crash course season 1 which if I'm honest with you really really pleased with the uh uh kind of the feedback and uh the engagement in that particular course um it felt like um it was the right balance cerly for more sort of foundation more sort of sort of

sort newcomers to flood a flow to kind of Kickstart their Learning Journey and um at the end of that particular course I thought brilliant there's going to be a good point in time where I'm going to want to create a season two now that's what I did in 2024 certainly the mid part of 2024 I thought okay let's now create a season two let's kind of maybe sort of build on the skills that was learned in that particular season and with maybe just building a mobile application which is the one that you see on screen

at the moment but what I wanted to do is I wanted to keep this particular application pretty simple but certainly provid um some good uh sort of knowledge in terms of how you build these like independent kind of little flut oflow applications this was kind of using like a local database it was doing all your usual create read update and delete operations now as I moved through that particular series I just noticed that the user engagement of that particular series just wasn't there it it was like like the the community wasn't really perhaps enjoying the

content it didn't really sort of hit all of the the right buttons in terms of people kind of really sort of enjoying that particular content now that could be for a number of different reasons and we're all human at the end of the day sometimes that you you set out on a particular route and it doesn't kind of play out how you would expect and that's fine um but I think it's got me to a decision point where I'm kind of thinking do I now invest more and more time in a particular course which isn't

just connecting with with people and this would take me up to like 30 episodes so it's quite a lot of investment of time when I could be spending that time instead on more useful and more engaging content on my particular Channel a lot of kind of what you perhaps had seen previously if you've been a kind of a long long-term sort of follower of my content so that's the kind of the decision that I've come to is to kind of finish the 20124 season 1 sorry Season 2 course um sort of now but what I

wanted to do I wanted to take this opportunity to kind of um sort of hand over the final project for you to explore on your own accord and I'm going to use this time now to kind of walk through that project as a general hopefully to provide a little bit more value in terms of kind of how the application was constructed and then you can then explore at your own Leisure and kind of hopefully pick out those bits that you can then apply in your own particular projects so that's what we're going to do that

and feel free to of course to provide comments or if you're sort of not understanding anything at all in this particular project please do leave the comments in the description um and I'm more than happy to then sort of cover those with you um when they when they pop up or of course pop over to the digital Pros no code academy which is the link is on the screen there and I can give you more sort of direct support on your Learning Journey so without further Ado let's get into the video and let's now walk

through this particular [Music] project okay okay then let's take a nice steady walk through this particular project now if you had been following this particular series we kind of got up to the point where we were kind of displaying pretty well much most of what we need on this particular kind of UI now this is the very this is the entry point to this particular application this is the homepage where as you saw in the little demo that was running just a moment ago this is pretty well much where all of the goals will be

displayed and of course we can then navigate away to a second page which is of course our task page and that is represented here on the left hand side we got the homepage and we've got the task page now in order to kind of uh set this project up we're going to need an SQ like database now an SQ like database is defined outside of this particular project using a different tool and I'm just going to show you that tool now and this is DB browser for SQ light you can see here I got like

a little DB farthest down here now I'm going to make that available in this particular uh episode here so just make sure that you kind of can download that as well and that will be then your kind of your database that you can then upload with inside your flut oflow project and inside this particular database we've got our goals and we got our tasks so it's quite straightforward we're not really doing anything sort of clever in this particular database but of course the key thing to know here that we we got all of our goals

here which are unique goals and that's represented here by an ID so that's going to kind of get a 1 2 3 4 ID so it's going to be sequential and of course we're going to then want to associate any task that we create with that particular goal and here it's just represented here by the goal ID so of course our tasks are also going to be sequential with 1 two 3 four like that but of course the goal ID is going to be really important because because we can have more than one task for

every goal so if this has got a goal ID of one we're expect to see that our task is going to be 1 2 3 4 but the goal ID will remain one for the task to be associated with the goals so this is really quite straightforward you can change this particular database as you see fit of course if you would like this particular application you want to do more with it um but that's just a little bit of a quick overview of the actual database itself let's now head back over to flood oflow and

let's now talk a little bit of more about the actual way that we uh are managing SQL light with inside flood oflow itself and then we'll talk a little bit more about the kind of the homepage okay so once you have made changes to your database using the DB browser for SQ light how do you then get that into your flut oflow project well very straightforward here on the left hand side we've got the Cog you select that you move down to sq light and then of course you can simply upload the database to replace

the one that is bundled and packaged with your particular project and then of course any column changes that you've made will then be instantly available so that they can be referenced with inside your particular project now on the left hand side this is where kind of all the database queries are so you can see in this particular project I have four different read queries it's exactly as it sounds they are purely just reading data and then of course youve got update queries which is pretty well much everything else so that's your your create your insert

and your delete operations and and as you can see in this particular project there is a number of different types of queries that have been created to support the key functionality of this application so that's pretty well much SQ light settings uh that's all the you need to know I think for the database side let's now head over back to the homepage and let's look a little bit more on the user interface so this particular application has two pages we have the homepage which is the first one that gets displayed when the user fires up

the application and then we have the task page themselves which is going to kind of be a associated with the goal when the user uh sort of presses on the relevant goal with inside the homepage more on that in just a bit let's talk a little bit about the homepage let's just expand this out here so we can kind of go a little bit more on screen so you can see here very quite straight forward with the homepage here that we the kind of the main actions that are happening are with inside the goals list

view now of course this is dynamic data so we're going to pull this from the database and here we have a list View kind of supports that if I just open that up here you can see I've got the goals list you can see here this has got a backend query associated with it that's what's represented by this little icon now that is then available up here on the top right you got the backend query option here then I've got this SQ like query called get goals that's one of the read queries that I was

mentioning about just a moment if I just edit that of course you can set up various type of variables here I've got like an aride VAR variable here that's be just a value that I'm passing in to say um can you please return me back all of the either archived or non archived uh kind of uh goals that I have in here so of course that's all kind of linked into the little uh kind of filter uh sort of dialogue that kind of will then be displayed but we'll cover that very very shortly so inside

this of course you've got of course you've got some containers here this one is we got this get gold container now this has got some actions set against it because of course of course when I hold my left Mouse button down then of course I'm going to want to then display the details in order for me to perform an update of that particular goal and of course here very much these are just all the your standard kind of flut oflow widgets that's going to allow us to kind of construct the UI this in this particular

area here now there's nothing too crazy going on here we've got some kind of some some uh sort of text widgets here that's kind of displaying values from the database and of course these are all linked here with inside the text option just choose the selector you can see I've got the S get SQ light here that's referencing the title field with inside our database row and here I've got gold title here this is really just a uh kind of a visual representation on the UI here so of course if I didn't have this in

here then it won't look particularly kind of meaningful this up here it might just sort of say title or something like that but here I've just called it gold title and of course got gold description Etc so that's just a kind of a more of a a visual thing for the UI so of course more of the same here with description and of course other values that's being displayed on the user interface I've got a code expression that's happening here so on this progress text here I got a a text combination that's up here just

select that and you can see here that my first one is the uh kind of the code expression where I'm kind of working out kind of the uh how many of the completed tasks have I done against the number of tasks that are available with inside that particular row and here I'm just kind of doing this little bit of a calculation here to kind of display the relevant values of uh which is a percentage indicator with inside the user interface and of course I'm also doing a code expression on the uh the actual progress bar

itself I need to work out again how many that I've actually completed against the number that are available and again it's a very very similar code expression just a slight variance there but have a look at this and this is then providing the progress bar with it the value that it needs in order to show the progress indicator now the uh this one is really just mapped on to the uh the values with inside the database of course on how many tasks have been completed uh of course there is a particular query in this project

that is making that happen there and you'll see that with inside the actual tasks page itself when you are uh performing actions against a particular task when one is created for example or one is is complete then I'm going to need to uh sort of update the counters that are associated with the actual goal with inside the table itself I I'll pinpoint that in just a moment and then here we got um a uh I think it's pointing out here to then um another Uh custom function in fact there's only one custom function in this

particular project where we're kind of just doing a little bit of date formatting based on a created at uh value which is stored with inside our databases this is kind of like an integer representation of the date and I'm just converting that back to a date and then I'm formatting it with inside the UI itself if I just cancel that and if I just move over to the custom functions you can just he here it is here it's just a simple simple oneliner that is kind of passing in this uh integer this input timestamp uh

sort of value and of course what it's doing is it's just returning back a date and time from the values that I'm passing it's doing a little bit of a convert Unix time stamp in seconds to dated time so just a little bit of custom code there that's making that happen so next up on this particular page we have the little plus Fab button here if I just select the action flow editor here you can see that all I'm doing is I'm just displaying the bottom sheet which is the create goal component which we'll have

a look at just a moment that's all that's doing is is simply displaying it with inside the UI if I just close that down if I just now move back to the project here and I can show you these particular components so here is the create go component so here it is um again this is a really really simple component um in terms of what it's doing because all it's really doing is is collecting values from the user and then saving them as a row with inside our database but there's some few little uh kind

of more value add features to this particular kind of component itself and one of them is the form uh sort of validator kind of widget now this is uh quite important one and I think that if you are using or building forms with inside your applications um I highly encourage you to wrap this widget around your particular form because no doubt you're going to want to validate the user's input with inside your application and that is just done down here on the right hand side the form uh sort of widget here will actually pick up

the text field Widgets or other kind of form widgets here that is part of that form and allow you to kind of set up some properties such as like the minimum amount of characters that's accepted or the maximum and of course there's some validators that you can apply as well I've got none in this particular application but of course if I was keying in an email address for example I might want my form to uh validate that the email address that's been entered is correct and you would do that by selecting the text validator and

choosing email there so the great thing about it is once that you have added that widget to your UI of course how do you then trigger the form validation when it's really straightforward because you can do that with inside the create goal button if I just open up the action flow editor you can see that's the first action that I'm calling here it's a validate form here I'm selecting the form and of course what I can do now is I can then make sure that in order for these actions to then continue of course I'm

going to then want to make sure that my form validation has actually passed itself and you can see here that I can actually terminate if the validation fails if I take that off that means that of course the form regardless whether it validates or not will then carry out the following actions but of course here I want to validate it um I want to make sure I validate my form before I then carry on these next actions so of course in this application quite simply all I'm going to want to do is take those values

from my text field widgets and of course my dropdown as well that I got on the page and I'm going to want to then collect those values and then save that insert that as a new row inside my database and that's again straightforward you just make this backhand call SQ light action and then of course I'm going to I'm going to select the query that I got you can see I quite a few here but the insert goal is the one that I need and then of course I'm then just going to point each of

the uh the values here that I need to persist in my database of course with the actual uh the actual string of the actual uh the widget value the text field widget on the screen so if I just edit this here you can see I can go into the widget State and I can select which particular text field that is going to represent the title I can do that here by using the widget state so I'll just close that down there and of course I'm doing the same for description and of course I'm just doing

a datetime uh conversion here um just have a little explore of that you'll see how that's done and status then I'm just going to set the status of the the widget state of the dropdown again I'm just going to go down here and you can see the widget straight here I've got the goal status drop down that's going to pull out the selected value and of course it's going to then apply that into that particular column so it's as simple as that and then the final one of course is then going to dismiss that particular

kind of Bottom bar kind of dialogue that gets displayed on the user interface so I'm just going to close that down so that is pretty well much um it's it it working I've created some other uh reusable components here like this this button uh Bottom bar top uh kind of divider component um again I'm promoting good kind of reusability to a general uh to a General Degree in this particular application and that's what that Bottom bar top divider is doing it's allowing me to use that again across my project and that means I can just

come into one place here make a change and that will then be applied across my application and what I've also done is I've created one called Bottom bar heading component again I'm going to want to reuse this CU this is going to be the same for all of the kind of the bottom bars that get displayed and here I've got a uh property here of my component called title and here I've just given it a name of create goal and of course that's going to be different throughout this particular project so that is pretty well

much it for the create goal component that's going to allow us to then insert those particular values into our database when the user has done that and they dismiss the dialogue box then I'm going to get an Upstate uh kind of like an Upstate refresh which is then I'm going to then see the new goal that's then going to get to displayed with inside the user interface so I've just walked through there a very very simple way of inserting records into my database and then displaying those with inside the list view for then uh sort

of presentation with inside the UI okay so in this particular sample application let's talk about navigating from one page to the other but one really important part of course is how do we carry parameters from one page to the other for then use on the other page so in the context of this application we're going to want to keep track of the goal that has been uh selected with inside the homepage and we're going to want to use the ID of that particular goal on the task page itself because we're going to want to kind

of pass that around we're going to want to associate any more tasks with that particular goal but of course we need to tell that page what goal we have selected so for example I'll click on this one here it will navigate to the task page and of course I've passed over the goal ID and I've kind of it's now available to me here and of course when I then add a task in at this point I've Associated I know what the goal is that I've got I know the goal ID ready for me to then

uh kind of save this particular task and I can associate that goal ID with the task let's have a look at that in flood oflow let's see what that looks like so on the homepage the actual we can select here we can see we've got a container here that you can see it's got an it's got an action it's got two actions associated with it if I open up this you'll see here now we got like an onong press and we got an ontap now the onong Press will show The Bottom bar and it will

show the update of that particular goal but of course we're just tapping we're going to want to move over to that task page now what I can do is I've got this navigate action and you can see here that it's it's it's got task page that's associated with particular action because it's selected here and you can see here that what I've done is I've got a parameter called goal ID already set on this particular page and that allows me to pass in that goal ID you can see that it's just represented just here and if

I select that you can see that I'm pulling it I'm pulling this from the particular row that we've got I'm passing in that particular ID itself so if this was the first record it would be a value of one that's what I would have here like that and of course I'm going to pass that number one to then the task page itself so then on the task page how do we then see that what what do we see Within inside flood flow so if I close there and I move over to the task page you

can see here I've got this page parameter of goal ID this is the one that you just saw just a moment ago so I'm passing that value over to this particular page this particular page will then uh be then sort of executed and it's in View and then I've got something very available to me right at the very very beginning now what do I do here so if I go to the very very top this is the first kind of action that I've got associated with this particular particular page so when this page loads I'm

going to want to carry out a series of actions so if I move over to the action flow editor of task page like that you can see the very very first thing that I'm doing is I'm saying right okay let's execute the get goal uh SQ like query I'm going to pass in a variable of ID and I'm passing in the goal ID this is the goal ID that has come from the parameter of uh this of the page and you can edit that here and you can see here I've got page parameters it's the

only parameter that I've got available so that's kind of how I'm collecting that information that is then passed over now of course What's Happening Here is I'm making that uh that database request I'm getting a goal returned here you see what this action output variable is I'm saying right return me back to that row and that row is going to be a task goal and then what I'm doing is here is I'm taking the output value that's come back and then what I'm doing is I'm saving that as a page State variable on the page

so I'm going to kind of keep track of it on that particular page now of course if I destroy that page and come away from that page then that value that I've saved there is going to be lost but chances are when I move away from that particular page I don't want it anyway so it's a good way to kind of like you know destroy destroy values or or variables that are being defined on pages when you don't actually need them anymore so how is this page State variable defined well if you've been using flood

oflow for a while you'll know that it's um in the particular page itself over on the right hand side here you can see that this particular uh kind of state variable is called goal and it's of type SQ light row so I'm going to get that that that Row from my SQ light database and I'm going to sort of uh persist that inside that particular variable called gold and the two will match up because they match that particular type because they SQ row so that's that's pretty well much all this kind of needed I've now

when I'm on this page I know I've got that goal available to me in memory and of course I can now use that on this particular page now quite simply up the top here you can see here I've got the goal title text so you can see here that this is kind of uh sort of linked to then the actual title from my actual database row so I've got the goal I'm pulling that out and you can see I'm using the page State variable I'm grabbing the title so that at least allows me to kind

of associate a title with my particular page and of course I've then got then a further query here that is then returning me back all of the tasks from my database now if I move over to the backend query of this and edit get task you can see here I've got another query called get task if I edit that you can see that I'm passing in then the goal ID this is a variable that's associated with my query and I'm simply just passing in the goal ID and you can see here that is coming from

the parameter again that I passed in I'm getting hold of the value here and of course that allows me then to return back all of the goals inside this particular list view that is then associated with that particular goal so that's pretty simple like that let's just have a quick uh hop over to then the get task here um SQ like query let's have a quick look there so if I go to the SQL query we want to go to the read query here and you see I've got this one called get task and this

is that variable that's defined I've defined a variable here called goal ID and you can see it quite simply I'm saying return me back of the tasks where the goal ID matches the variable uh value here and of course I'm just ordering by the ID in ascending order so of course um the uh the the oldest one's always going to be at the top with the newer ones at the bottom but of course I could just change that to uh DEC like that for descending order which means that the newest one will always be at

the top so I'm just going to put that back to ascending order and of course I'm then saying okay well I'm going to bring back all of the tasks and just return me about the title the description the ID and the complete status of a particular task that I can then use um as a an output from this particular query and of course if I go back over to then this particular page here these are the values that get displayed within each of the containers that is on this particular task list view itself so I

do encourage you to kind of explore kind of like the widget tree here because I've got some kind of conditional build Builders I'm kind of making decisions over whether I putri breakthroughs through and all this kind of stuff depending on the task kind of completion status um just adds a little bit more of a a visual look to when users uh sort of complete task so I do explore you to have a look at these it's quite straightforward but it's all to do with these kind of conditional visibilities that are set if I just select

that one there on the conditional Builder you can see here I'm saying if um a particular task is completed then show this particular row otherwise if it's not show this particular row here and of course this is then just show in kind of different kind of looking F kind of widgets based on whether something is complete or not and of course you can see here that each each goal is then associated with then a action uh you can see here I've got this one called update task component just select that and you can see here

that all I'm simply doing is then displaying a bottom sheet which will then allow me to then update the goal but of course I need to sorry the task I then need to work out okay well what do I need to pass in well in order for me to update a particular task I'm passing in the ID here I'm passing in a goal ID actually um can't quite remember why I'm passing goal idea actually because of course we're just really all we are simply doing is updating the tasks that's already associated with a goal so

I could probably actually remove that here I'm not sure why I need to do that so uh that's something there just a little clean up in this particular project but the key thing is is on passing in the ID of the task into that kind of update task component and of course the update task component is just here so again nothing special going on here uh the very first thing that we're going to do at the top here is on the actions if I just uh bring up those here so it's on the actions open

up the action flow editor and the first thing I'm going to be doing here is making a backend call here passing in the ID that's passed in getting the uh the value the the the actual rowback from the database and of course I'm then here uh kind of uh setting the uh the actual uh the actual page the actual SQL light uh page State variable here and then of course I'm then setting the form fields on the actual UI itself so you see I set I do the title and I do the actual description if

I set the title here you can see here I'm just using the value from the actual SQ light row I'll just going to show the page State variable here here is the task itself so I'm going to I'm going to uh kind of get through the database query I'm going to then persist the result of that into this particular page State variable and then of course Within inside the actions just a recap here on then setting the form Fields uh based on the actual page State variable um of the actual title itself um or the

actual uh here the description here so that will just then at least show those values inside the user interface okay so let's talk a little bit about the update but firstly just to remind you that on the update task component we have this page Sor this component State variable called a task now we're going to use that so this is going to be pop ated obviously when this particular bottom par gets displayed because that's clearly the action that gets executed here but we're going to use a value of that in just a moment we' inside

the update so we haven't got any kind of completion option here we could mark this as complete here if we wanted to but of course I'm not because we're just simply updating these two values of our row so if I go into the update itself and open up the action flow editor you can see the first thing that I'm doing is validating the form itself then I'm performing a backend query where we're going to update the values that is associated with that particular row you can see here that I've got the ID this is going

to be important if I choose ID we're going to get this from the parameter ID that we passed into the actual component itself so that's important that sets that value so we know we're going to be updating the correct task just cancel that the title we're going to set from the uh the widget of the text field so of course if the user changes it we're going to want to use those values as we update the row so that's fine the same thing for description but complete we're going to pull this from the variable that

we set with inside the component State variable so here if I just choose the edit here you can see now that I've gone into the component State I've gone to the task itself and then I'm just pulling out the value this there already called complete so if I just hit confirm on that we know that we're going to get that value set now I don't have to set that here because we're not we don't need to worry about it um but if I wanted to extend my user interface to allow us to set that value

then I could I could be pulling that this complete value from somewhere else with inside my UI like a little check box or or something like that but I'm just using this as a bit of a pass through at the moment I don't really need to include this as part of this particular update task but I've got it there just for good measure just in case that we want to use this upate task uh query elsewhere with inside the application which I think funny enough I am doing on the uh the the task page and

and I'll show you that in just a second and then we just simply close the dialogue box itself we're not interested that anymore so just close that down and then we'll be returning back then to our tasks page okay so let's talk very briefly about the delete uh task because that's a little bit more complex than the update and let me explain what is going on so if I just choose the delete task button open up the action flow editor now the first action here is really simple we're just going to delete the task right

so we just want it to be removed from our database and of course we're just using the ID here of the task and just removing that from our database but of course with inside our goals itself we're tracking the number of tasks and we're also tracking the number of completed tasks so we're going to want to make sure that those values uh are reflected and updated within the actual goal itself so the first thing that we're going to do here is we're going to reduce the goal task count by one so of course if we're

deleting a task we're going to want to remove a task from our actual goal count so quite simply we're making a call here that simply all that it does is it decrements the uh the number of tasks by one really straightforward have a look at the SQ light query with inside the Cog there just to kind of give you an idea of what's going on there but here we need to kind of work out well is our task completed if this is a completed task we need to also keep our number of completed tasks in

check as well now without this it means our numbering is going to become out of step with each other so if it's a completed task we also need to decrement the number of completed tasks with inside our goal so again I'm just simply calling out to an sqi query which is going to do that decrement for me on the actual goal itself and again have a look at the queries because it does make quite a lot of sense when you look at it it's very very simple to understand it's just simply just reducing the count

by one now of course if it is a completed task or it's not a completed task it doesn't matter we need to close that dialogue box that's what we're going to do here so we're going to close the Bottom bar here by just simply invoking this particular action so that's a very very simple walk through of delete okay so let's talk a little bit about the little filter dialogue that appears up in the top top right hand corner before we work on the UI side of it let's talk about kind of the state that we

need to set up in order to support those values so on the left hand side here if I just go here to then the uh the option here for app values you can see here that I've got this field name called filters now this filter of course now most applications when you are filtering you're likely to have more than one value that you want to kind of sort of change in a filters kind of uh dialogue in this application I simply got one but you could add more and if you wanted to so what what

I've done is I've created this app State variable called uh filters okay now that is the data type of filters I'll show you that just a second um and of course this is persisted so obviously we want to remember the state of this throughout our application now if I move over here now to the option on the left hand side called data types you can see how I've created a filter data type and this has just got one field name as I said in most applications you'll probably have more than one uh criteria for a

filter and you can create more Fields if you want and you can see here I've got this called archived it's a Boolean indicator and it's got a default value here as false just kind of more explicitly set um so of course what I'm going to want to do is I'm going to want to update this particular value with inside my app State this one here now we're going to need that in our application because we're going to want to have some kind of global kind of uh value that we're going to want to kind of

persist and then our application can respond to so going back to our user interface now what I'm going to do is when the user chooses this filter icon button there's some actions that's associated against it and the first thing I'm going to do is display this custom dialogue using the alert dialogue action and you can see here that my component that I got selected is the filter drop-down component we'll take a look at that in a second and I've got some some sort of properties here of that particular kind of component like the you know

the width and height it's not too big it kind of sits up in the top right hand corner I've got some alignment kind of set up up here not going to go too much into depth here but I just want that to be positioned nicely with the little filter icon so I'm kind of aligning it with the target widget itself with the actual kind of Icon button but of course play around with this in your own application to kind of move the alignment of where that dialogue box will get displayed so uh the avoid overflow

by the way just means that it just won't disappear off the screen it will kind of move it into more the more of the UI so you're not going to kind of get any overflow issues at all so that's pretty well much it of course what I'm doing is here when the dialogue gets uh closed then I'm just forcing an application kind of state kind of refresh here so I'm just going to rebuild it I don't need to set any values here but it's just going to kind of just rebuild the UI so of course

my my list view that I've got on the homepage there will respond to the actual filter change itself so simply calling an update app stay here will do just exactly that so if I close that down here let's have a look here then what is going on Within inside the filter dropdown component so here it is really really simple component here it's got a container here got a little bit of a an animation going on here if I just preview that drops down from the top there nothing too complex about that but if we move

on to the actual uh the where the meat of the bones is simply this particular action will just uh simply invoke one action here it will just close the dialogue so we'll get it off of the UI um and then of course we' then got the little check box here which is going to kind of uh kind of change the state of that kind of filters uh kind of value so let's have a look if I open up the action flow editor you can see I've just got one simple here called update App State and

I got this in both on toled on and on toled off so we're going to want to make sure we set that to be true or false so when it's toggled on we're then going to uh set we're going to go to update App State we're going to select filters and we're going to want to update the actual filter itself so of course this is on toled on so we're going to want to make sure it set is true I'm doing the complete reverse here on toled off here let's see that and you can see

that I'm setting it to false so ex setting that that bolean archive indicator on our filters variable with ins inside the App State and once that is set of course we're going to want the UI to respond just close that now what'll happen is when I close this particular dialogue down we're to get that app State refresh if I go back to the uh the actual goals to the actual homepage here and go to the goals list view you can see if I edit the get goals query you can see I've got this archived variable

so this is where I'm now pulling that out here so you can see that um if the uh if the actual filter um the archive indicator is set as true then I'm setting the uh the value of one and so I'm saying um so all of my goals when they're archived we set them to um a value of one and so this is allow me to filter down on that so if it's true for archived then I'm going to just do a query to say bring me back all of the goals which have got a

value of one set against the archived uh row sorry column inside the database otherwise just do zero to indicate that it's not currently archived if I just cancel that and how do I of course get these to be archived well if you look in the update goal component you can see I've got this little Boolean indicator here this will just simply on the update allow me to then set that to either zero or one if I check it it's going to be one and then that allow me to then filter out the actual uh goals

themselves so that is pretty well much I think the application there's probably just one final little bit to tell you about and that is on the actual homepage itself so if I just move down here let's just collapse all of this here so we've got this conditional Builder here and I've got you know if this is the first run of if this is not the first run of the application then I'm going to want to display all of the goals but of course if it is the first run then I'm going to want to to

show the actual get started container so if I just s the conditional Builder and I just take that off here you can see we've got this big start button that's going to kind of pulsate on the screen so I'm just checking to see um am I running this application for the first time so if that is the case then this pulsating kind of start button will play out and of course you can see here I've got like a an animation that's set up here on the trigger uh so let's have a look here in fact

it's just not there let's expand this out here uh sorry not that one there let's get this right move down here get the right place there is my start if I go to the animations and of course I've got this animation going on here if I just preview that you can see here that that's uh that's playing out like that and of course that's just going to Loop the animation just sort pulsating in and out so it's really again quite straightforward there in terms of that little pulsating of course when I hit start then all

this is going to Simply do is then if I just go to the actual action itself so if I just uh is this get started container there's this whopping gray containers around it if I just hit the here and hit the open you can see that it's updating the app state to say the first run is now false and of course I'm then showing the bottom sheet for the first time which allows me to create the goal for the very very first time so hopefully that is well understood um and I've not learned to speak

too fast through this particular run through and hopefully you understand it but that is pretty well much the application and obviously encourage you to explore this um for yourself and kind of get used to its functionality um but hopefully you found that useful I'm sorry if you've been following this particular series and we've not gone right through to the end but I'm hoping there's enough material here for you to kind of digest and get used to kind of how this application has played out to the to to the end and um hopefully there's some value

there for you to get started so if you like this video I really do appreciate that you hit the like button and of course if you're not a uh subscriber to the YouTube channel then please do hit the Subscribe button and of course if you want to become a member of the digital Pros no code academy um where all of this content and more content is going to be available through the uh both the community side and also as well uh from a support perspective um or you're kind of just getting yourself up to speed

with flood of flat for the very very first time then it's a great community that will kind of help you kind of establish yourself and start learning these skills in order to build your your next flut flow application so until the next video on my channel hopefully you enjoyed it and I'll see you soon [Music]