Building your own Custom Navigation Bar in #FlutterFlow - Full walkthrough

hey everybody in this particular video we are going to build ourselves a custom navbar component that we can actually have with inside our page it's going to be different than using the standard flutterflow navbar component the kind of thing you sort of see sat down here we're going to want us to look a little bit nicer a little bit different than that so of course we're going to build our own and I'm going to walk you through right from the beginning in this particular video so if you're sitting comfortably let's get into the video and let's start building something just a little bit different [Music] so here we are then with the final project up and running as you can see here I've got this custom navigation bar that kind of runs along the bottom there it's a little bit different obviously to the nav bar that you'd actually have with inside a flutterflow out of the box It's just sometimes nice to create something a little bit custom for your application so you can see here I can now click through these different pages here and you can see they all work independently the actual icons are sort of animated you can just see a very brief little bar that sort of appears under the bottom there that's really really nice and of course you can see here now that when I'm on the home page I can sort of see that the navigation bar is kind of floating above the content that is actually underneath and what's also nice about this if I just scroll to the bottom here and there's a very very simple sort of sizing technique that you can have in flutter flow here that you can actually respect the content to when it's scrolled to the top so you don't end up in a situation where your navigation bar kind of just sits like that okay so as you scroll to the bottom you just sort of size the the actual sort of column up here to work in in respect to the actual navigation height as well so that's really really nice and of course I can love a little feature I've got in here if I go to the um actual sort of profile here and if I just toggle the little administrator option you can see now that I've got this new option that appears down in the right hand side here I can click on that and of course I've now got a dedicated page that perhaps some administrators of my application could actually use as well so I've just put that in here just really as a quick little uh sort of addition to the actual navigation by how you can kind of just sort of dynamically sort of show and hide different options with inside the navbar so that's pretty well much it let's have a quick look in the iOS simulator now because there's an additional sort of technique that I've put in there as well um to respect to this situation where the actual keyboard gets displayed on the user's machine so for example if you're on the profile screen and you are keying some details in here although you can't see this actually with inside the flood of flow kind of sort of test system what you can actually have then is the situation whereas you sort of select the actual uh the focus inside the text box the keyboard would then display but this navigation bar would then float above the actual keyboard now we don't want that to happen so I'm going to show you something really super and simple inside folder flow that actually then hides that actual widget when the keyboard is displayed so let's now move over to I assume later let's just check that out and then you can see it running in there as well so here's the project running then in the iOS simulator here and you can see that it's um as you saw pretty similar to what was running in the test mode of inside flutter flow but as I sort of sort of slack through here there's a couple of things that is worth pointing at this kind of going on here firstly the um one of the text techniques that you need to really consider with inside your flutter flow projects is to reflect the actual safe area of your Mobile screen so here every single page of inside this application has the safe area toggle selected and that just allows um pretty much the content not to kind of intrude with this particular area here at the top of your mobile application so it's something that is definitely worth you considering as well if you're looking just to make sure you don't see those clashes with inside the UI what I've also done here is um we just talked previously in the last segment about the keyboard let me demonstrate that to you now because if I move over to the profile section here if I now just go in here and I've just got the focus in I haven't actually got the keyboard display because on a mobile device as soon as you've got focus with inside a text field then the keyboard would naturally display let me just toggle that actually on here so what you can see now is the keyboard is now kind of displays and hides and you can see here that the actual navigation bar actually disappears as well now of course if I didn't make a change of inside my flutter flow project to hide the actual navigation then the navigation would just simply just it sit above the actual area here which will of course will then intrude again with everything you've kind of got displayed below so we'll show you how that works as well another little um feature actually which I've got in here as well is I've just showed you this a very very simple technique of just toggling kind of light and dark mode as well and you can see here that some of the thing that I've actually got set up with inside this starter project which you are free to download of course will also have a very very simple theme in there as well and you can see here Regina Comics got this natural kind of gradient here a slightly lighter gray to a darker gray and of course I just toggle that off here I've got a darker blue to a slightly lighter blue just here so just gives a little bit of a Pizzazz to your application as well so that's pretty well much it that is the application and let's now start moving into the build of this if you are learning flutter flow this is a really really great video for you to just to learn some of these little additional techniques that will really work well in your own applications as well and certainly building custom components as well if that's something that you've not done too much with at this moment so let's get cracking let's move on to the build thank you so before we begin then let's talk a little bit about the starter project that is currently in the link in the description this is the starter project if you would like to follow along with this particular build which I highly encourage you to do um to learn more about how to apply these techniques please do clone the project please just click on the link in the description that will take it into flutter flow and then you just hit the Clone button that it kind of appears at the top here and then of course you can then take that into your own flutterflow account and that will get you right to where we need to be right now let me talk to you a little bit about the project structure just so you can get yourself familiar with it what I've done is I've kind of created this kind of like um sort of just sample project here there's got some pages in there it's got some content already loaded there as a good starting point there's nothing special going on there's no nothing that I've kind of that that doesn't need to be explained across the actual work that we're doing because of course they're just widgets loaded on a particular page but there are a couple of little important sort of bits to point out why we're talking about this particular starter project because the way that I've organized the project is quite simple I've kind of have this app pages folder that contains all of the kind of the primary Pages here of my application and then I've got this subpages folder which will then allow me to put some more of my and my less sort of high level pages into a particular area so it's good organization is a good thing to do in your own projects to organize things about all I've got in this particular folder is what is the product Details page this is the page that gets loaded as soon as you sort of click on this particular sort of area here and and these particular areas here are just simply um sort of flutter flow templates I've just loaded down in here just customize them a little bit just for this particular project so it just gives um some some extra substance to the actual project that I've got on display here but pretty well much that's it it's quite quite simple I've got some authenticated pages in here as well if you're looking to include um some kind of login uh sort of screens and create create an account screen then they're in there as well but of course you can remove those or use those in your own project how you see fit and then we've got this components folder in down here now this is the folder that's going to contain the actual navigation bar so it's a good habit to get into it's kind of have like a dedicated components folder for all of your kind of your reusable components now this particular navbar um is is is pretty well much could be classed as reusable because you're going to be applying that to multiple different pages with inside your application so think like that think if it's something you're going to reuse again kind of put them into a dedicated area inside your project structure just for safe keeping and for easy reference when you need to bring those back into your project um so that's pretty well much there's a couple of sort of like guiding principles um throughout the actual Pages themselves in terms of using kind of padding and columns and all that kind of stuff but I'll try to point that out a little bit as we go through the actual design as well so without further Ado let's now uh clone the link in the description which I'm hoping you've already done and then let's now start working on the actual navigation bar itself okay so let's get into the actual build itself so I'm only human I'm not going to remember all the numbers that I need in order for the property so I will be looking at the notes that I've got on the left hand side of my screen and but of course if you follow along as well and key in the details that I'm applying then you should get the same results as well inside your own project so first thing I'm going to do is build a component on the left hand side so I'm going to go to the components sort of folder here right click there say add component and then very quickly the create component window pops up let's just hit create blank and the navigation component we're going to call this is going to be just bottom navigation component like that so we could practice for me personally to put the term component at the end of my actual component so when I'm referencing those with inside flutter flow itself then I know there's a component that I'm actually referencing so just hit create component and here we are in a kind of a blank component State here I'm just going to just sort of size this out a little bit here just gives a little bit more estate space so let's Now work on creating a new container so just hit the little plus here let's go down to container and we now need to sort of work out some parameters here so on the width of my actual component stuff it's going to be 360 okay and the height is going to be 70 so that gives us quite a nice size component of course but you you're welcome to just to drop that down in height for your own use case with inside your project but it's going to be 70 in here and the first thing I'm going to do is give it its fill color so that what I'm going to do with the film color is I'm just going to set the primary color for now but of course what we can um do um we'll actually create the kind of the divided effect in in just a moment to give it that kind of that that more nicer feel but we'll come down to that property in just a second now what we need to do is we need to give it a kind of the rounded edges with inside our container itself so go to border radius let's just choose an eight here so very much um a good practice when you're working on real solid kind of um sort of applications it's nice to get yourself into kind of like a design um you know a standard in design so you could have like a 4 8 12 16 20 24 so kind of work in increments of like fours and that's pretty well matched the the style that I'm in certainly in more recent times is is what I've kind of adopted in a lot of the work that I actually do so the I'm just going to use an eight board radius again but of course again customize that to how you would like that in your own application now we're not going to do any Borders or anything like that let's just move down here so let's move down to gradient now let's put that gradient in here let's just toggle that on now the angle I'm going to put here is 45 degrees as you can just see actually as I just change that you can just see if you are very careful you can just see there we kind of got darker light if I change that to 45 degrees then we kind of got this kind of movement from a darker up to a lighter here and you can see that I've got the primary color already selected here and the secondary color of inside the theme as well is selected to give it that kind of look that I'm actually looking for all of the other details here can remain the same we don't need to make any changes there so that's pretty good A couple of little bits that we actually need to do and that's across the actual padding itself so we're just going to set here a left padding of 16 here and 16 on the right and then 16 off the bottom and the reason why that's important is is because when we actually apply this particular component to our actual home page or all of our Pages themselves then the actual the actual navigation bar is going to actually going to float off the left and off the right off the bottom of the actual screen so that's why I've applied it actually here so um by doing that that's um that sets us up quite nicely for it to then be consistent across the rest of our pages and we don't even have to make any kind of uh sort of changes to the actual component itself when it's actually added into all of those particular pages so it's worth doing it with inside the actual component itself okay so next up let's start now fleshing out the actual UI itself now just as a term of reference here one thing that um a nice Habit to kind of get into really early on in your flutter flow journey is to actually properly name your actual widgets themselves so it gives a good reference point depending where else you are with inside flutter flow let me give you a good example on the left hand side here I've got a container and I've had lots of containers here just called container then um what will happen is if I have an animation Supply to each of those particular containers and then with inside the action flow editor of inside flutterflow I need to reference and trigger a particular animation if I call them container that's going to make it very very difficult for me to determine which container the animation I actually to trigger so by giving our name our property names to our widgets it's going to make your life so much easier in the future so let's now start now working on the actual bidding out through the the actual tree itself so I'm just going to double click on the actual widget itself and the actual name of this particular widget is floating nav the negation container and you can see there that what I've done is I've applied the actual name of the widget type to the end of the actual name of the widget itself that's just handy for again determine what type of actual widget it is so with inside that we now need to create a new widget now let's add in a uh an actual row here and I'm just going to drop that down here and I'm going to call this one nav igation item row like that so this is going to contain a number of different Navigation items now of course we've inside our project we've got about five or six pages and each of them are going to have an icon with that little kind of animated bar this underneath them itself okay so let's let's now create some columns now so these columns are going to contain the actual icon and the little animated bar so let's choose a name for this we're just going to call this home column just like that now with inside our home column we're going to have an icon button so this is going to allow our users to actually choose the actual page itself so just choose icon button and we're going to call this one home icon button like that and then just a little plus again and we're going to now put a divider in here okay so we're inside an actual column you can have this kind of horizontal divider and that's the little divider that we're going to kind of animate slightly when we actually kind of hover our Mouse over that particular region so just choose the actual divider and we're going to call this one just home divider just like that so that's super simple so let's now style up the actual icon itself so just choose the icon itself now let's um do some changes here in fact I've actually got a a kind of a theme sort of style widget actually which we can actually apply here by just choosing theme style widget there's actually one in here called Navigation icon primary and what we'll do is um I'm just going to set the properties on that manually and then we'll just set that so then of course um you then know how I've made those changes and for The Styling but of course in future we can just choose the navigation icon primary as a theme style widget which I've kind of already got with inside this particular project so um on the button size let's change this to 50 let's make this a little bit larger the actual uh fill color itself we're just going to remove so let's just remove that so just go to clear color so that's gone and then the actual border color and we're going to kind of remain that is unset so let's just clear that so we've got no border at all now the Border width I'm just going to as zero so we don't actually want any border around this particular icon button itself and then the Border radius is going to be 30 like that so that's it um let's now move down to the icon part let's now choose the icon that we're actually going to use for this particular build so just choose the add option so it's Cottage outline so it's just that one there so just choose Cottage outline and then the actual color itself is just going to just choose that and I'm going to select a custom color here of primary button text so just choose that and then we've got kind of a nice white look to our actual icon so now with that set what we can now do is we can now go up the top here and we can choose the theme style here so we just kind of done it by hand let's just choose the navigation icon primary option there you'll find that you'll see no visual change because that then confirms that the actual theme style widget that's been created previously matches the design that we've just applied here so we're in good shape so now let's now focus on the actual home divider itself so just choose that on the right hand side here we need to Now set some properties here so um we're going to keep this we're going to just change this now to the line color option here so just choose line color there and with a height we're just going to choose this as two and then with our width we're just going to choose this as 30. the thickness just needs to be two so it's just a little bit thicker I just click away here you'll start to see that pretty much look uh pretty pretty good to what we're actually looking for okay so let's now start spacing everything up so with inside the actual and navigation um a kind of item row here this is this is kind of like the uh the kind of the row that obviously contains all of our actual icons we're going to want to kind of set some properties of our navigation row so what we need to do is we need to choose the item spacing so every single icon that is actually going to be contained with inside our row is going to have a spacing of 16 pixels between them okay but at the start we also need to apply 16 so it just moves that you can just see there is moved over to from the left hand side and at the end we obviously don't want it to hit right at the end of the actual container so we're going to enforce a 16 at the end so that's quite nice so we know that we've got 16 there 16 here and then every one that we put in here is going to have 16 in between so that'll keep things looking quite nicely what we also need to do though is we need to choose this particular option here we need to space everything evenly so obviously as we add more icons in here then everything will be nicely spaced out for us so just choose that there you'll see that our home icon will go to this Center because it's the only one that's actually in there so that's that's pretty good now of course if you had less uh sort of options with inside your own project then you can either choose to kind of sort of space things out a little bit more uh for your particular use case but for us um space evening is going to be quite quite nice because it just means everything's going to be nicely spaced out in between so you'll see here that the item spacing obviously won't apply in that particular instance because we're using the actual row here to actually align all of our items actually in the row itself but um but of course if you if you have lots in here then you'll know that 16 will be the absolute uh kind of minimum that you'll have between each of the actual icons itself so it's worth actually applying the 16 spacing here anyway okay so we now need to work on the actual divider itself now we're going to want to apply a very very subtle animation to when it actually then is displayed okay and the way that we do that is quite simply just move over to the home divider here let's move over to the animations option up at the top right and this is going to be an on page load animation so as we move through each of the pages of inside our application we're just going to get this little subtle animation that will play out to represent the one that we've actually got selected the page that we've actually got in display so the way that we do that is we use an on-page load okay so it's just going to fire every time the actual page loads itself choose the add animation option and this is now where we now need to choose a couple of different animations that we need to apply so the first thing we're going to do is do a scale animation okay we're going to want this to kind of just look like it's kind of starting quite small and kind of moving out so what we're going to do is we're just going to change the duration okay and we're in fact I'll tell we'll do we're going to apply the same duration because we're going to apply two different actual animations here animations here that's going to play at the exact time so the duration that we're going to select is 150 milliseconds is going to be super super quick and then what we're going to do is here we're going to choose some scaling so the initial scale this is on the x axis okay so this is actually on the horizontal axes we're going to specify a 0.6 so the actual uh the actual divider is going to be smaller and it's going to make its way up to then the final scale which is going to be one so very very subtle increase in scale and if I just preview this you might just be able to see it there just play out if I just move back over here and then preview uh it's a bit as I'm sure there's a little bug actually in flutter flow there and where you could actually just keep clicking on these all the time you could keep seeing your previews um but rest assured it did just increase out and then actually then settle on the scale of one so now we need to do like a little fade as well so um that's quite simple all we've got to do is just add another animation here and we're going to choose a fade and we can keep everything here the um default option so it's going to be not visible at all so it's going to be zero opacity so completely not there and there's going to work it say it's way up to one which represents a hundred percent uh sort of visibility okay if I just now hit the preview now hopefully you should see it play out there it is just a very very subtle fade in and a scale at the exact same time so that's all that we need to do with inside this particular setup of Animation there's no other properties that we need to select at this particular stage so we're just going to break away just very very slightly from actually building out the UI because there's one particular part that's going to be really really important to us we're going to now need to tell this this common navigation component which actual page that we actually have selected with inside our application itself and the way that we need to do that is we now need to create a component parameter and then what that will allow us to do is are then our actual widgets will be able to respond to whatever values get set with outside of this particular component so for example each of our pages is going to have this our top level page is going to have this navigation component actually at the bottom and then each page is then going to then pass it a value of one two three four to represent the pages that we've actually got in the order with inside our navigation bar that's then going to allow our widgets with inside the navigation bar to respond to those particular values and I'll show you how you set that up in a moment but we need to now create the actual component parameters so the way that we do that is we move over to the very very top uh sort of widget with inside our actual widget tree here which actually is the component itself and at the top up the top here you've got these this option called component parameters just choose the little plus there choose add parameter and we're going to call this one selected page index like that now this is going to be of an integer type so it's going to support a number and we're going to keep it as required but we're going to put a default parameter value of one in so one will represent the actual home pages the one that's on the far left hand side here which is the only one we've got here at the moment but of course we're going to add more in so that's fine we just need to hit um add uh we can we can actually confirm here but we're just going to add another parameter in here as well just choose add parameter and we're going to choose um the title of hidden as the parameter name here and we're going to give this one a type of Boolean so it's either true or false and we're going to make the default parameter now false by default so we're going to take off the required because we don't necessarily need to always pass this in now what this parameter is going to do is this we're going to apply a conditional visibility to the overall component and what this allows us to do is in certain situations inside your application not in this particular sample but perhaps in your own you might want to actually turn the actual navigation bar off depending on how you use it with inside your application so by doing this it just means it will add a conditional visibility in it very very shortly which means that if we do pass a true in from our page when we have the component then the navigation bar will then be disappeared so we can just um hit confirm on that so that's all that we need to do that's our component parameters all set up so now we've got those created they're now available to us now with inside the design side of our actual component and we now need to hook on to some of that now okay so now that we've got our component parameters all set let's now start using those with inside the UI itself so what are we going to do now we need to make a change firstly to our icon here our home button icon at the moment you can see here that it's it's nice and white now of course that would represent that the actual page is the one that's currently active and visible with inside the UI of course if that's not the selected page then we need to make sure that we then just tone back the actual icon itself maybe give it like a semi-transparent look and how do we do that well quite simply with the actual home icon button selected up the top here you've got this option called opacity as you can see here by default is one so it's fully visible we now need to just choose the little selector here so just choose that and what we need to do is we now need to choose a conditional value if then else okay to just choose that and our first condition is going to be and we're just going to select that we now need to choose conditions and we need to say a single condition and this is where we're going to do the check so the first value we're going to say is the selected page index we're just going to select that just say confirm and we're going to say is it equal to and then we're just going to select our value here as one so just hit confirm then what we then need to do is we need to say well if it's one which is the selected page then we're going to make our transparent value of 1.0 and then of course in the value if it's not a selected page index if it's not equal to one then we just say it's 0.5 so just give it that kind of semi transparent look just hit confirm now you won't see any change with inside the UI itself but of course at runtime you would do because we would be passing in the actual selected page index actually into the component so that's fine that's all that we need to do there now let's move on to the next bit so we now need to actually do something with the home divider as well now of course if it's a selected index page one we want that to be visible of course if it's not then we don't need to what we can do is we can actually go to the home divider here just make sure we've got that selected let's move over to the actual conditional visibility just toggle that on there and we can now select our condition in here so I'm just going to select that choose conditions do a single Condition it's very similar to what we've just done just choose the selected page index hit confirm and we are going to say if it's equal to the value of one just hit confirm here now we know that actually if that is now selected page index is one then we know that our little line underneath our icon is going to be a visible or not of course you'll see how we then make this further change throughout the rest of the icons to represent the two the three the four depending on how many pages that we've got so that's those conditions Now set up okay so now that we've got our home icon all set up that's pretty good that's pretty much our template now for creating all the additional icons of our application so what we can now do is we can now just simply just go to the actual home column now we can actually just right click and we can just say duplicate and of course what I'm going to do is I'm now going to create a number of duplicates here to represent the pages that I've got so I'm just going to choose four options here you can see they're just getting nicely laid out along there which is quite nice what I'm going to do now is I'm just going to go through and I'm just going to rename these now and I'll quickly come back in a second and show what I've renamed them to just you if you're following along you can do exactly the same thing as well okay then just to spare you the time here you can see on the left hand side what I've done is with our now duplicated columns I've now renamed renamed them so one's called a note column they've got no icon button Note divider profile profile icon button profile divider you can see that I renamed them now all down the left hand side so please if you're following on please do the same as well so what we now need to do is um well actually just before we do that I've also changed the actual icons as well so I quickly show you those the note icon button I've selected the note alt outlined icon with inside the profile icon button it's just called a person outline and then the settings icon button is just called settings outline so they're the icons that's basically the only changes that I've made what we now need to do of course is we now need to start now changing where we said selected page index to then the correct number so firstly with the note icon button we now need to make that change here as well so if I just scroll up here you see that we've got the opacity value we need to make sure we change that so just go through and change these now so I'm just going to go here just choose the selectors page index here I'm going to go to this the value here and I'm just going to select this as 2 and hit confirm I now need to choose the note divider oh just hit confirm there and just hit choose the note divider and I now just need to do the same thing on the conditional as well just select that there as the value number two so what I'm going to do now is I'm just going to go through and change this one to this one to three both of these to three and this one here to four to save the time okay so you'd be super pleased then that we're getting very very close to the completion of our navigation bar but there's one more thing that we need to do we need to actually provide functionality to our actual buttons themselves to actually navigate to the pages that we need to so it's really simple in Florida flow but there's just one little tweak we need to make to make sure we don't get any kind of sort of uh sort of like like a transition when we actually move to those pages because we need it to be instant so what we can do is we can move over to the actual icon button this is the area obviously that our users are going to select with that selected just move over to the actual actions here and we can now add an action so just choose add action and we are just going to do the navigate two so just like navigate to and we now need to choose the page that we need to so on this this particular example here we're going to choose the home page now it's this is the bit that's really important okay the default trans the actual transition type you don't want to have selected we want this to be instant we want to see instant feedback as soon as the user go to that particular page and what we need to also do is we need to turn off this allow back navigation okay because these are kind of our top level Pages we don't need to go back anywhere else outside of the kind of the root of our application so just toggle that off and that's all that we need to do so now what I'm going to do I'm just going to go through each of these other buttons here and just navigate these to the crack Pages they need to go to okay if you've been following along well done for getting through the previous segments on actually building that actual navigation bar component we're now going to make things a little bit more interesting we're kind of done now for the time being with the customization to the navigation bar component we now want to place the navigation bar component actually with inside one of our pages so we're going to start on the home page here so if you recall back to when I demoed the actual final application you can recall that the actual navigation bar kind of floated on top of everything else that was underneath it and the way that we made that happen with inside flutter flow is we use a stack widget now the stack widget is going to allow us to kind of layer widgets on top of each other let me show you how that works so we're going to make sure that we've actually got the page content container selected here so this is the the kind of the the widget that's containing everything else that's actually on our page now what we do is what we're going to right click on it and we're going to say wrap widget so just select that and we're going to choose the stack option here so just choose that and you can see now that the stack is now sitting pretty well much above and below the page container but the page content container I'm just going to collapse that there for now so what we now need to do is we now need to add another widget into the stacks we've always also got the page content container let's choose the little plus here against the stack let's go to the actual components and then the only component that we've actually got with inside our application at the moment is this bottom navigation component just select that and you'll see there this position nicely at the top so that's not where we want it we obviously want it at the bottom so how do we do that well with the navigation bar so the navigation component selected we want to choose the alignment option so just choose the little middle bottom there just choose that and you'll see now that it sits quite nicely at the bottom brilliant I mean that's that's the perfect position that's that's where we want it and you can see now previously I was talking about the kind of the padding here with inside a component it's just allowed this to sort of just sort of hang off the edge there I think it's about 24 pixels is what I think we originally said it at um but you can see here now they just kind of just sits nicely around the edges here and just sort of floats which is the effect that we're actually looking for so what we can do is let's quickly now run this actually up with inside the uh the actual test mode here let's see what that looks like okay so there we are now in test mode you can see now that this looks quite nicely here we've actually got the the navigation component that's kind of sat now at the bottom there there's a few things we're going to need to do to this we're going to see the go back to the component we need to do a little bit more sort of alignment there with our actual icons but it's certainly coming together really really nicely here um of course if I now select one of these we're now going to navigate to another page but we haven't actually put the component on those particular pages so of course we're just going to end up with a blank page but pretty well much we're in a good position let's go back to flutter flow now let's start adding this into all of the other pages and start getting the selected page index set up as well so let's go and do that now so before we do move on to the other Pages what I'm going to do is I'm actually going to set the selected page index of this particular component on the home page now I know that we provided a default value to it with inside the actual component itself but it's probably good practice here to make sure that we actually set the the actual proper value within each of the pages so we're just going to select the selected page indexes one there what we're now going to do is we're now going to move over to the actual uh let's say the notes page which is going to be our second page and let's now do what we did before let's just go to the page content container let's just right click on that say wrap widget say stack just as we did before just going to collapse that down hit the little Plus on the stack go to the components option choose the bottom navigation component and of course with that selected just choose the little box there so it's down the bottom and just for good measure I'm just going to now choose this as number two here so that's now giving it the page index of two I'm now just going to go through the profile page and the settings page and I'm going to do exactly the same thing but of course I'm I'm going to set the page indexes three and four respectively so I'm just going to save the time I'm going to go and do that now okay so I've gone through all the pages and set that let's now go to test mode here let's just do an instant reload let's see what this looks like and hopefully we should be able to navigate through all of our pages and we should see everything working so there's the home page selected just choose the notes page that's great that looks good and the profile and now the settings excellent so you can see here that everything is working really really nicely we've got a little animation playing and all of our pages are being selected that's fantastic you've got a bit of a an issue here with the alignment it's probably because we haven't set the uh the column uh to be slightly uh sort of small centered like we can go make that tweak in just a moment in fact let's go and do that now let's move back over to the actual application here and we can do that quite simply by going back into the bottom navigation component and I think it's probably because on our actual columns we've probably not set the uh the main access we need to actually choose the center let's just choose that and we need to do that for each of the actual columns themselves let's just go through and do that of course I could have selected all of them and done it in one so but let's just go through individually and do that that's great let's go back here let's do a quick instant reload okay excellent there we go everything is nicely centered so that's perfect so it looks like our navigation component is now all correctly Now set up how we want it there's one little tweak that we need to make as well because I think we didn't actually uh set the actual uh the actual hidden uh parameter to it so it's got no use whatsoever so we need to move back over to the floating navigation component itself which of course is the is the full thing we need to select the conditional visibility so just choose that here so what we're going to do is just going to choose this and we're going to go to conditions say single condition and we'll say the first value we're just going to say is the is it hidden and if it's equal to True uh it's actually we're going to say false actually just say confirm so we can now um You can actually hide and show this so if a hidden equals false then of course it will be displayed obviously if hidden equals true then it will be hidden and we can simply just uh probably test that let's go back to the actual home page itself let's go to the home page let's go to the actual navigation component itself let's actually mark it actually hidden here so if I now go back and do a Reload here on test mode so there we go so the actual is actually hidden itself of course so so that's of course if you ever want to use that with inside your actual own application depending on how you're using this you can actually now show and hide uh the actual navigation bar if you want but I'm just going to take that off because we want obviously make sure it's always there displayed so remember at the beginning of the video we talked about the actual on-screen keyboard causing a problem with our navigation component in that what will happen is when you use a like a text field that actually then displays the on-screen keyboard on a mobile device the actual navigation bar is going to still sit floating above the actual keyboard well how do we solve that well flutter flow makes it super easy for us to be able to hide the actual navigation bar if the on-screen keyboard is displayed and let me show you where that is currently set up so this is only going to apply to a screen that has actually got a text field on okay which in our case is going to be the profile page itself so you can see here we've got this text field here just as a sample now on this particular screen we're going to want to now set that up so just choose the navigation bar component we're going to move over to the conditional visibility just toggle that on we're just going to select it and we are going to move down to the global properties option just select that and we'll scroll down here and then they've got this wonderful option on here called is on-screen keyboard visible so just select that I'm just going to select it again because what I'm going to do is I'm actually going to apply the opposite here so we're going to say that if the on-screen keyboard is not visible then obviously we then want to show the actual navigation bar but as soon as the on-screen keyboard is there then clearly the navigation bar is going to disappear so I did demonstrate that at the beginning of the video so I'm just going to leave that as it is but that's one way to kind of hide and show the navigation bar which is exactly what we actually want in this particular application so also if you remember at the beginning of the video we were talking about this with inside the iOS simulator we're talking about the safe area so that's something that is really important of course with inside your own application so if you're building on mobile because obviously what you want to do is you want to make sure that your widgets your design of your page does not kind of get in the way here of the status bar now of course it depends on the type of application you're building but for the most part most applications sit quite nicely by giving the the this area this status bar area here plenty of room to actually breathe with inside the actual design so I'll show you where to set that very very shortly within flutterflow and of course down the bottom here we also talked earlier about this particular situation here is that when you are scrolling up you want to make sure that you have enough space between the kind of the last content item the bottom of the last content item to the bottom of your actual page here we want the navigation bar to kind of remain pretty well much on its own with the content sitting just above so I'm going to show you something very simple in the way that I resolve that with inside this particular application so let's head over to flutterflow now and I'll show you where I set all this stuff up okay so let's talk a little bit about safer area then so you can see here whenever you have a page selected here on the left hand side of inside your application the safe area toggle should remain on so if you create a brand new page in flutterflow you should automatically see the safe era toggle to be on so we highly recommend actually the to the most part most applications that you build chances are you'll always want to keep that switched on there could be a case where if you want to utilize the full screen estate for your application then you'll see you can then toggle that to be off and you'll see then any widgets that you design here at the top will get very very close if not they will go past underneath your actual status bar with inside your application so that is the safe area so just worth being aware of kind of what that means and then we also then talked about as well this particular scroll area here and making sure that we've actually got some distance between the last item in the list and the bottom here you can be really surprised on how simple this actually is now on the left hand side but inside the home page here I've got the page content column now this is the column that kind of contains all of the scrollable content and we know that because we on the right hand side here you can see that actually it's scrollable here so we can allow that column to be scrolling and then here you can see this just said it's primary now the magic happens um and this particular number here this is marked as a hundred now what this is this is 100 pixels from the bottom to then adjust above the actual uh navigation bar and then you can see there's a bit of a gap here so of course if I were now to remove this you'll find now that my content is now here and I've always load this now up into the test mode you'll find out I can't actually scroll my content above the actual navigation bar so I highly recommend that if you're using this in your own application that you obviously put enough space there on the end spacing just to make sure then that everything can then sit above the actual taskbar so hopefully I'll keep your users nice and happy so just a couple little bits I just wanted to quickly run by um just as we're moving on with the video so one final thing I want to do in this particular video is extend our navigation component to also support the ability to show an Administration icon should your application require to provide administrative level functionality to maybe individuals who have a role or or have permission to be able to do extra features with inside your application so what I've got here on the screen is I've got an app State variable called is administrator here is Boolean it's currently persisted as false and that's fine and it has a default value of a false okay so we know that it's going to be not available to our users should it be false so how do we now do that with inside our navigational bar component well it's really straightforward all we do is go back to the actual widget tree here we go back to the navigation component here and what we can now do is we can just go down to our settings here let's now just right click on this and say duplicate and I'm now just going to rename these now to admin so we quickly do that okay so I've just renamed everything up we just need to do a couple of bits as well I've also selected an actual icon as well itself so if you go to admin icon you can see I've called this one admin panel settings there so I've just selected that from the the available icons we've actually got in the system let's now just quickly go through now and let's just change the other little rules so let's just move up here we've got the selected page index is four we now need to make a change to that we now need to go to the value we're going to set this as 5 because it's going to be our fifth one just hit confirm and we also need to do the same thing as well for our little align that's below that so go to the conditional here select that let's Now set the value to be then five and hit confirm that is all good so there's one extra thing that we now need to do we now need to actually now choose a conditional visibility on the actual admin column itself so let's move over to the conditional option here just choose the conditional we're going to select the actual selection here we're going to say if and we're going to say single condition we can say the first value we're just going to choose the App State variable here so just select that and say is administrator and we're just going to quite simply say a true so we know now that if that value is then set as true then we're actually then going to see that particular icon with inside our display we just need to do one other thing we just need to make sure with the uh the actual icon button selected just choose that and of course we're going to navigate this then to the actual admin page itself so say navigate to and we're going to say the admin page and that everything else as you take the back off we don't need that that's all that we need to do so let's now now quickly test that out so how do we do that let's go back to the actual App State variable itself and we're going to now just toggle this option here to be actually true so it's going to be true by default so if I now go back into the uh to the actual uh to the and do a Reload here okay so now we are in test mode you can see here now that the actual icon has now displayed now of course we haven't added the actual navigation bar there to the actual admin page but just by simply selecting it you can see that we're now into this actual admin page but of course if you're following along then you can obviously add that that stack widget in and then add the actual navigation component in there itself so there you go hopefully you you enjoyed this walkthrough I know the community have been asking for some more design type tutorials um obviously I really really enjoy kind of the whole kind of walk through and sort of building something up that is um going to be hopefully beneficial to you to use in your own applications now of course everybody's at different levels and experience of inside flutter flow so of course if you're a beginner or even if you're intermediate hopefully you found something of value in this particular video so of course my name is Steve on the digital Pro I'm a flutter flow Ambassador for Europe so um and oh of course and I've also voted an educator of the year for 23 24 so I'm super honored and super proud to have been recognized with inside the flood or flow community so uh so that's great and of course if you love these type of walkthrough videos please do subscribe to my channel and please do obviously like the video as well because if you like the video it gets out there to the masses with inside YouTube as well and it also encourages me to create so much more content for my channel so uh yeah so hopefully I'll see you guys in the next video where we'll hopefully do some more of this kind of stuff and of course if you like it please do add your comments in the description as well because I'd love to hear from you as well so until the next video I'll see you soon [Music] foreign [Music]

Channel: The Digital Pro's NoCode Academy

Views: 7,587

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, flutterflow custom nav bar, flutterflow build, custom navigation bar, navigation, navigation bar

Id: hzxyOb9AVfQ

Length: 46min 39sec (2799 seconds)

Published: Mon Sep 25 2023