#FlutterFlow - Build a fully Custom Calendar Component - Part 1 - Full Walkthrough

so welcome to another video with inside the academy and in this one we're building a fully customizable calendar component with inside flood oflow there is no thirdparty libraries required in this one with a little bit of patience with a little bit of low code a little bit of AI use with chat GPT we can get this fully working component working fantastically for us and of course you can then use this in your own projects and customize it however you need to so without further Ado let's get into the video and let's get [Music] cracking so the great thing about creating these type of components in your own application is you've got full design license so if you are looking for something a little bit more custom but you're very familiar with flut flow then this is a great little component where you can design this however you would like whether if you use a third party component of course it may be that if you're looking for this type of functionality that third party component doesn't give you the look and feel that you would need for your own application so and of course if you also learning components in flood oflow this is a great video to learn more about how to build components components and how to give make them a little bit more clever with using some low code as well so you can see here the component on screen on the homepage here I can choose any particular day that I would like the current day here remains kind of highlighted and you can see here that the previous days of the month are already shown but slightly grayed out and of course the the next month days of course shown as well and as I sort of move through this particular component all of the characteristics you would have from a typical calendar component are respected and of course I can choose this particular dat and because this is is a component I'm calling back from the component back to the parent page there the actual date that has been selected and of course I can hit the little reset button here and of course I'm back to the current dat so lots of little good little features in here which you can extend in your own projects so let's now get into the meat of the video and let's start building this from scratch okay then so if you want to follow along please do check the link in the description because you can clone this kind of sample starter project and this is where we're going to build our components so the first thing that we're going to do is we're going to create that brand new components we're going to move both to the components on the left hand side right click and say add component let's give our kind of our component a new name so we can say create blank here and we're going to call this calendar component just like that hit create component and here we're in a blank page so first thing we're going to do is create a container now for our actual calendar so let's hit the plus here go to container and we're going to give our container some sizes so the container's uh width is going to be 320 the height is going to be 340 like that and um we're okay to use our secondary background but we do certainly want to set some border radius here want to give it kind of those rounded edges so what we're going to do we're going to click on the little uniform option here which means that by us putting a value in here is going to be consistently made across all of the corners of our particular container if I just click away here you can just see those kind of rounded edges of our component if I'll just bring that out a little bit more like that and click away you can see that now right move back over to container oh incidentally by the way I'm not going to spend too much time in this particular video and rename all of my widgets but the final project contains all of the widgets all nicely renamed there um just for your uh for your reference okay so next up we're going to put our page column in there everything that's going to be with inside this particular container is all going to be kind of vertically stacked okay that's going to be kind of the main one so just press container here now on the right hand side here we can see that we're going to want to probably put a little bit of spacing in as well so um what we're going to do we're going to kind of like start the spacing at 16 kind of pixels from the top so anything any child widget that we put in there is going to start 16 from the top but all of our kind of our kind of alignments will remain sort of from the top there and nicely centered as well so let's now continue just putting in our kind of more more structural side widgets and then what we'll do we'll then sort of start drilling down into each and every one of those particular sections so the first one that we're going to add in here is now a row now this row is going to kind of contain the kind of the month and the year and of course the reset button on the right hand side as well so now that we've got a row there um what we're going to do is we're now going to put then another row in here and this row is going to be more specifically then for the actual date um the the kind of the calendar month and the year okay so with that now set let's go back up to the top row here and we're just going to put then in a icon so we're just going to go here in fact we're going to probably going to put um an actual icon button in here so choose the icon button here and we've got that now nicely shown there now of course the look and feel of this icon button is going to look pretty nasty but we go to our theme style widget here in this particular project I've kind of got just like a some styling that I've kind of preset in here which is going to be the uh the icon button primary so just choose that and you'll find that that's now changed for us here but of course now what we need to do is we now need to kind of set some properties of this particular button so let's now do that so we're going to go down to our button size here and we're going to choose a 34 just going to reduce the size of that and then our border radius um so this is the kind of the area around that we're just going to reduce that um to 26 we do want to set the um the actual uh the icon itself we going to change it to kind of bit more of like a uh kind of like a more of a reset like a a little um a little like a little circle there to kind of reset with an arrow so what I do know is there is one that's um we can just type in restart here um that's probably something that we would need but feel free to kind of uh choose whatever you would like on there so I'll just choose let's choose this one here the restart all sharp there we go now what we can do with this particular kind of row here if we just select this of course we can now kind of just choose the expansion so by choosing the expansion of course we're just going to push everything over here now to the right hand side um and what we now need to do is on the actual row itself anything that kind of goes in want to put a bit of padding here on the left and the right to kind of bring those particular CH widgets a little bit into the into the from the sides actually so with the row selected we're going to move over to the the actual kind of the start space we're going to put 24 in here and we're going to put 24 on the the end space in so instead of actually using padding up here on the left hand side I've kind of used the the spacing um that I'm actually applying at the start of that particular Row in the end of that particular row to bring all of the child uh widgets a little bit in from the sides okay so that's what I've done here but you could have equally of used padding if that's something you wanted to do but I highly recommend that if you try to use spacing more with inside your actual columns and your rows it just makes things just a little bit more consistent now in some elements of this particular widget we do we do need to use padding because we're not going to have this kind of uniform spacing certainly the item spacing with inside this particular this particular sort of example okay so now we've inside the row itself let's just put a couple of kind of text widgets in here just going to put the first one in here and then just put the second one in here now the first one this one's going to represent the kind of the actual uh sort of calendar month and then this is going to be the actual year we're going to bind those a little bit later to then the actual date that's kind kind of going to be passed into this particular component but firstly what we'll do we'll just do some styling here okay so on the right hand side let's set some style properties here so let's just uh sort of change the the kind of the body medium here and I'm going to change this then to the label large like that now the font size is going to be just increased to 16 just going to make that a little bit larger and primary text is okay everything else is looking okay we can come back and we can kind of like uh change and adjust that a little bit shortly uh now of course with our then our year which is what this is going to be we can then make a further adjustment here we're going to keep it as body medium we're just going to then increase the font size here and we're just going to then make this now semi bold like that just a little bit more Bolder and then we're just going to now go back to our row here and we're just going to put some of this item spacing here we're just going to put four here so it just gives us that little bit of distance between the child widgets that's inside this particular row like that okay so next up let's focus on creating the the row now that contains our days of the week and we're going to create a brand new component for that because it gives us an opportunity to promote a little bit more reusability in our application so I'm just going to do Apple K here um or control K if you're on Windows here to create a brand new component and I'm using the command pallet I'm going to choose this option here for add component and of course it's just a shortcut for me to get into this option say create component and I'm just going to call this one day label component just like that hit create component and I'm going to create a container hit the plus so so that's container is going to be our wrap and that's not really going to do a lot other than just kind of just size everything up for us this going to be 24x 24 in width and height go to the field color choose secretary background we're going to kind of remove any kind of fi color cuz we're not really interested in that hit clear color so it's going to be nice and transparent um and that's all that we need to do I'm just going to move down here though and I'm going to say any widget that goes in it I'm going to leave the position to be Central to the actual uh container itself so just hit hit the middle option here for CH alignment so that that's set I can go here press the plus let's add the text in here and move over to the right hand side let's have a look here and let's drop this down to a font size of 11 so just make a little bit smaller now the font weight I'm going to make a little bit more sort of Bolder here by doing 500 and then the text color just select that and I'm going to choose the secondary text so it's slightly grayed out if I now just hit away here you can just see that you can kind of just see it just in the middle there I'm I just hit a little plus there you can see it doesn't really sort of show you much at the moment right now what we need to do is we now need to create a component parameter this component parameter is now going to accept a string so let's choose choose a DAT label component go over to the right hand side and say component parameters hit the plus here add a parameter in now with the parameter name is just going to be day now the type is just going to be a string we're just going to pass in a string label here and it's going to be required every time we use it which is fine hit confirm and that's now all set for us now what we can do we can go now to the text we can move over to where the little text selector here is we can bind that particular text widget to the value that's going to come in for our parameter so just choose day there hit confirm I just need to put of space in here for a default value it need have a default value hit confirm and that's now all set for us so pretty much I think we may need to do a little bit of adjustment but that's good for now and we can now get ready to now use that back on our page I'm just going to tidy up here just going to move the day label into the components folder here so it's then in line and it's all in our nice sort of grouped together by components okay so that's not a requirement but that's just a personal thing that I have keeping all my components together so now we got that let's move back to the homepage now what we need to do sorry go back to the calendar component I beg your pardon and we need to now just collapse down our row here and with our column we're just going to hit the plus we're going to add a brand new row in and then what we're now going to do is now going to add in uh kind of five Sorry Seven instances now of that particular components so just hit the plus now I'm going to go and click choose the little diamonds here and you can see here now we've got the day label component so just choose that and we've got that in there now we can move down here to the right hand side and what we're going to do is we're going to choose this one to be Monday so just put m o n in there to represent Monday and what I'm going to now do is I'm going to duplicate these and I'm going to create seven of the these so I'm just going to right click and just say duplicate like that just going to keep doing that so there's all my Sev I'm just going to quickly go through now I'm just going to set all of these up now and say Tuesday and I'm going to do that right the way through all of the days okay so now move back over to the row now let's kind of space all of these out evenly so just select the main access alignment just choose this one here with space between now that's going to give everything all nicely evenly spaced out but because we now want to bring these in from the side but on this occasion what I'm going to do is I'm going to choose the padding option here 24 and I'm going to choose 24 here on the right that brings it nicely in like that um that is pretty much what we need to do I'm just going to put a little bit of padding here we're going to kind of make sure that we push whatever's below it which is going to be the kind of the main kind of calendar we're going to just push down a little bit so just put 10 in there to bring that a little bit lower so that's good we might want to come back and do a little bit of tweaking with this but um pretty well much that's that now created we can now move on now and start creating the the next widget for the actual grid itself of the the [Music] days

Channel: The Digital Pro's NoCode Academy

Views: 4,504

Keywords: android app development, flutterflow, flutterflow crashcourse, 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, flutterflow components, flutterflow app builder, flutterflow callback parameters, callbacks, custom widgets, custom widgets callback, #flutterflow calendar

Id: Bv0GrU7MibQ

Length: 12min 22sec (742 seconds)

Published: Mon Feb 26 2024