Building Tasks Page | To Do App | FlutterFlow for Beginners

in this video we're going to build out our tasks page where all of our to-do items will be and this will include building out a component right here okay so let's go through our normal layout system and the first step is to identify the atomic widgets the widgets that don't have any children so let's start at the top here and we've got a text widget right up there then we've got another text widget in here and this thing right here which could be multiple different things but we're going to use a checkbox so let's drag this out right here then down here we've got this thing and flutter flow has a specialty widget for this it's the floating action button and this is a page level element that sits outside of the main widget hierarchy and finally we've got this nav bar right here which we'll build in a later video so we'll just leave it a blank now I did skip over this item right here and that's because this list will be dynamically generated so there'll be one component for each task document in our database so we can just design one okay so first step done Second Step group close widgets in columns rows or Stacks so our closest items right here are checkbox and text they're next to each other so obviously that's going to be a row so let's pull that out let's just stack them on top of one another so we got some room going on right here beautiful and then our third step does this need a background and it does we got this white thing with a border so let's pull out a container let's grab all these let's bring them down down and let's pull these out to their proper place in the hierarchy okay now we repeat the second and third step grouping and background until we've got one widget now we do have one kind of hidden one here and that's because we're going to need to have a bunch of these items so we need our container to be inside some widget that can take a bunch of children and you might think well they're stacked on top of one another so it's probably a column but for any list where you're generating a bunch of children there's actually a special widget for that and that's the list View and the reason that it's special is that a list view is made for high performance for a lot of children because it loads and paints only the widgets that you see on screen it will lazy load everything else the column is designed for your main apps architecture not for showing tons of widgets so let's grab our list view right here and pull one out so we can dump it in here and then let's just move these down then we ask does this list view need a back ground no we can see through to the background right there so then we just have two items left cuz remember our Floating Action button sits outside the main body of widgets so we just have these two items and those are stacked on top of one another so that will be a column beautiful and that's it our widget tree is done let's go build it so this is what we were working with before so let's just delete everything we can turn off our safe area now and we're going to need a column some text a list View and then inside our list view we're going to have a container a row a checkbox and some text finally we need to add in our Floating Action button all right Beautiful Widget tree is built let's move on to our styling and spacing so our first step is to set the determinant Heights and widths and things that are specific so let's come into our text right here I remember from the design that it is a headline medium let's change a text this should be tasks then we can come down to to our container we know that it has that style our check boox down here is not going to be square but it's going to be a circular check and our text is going to be body medium next let's come down to our Floating Action button right here so the elevation is going to be zero color is going to be white let's grab our icon right here and we want this to be our black and we're actually going to wrap this in a container and give it a infinite height and width so it fills it up and this is how we're going to get our border out of it and let's give it a border of one pixel and Border radius of 50 beautiful lastly we want our fill color to be our green and let's bump up our icon size to about 30 okay next step is to set alignments on columns rows and stacks we've got one column over here and we want the main axis alignment to start at the top that's correct but we want the cross AIS to be over here so that that'll bump our tasks over there that looks good everything else looks good for alignment so we're on to spacing and we'll just give it some 12 pixels of spacing lastly let's add our padding and we need padding on these four sides but before we do that let me fix our scrolling so whenever you have one scrolling widget inside another scrolling widget so here we have a list view inside a column you need to make sure that your scrolling works as you planned it now whenever you have a scrolling widget inside a column here that scrolling widget needs to have one of two things applied to it either a height constraint so your list view is wrapped in a container and given a specific height or flexible or expanded and that's because columns don't have a height they look to their children for a height and if the child says give me all the height which is what a scrolling widget says then it doesn't know how to lay out no you might be wondering wait why is it not breaking now well it's not breaking now because flutter flow has automatically added this shrink wrap to it but that's not ideal for performance because in order to shrink wrap it it will have to do all the computation about its children but the nature of the list view is that it lazy loads widgets it doesn't have to compute all of that but if we turn this off it's going to break and we fix that by one of those two options and the easiest way to do this is to come into your list View and add an expanded property this is a property inside of columns that tells the child how to handle all the rest of the space space in the column and this is saying take up the rest of the space that you have that's as big as you can be so now we can go down to our shrink wrap right here turn it off and it doesn't break this also means that our scrolling will work properly okay back to padding now the easiest way to handle this is just come up to our top widget here and add some padding on all four sides and it looks fine right now but we will run into a problem and let me show you what that is so if I grab this container right here and make it bigger so that it overflows you can see that our scroll bar is right over here and it's over our content and we don't want that so we don't want to put our padding up there the answer is to just move down in your hierarchy of your widgets and apply padding in there now it's not as an elegant solution because there won't be one single source of your padding but it will solve the problem now we can still add the padding on the top and the bottom of our column so let's go here and add 24 pixels on the top and the bottom that's because the there's no scroll bars there then we can come to our text here add 24 pixels there and then come into our container right here and give this 24 pixels there and 24 pixels there so now if we take our container and pull it out when we scroll you can see that the bar is on the side as we normally expect beautiful okay this layout is almost done the one thing we want to check for is Overflow errors whenever you have text Fields like this especially when they're Dynamic so right now we don't see any errors but what happens if this overflows the bounds right here what do we want to happen well we wanted to just gracefully wrap onto the next line and the way you do that inside of a row is you can just apply flexible and flexible is the other expansion property that's designed to handle the extra space in a column or a row flexible just says you are able to take up the rest of the space it's not forcing you and when you hit the rest of the space you'll just wrap down onto the bottom finally let's add some padding in our row right here and we'll just give it 12 pixels on each side beautiful okay our widget tree and our styling is done but now we need to create our component and there are a couple of ways to do this we want to come over to the top element right here and we can either right click and convert to component or we can come over to our properties panel right here and add it here this is going to be an individual task so we can just do that and create component now we're brought into the component design view and you can see we're on that component here the component is marked by a diamond as opposed to a page and you can go back to the page you were on just by clicking here and we're back to our page now our list view is populated with this component right here and to edit it you can come in here and click this pencil or the way I like to do it just double click into it beautiful okay so now that we're here designing components always has two steps the first step is design the second step step is parameters so here most of our component is already designed let's just come into our container for now and give it a width of infinity and let's remove the height right here because we want the height to be determined by the text inside all right design done next parameters and the parameters will be the data that will be sent into your component when it goes onto a page not here this is in the design view over here because when this is on a page there will be different texts that comes into here it's not all going to say hello world of course and the way you determine what parameters you need is to ask yourself what about this component will change that is every time I use this on a page what are the different aspects of it that will change well the text will change and if we look over at our design this component gets used both on the tasks page and the completed page and we can see that that checkbox changes too so we'll need some parameter for the check box and creating parameters has three steps Define bind and pass so first Define it okay so let's set those up let's double click on our component and here's our component parameters if you're not seeing them you probably have a widget selected here and you can just select the root widget or just click off onto the canvas and you'll see this next click plus and the first one to add will be the text right here so this will be the task text and it will be of type string confirm and then we'll need one more for this checkbox right here so let's add another one in let's add a parameter so this will be whether it is completed and the type is going to be a Boolean and confirm First Step done we've defined our parameters next let's bind them because these parameters aren't connected to anything in this component they're just sitting there so we need to bind them so let's come over to our text right here and let's come into our binding and bind it to our text let's add a default value task and confirm next we want to come over to our checkbox right here and bind that the initial checkbox value we want that bound to our completed parameter beautiful Second Step done third step is to pass that is pass the data into these parameters and that happens on the pages where you have the component so here's our component and when you scroll down you can see we have those parameters that we set up there's nothing in them right now because we need to pass in the data okay so what do we pass in well remember this list will be dynamically generated it'll be generated based on our firestore collection of tasks and we haven't bound that collection here yet so first we have to do that so we come into our list view right here into this third option backend query and add a query and then we want to query a collection it will be our tasks l list of documents but we don't want to list all the documents we want to filter them because we only want to show the documents for that user we don't want people to see everyone's tasks so let's come into a filter right here we want a filter by the user and we want the user to be equal to the authenticated user confirm but that's not the only filter we want because this is the tasks page for tasks that are not completed yet so we also want to filter out tasks that have have been completed so we can just add another filter and inside here we want to filter on the completed property and we want it where the completed property is equal to false that is it isn't completed and confirm beautiful now that we see multiple children here we need to give them a little breathing room so let's scroll down to our item spacing and give them 12 pixels okay so now we've bound this list it's dynamically generating one component for each task so now we have data we have those documents to pass in the data so let's come in here and let's pass in the task text come into this binding come into this tasks document and it'll be the title next let's come into our completed property same thing our task document and that completed property beautiful so now we have this dynamically generated data and we can bind the individual parameters right here here so let's come into our task text and it's coming from that task document this is new now now that we've made this binding so we can twirl it open and we want the title now whenever you do a binding make sure you go in and set a default variable value to Avid null errors we can just say title and let's do the same thing with our completed property and it's the same thing let's open up our task document and select completed now you may be wondering wait I thought we filtered out the completed why do we need to apply it here well remember the parameters are there so that our component works everywhere where it needs to work so we use this component on this page where it will be unchecked and on the completed page where it'll be checked this way it will happen automatically and we don't have to take the extra step of clicking it on or clicking it off we could do it that way now you also might be thinking hey wouldn't there be a more efficient way to do this passing of parameters because can't I pass the whole document and yes that's exactly right so let's refactor this and see how that works so we're going to doubleclick into our component and instead of defining these two parameters let's get rid of them and instead pass one parameter which will be our tasks document this will be of type document and we can set the collection type of tasks let's confirm that now we have to go back to our binding step to our text into our tasks document and then we can get a document property and select that property let's set the default value and confirm same thing over here to our checkbox checkbox task document get the property completed and confirm we've defined it we've bound it now we got to pass it so let's come back over here into our component and now we just need to pass our document confirm okay so why did I bring you through that and why is this more efficient well I wanted to bring you through that so you can see the flexibility of flutter flow and to understand the structure of how data works now why is this better well it's better because it's more flexible so if we ever need to add another property to our component we don't have to Define another parameter and then pass it in because we're already getting the whole document and with that this page is done we were able to design this page style it and build a component in the next video we'll design the bottom sheet and the logic for adding tasks we'll see you there

Channel: FlutterFlow

Views: 9,409

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, widget tree build, tasks, to do app

Id: vUfkf7zSnf4

Length: 15min 59sec (959 seconds)

Published: Wed Mar 20 2024