Building a Navbar Action Button in #FlutterFlow - Full walkthrough

now you've may have seen one of my previous videos where we created this custom navigation bar component with inside of flood oflow it was just nice to do something a little bit different than using the standard Navar that you tend to have with inside flood oflow and of course the great thing about this is you can customize this to however you like to match the style of your application now we're going to take this one step further in this particular video because I'm actually now going to add in this new plus option now which is going to appear in the center of the Navar let me demonstrate so as you know we can click between these particular Pages which is quite nice and we can obviously see a little indicator that sits underneath to tell us which page we're on but if we go to the little notes page you'll see I've got this lovely little animated plus button that kind of appears with inside the center of the nav and of course I can then click away and it disappears go back to that so of course the use case here is is very very uh flexible because this is the very very common setup that you see in quite a lot of mobile applications of course I can now just hit the little plus and it comes up a little dialogue here but of course that could be anything in your application it could be a form it could be another component it could be however you would like to use it so in this particular video we're going to walk through and I'll show you how to customize the original navbar with these new additions which hopefully you'll find really interesting so let's get [Music] cracking okay so before we actually get into the customization of this component let me talk to you about a couple of bits that's going to be quite important firstly I highly recommend if you are implementing this with inside your own application that actually you keep your options e even on the left or the right hand side it doesn't work very well with an odd number of options in this case here it wouldn't work particularly well because my plus is either going to be here or it's going to be here and it's just going to look completely unbalanced within the user interface so what I'm going to do here is I'm going to drop and get rid of the administration option here on the right hand side which means I've got two on the right and two on the left which gives me a plenty of opportunity to actually put this little plus option in and remember the the plus option doesn't have to be available on every single page we are going to provide a component uh parameter which you can set to either turn this thing off or turn it on so um watch shortly where we'll Implement that the other part of this particular video we're going to use callbacks okay so I've not covered callbacks too much on previous videos but they are really really important they have a really valid use case with inside flood flow itself we're going to touch on it very briefly in this particular video but there'll be another video on my channel where I actually talk a little bit more about callbacks and how important they are to your flood oflow application so certainly go and check that video as well okay so we're now ready to go let's start with the customization and let's move into the next beted okay then so let's move down here let's just get to the actual component in the question here the bottom navigation bar component here we are so this is what we had previously now let me just scroll down here let's choose the admin column and let's just select that and just delete that we don't actually need that so there is our four options okay so let's just collapse all of this this here we can keep that nice and tidy now what we need to do is we're going to need to actually float this option actually on top of the actual navigation bar sort of container here so what we're going to do is we're just going to right click here we're going to wrap the widget and we're going to put it into a stack okay so of course visually you're not going to see anything here and that basically now allows us now to put some additional widgets with inside the stack now of course the more that you add in here then the more they overlay actually here with inside the actual display itself so what we need to do is we need to actually add in a uh like another container here that's going to kind of represent the kind of the more circular look to the plus and of course inside that we're going to put an icon button in there as well so let's now just uh click on the little plus here let's have a look here let's just choose container here it is it looks pretty ugly as it is but we need to make some changes to it so the first thing that we're going to do is we're just going to choose the uh the circular shape here so let's just turn that circular here we're going to change the diameter here let's try a 70 here I think that's a pretty good size let's change the fill color here to be our primary color of course because we want it to support the kind of the light and dark mode theme that we got inside our application there we go we don't have any border we're not really interested in that let's just scroll down here what else we got here so we are going to put a a box sort of Shadow on so let's just choose that here you can't quite see it with here but it's now just kind of shadowed here let's have a look here the options 402 are quite nice we'll keep those as it is and we're also going to do a gradient as well so we're going to give it a little bit of texture to the actual fill color itself so um I think these colors here are actually pretty good the primary color there and then the secondary that's nice with the transition yeah that's great so we've kind of got this very very subtle kind of gradient that appears and you'll see how that will actually then separate just slightly from the actual color of the actual kind of the the the navigation bar itself okay which would be quite nice okay so the next option that what we need to is we need to sort the alignment out you can see here it's on the left hand side all I simply need to do is just hit this little option here if I just choose that you can see now that it just sits nicely centered that's great and but we're going to want to push it up we we're going to want to bring it above the actual the actual container itself of the navigation bar now all we need to Simply do here is put some padding in there ourselves so we're just going to put 32 and that's now just going to move it up there of course don't worry too much about the clash of the icons that there moment we'll sort that out in a second as we'll put another widget to kind of push those particular icons to the left and to the right okay so let's now give our container a number here so let's just go to the top here let's just give our our container name so we're going to call this Central uh button container just like that that's good just gives it a good name here now we need to press a little plus here now because we're now going to choose and actually add in a an actual icon button so if I just do a search here and we have an icon button let's just add that now that's going to look pretty ugly to start off with so we need to make some changes here to the actual properties that we've got so let's change the button size here down to 10 like that the fill color here we can actually get rid of these actually we don't need this so just clear that we don't need any Borders or any fill colors or anything like that that's good take the Border width just hit that zero here and then the Border radius here we can just keep as 20 that's good so we've got a A plus icon in here by default that's okay but perhaps what we want to do we want to increase the size of the icon just make it a little bit bigger and then on the icon color let's just select that and let's CH choose our custom color here of primary button text then we've got our we've got pretty well much how we actually want it so we need to also change the button hover style as well so of course this is as you hover the mouse actually over the button we want it to kind of be more in keeping with the rest of the actual icons here to the left and to the right of course if we don't set this then we're going to get this probably much lighter color which we we actually don't want by default so with the fill color itself we just need to choose the secondary color here that's all that we need to do so icon color just remains exactly the same so that's pretty good um I'm just wondering whether yeah no the plus icon is okay I mean of course you can change your icon to whatever you want it could be like a little edit option or something like that but in this particular example I'm going to choose a plus icon itself so let's Now quickly just go and change the name of this now so I'm going to call this a central icon button just like that it's always good practice to name your widgets okay so some finally then to conclude the kind of the main customization to the UI we now need to kind of space these particular icons out that's really really simple of inside FL oflow let's just drop the actual the actual row down here let's just collapse all of these up here you can see here here's the the four options I've got so what we want is we want to try and put something in the middle here between the note column and the profile column to kind of push our icons out to the left and to the right how easy is that well really simple you just need to press the little plus here and if we now just scroll down here you've got this option for a spacer so just choose a spacer and all I got to do is just drag this up into between the note and the actual profile just make sure when you're holding the left Mouse button down that it goes purple just drop that in and you can see now when I click away that's now nicely positioned in the middle and it's just pushed everything out so that's perfect we actually don't need to make any more cosmetic changes to the UI at this particular stage and in fact there is one thing we do need to change actually let's just go to the actual container itself now if I was to actually run this up right now and I was to actually hold my left Mouse Buton button down on this actual button what will actually happen is is that the the the kind of the material look that it kind of expands out that kind of selector will kind of overlap it will kind of go outside of the actual container here so what we need to do is we need to kind of constrain that we don't want that to kind of go outside so we can just clip it so the way that we do that if we choose a central button container there is an option down here if I can find it here saying clip content all we need to do is just turn that on that's all that we need to do so that will just mean that we'll get that nice kind of fluid expand expansion but it won't actually come outside of that container itself it kind of keep it really inke keeping inside so that's what that particular option does so that's it so um let's quickly just run this up with inside the test mode Let's see what this looks like before moving on to the next bit okay so here we are then in test mode as you can see here this is nicely presented of course it's not going to make any changes here as I move through but you can see now if I just hold and just hover over there you see you're getting the right same color as you're getting there but if I actually just hold that over you can just see that look that you kind of get behind now let me just quickly show you actually why we're here what that um actually means if I didn't actually clip that because I did explain it but let's just demonstrate it it's probably a better option if I just now take that clip content off and go back and just do a Reload okay so here we go if I just hover over ah you can see if I just hover over this you can see that it kind of just looks like it's just overlapping the actual container itself so that's exactly what that does so I'm just going to go back and quickly turn that back on there there we go so that's what it does so let's now move on to the next [Music] bit okay so next up we now need to add a component parameter and now of course we're going to want to turn this button on and off so let's now create a property to cover that so just choose the bottom navigation component here up the top right here you got your component parameters just hit the little edit option here choose add parameter and in the parameter name all you need to do is say show Center control button like that and the type is going to be a Boolean so I just choose that it's going to I'm going to turn the required off but I'm just going to choose the default parameter to be false so by double actually doing the toggle and it goes red then you know it's going to be false by default so basically it's just not going to display make sure you hit the confirm button here to save your parameters now what we need to do is we now need to add some visibility now around this particular button so all that we need to do is we need to go over to the central button container of course is not the icon button it's the actual container itself we're just going to go up to the visibility option choose conditional we're going to select this and we're going to now put this condition on if that value is set as true then obviously we're going to want to then display so just choose conditions choose a single condition and the first value here I just need to select that and it's going to be the component parameter of show Central button and if that is equal to therefore true we know that's going to display now what we also need to do though is we need to actually copy this conditional statement because we need to also apply it to the spacer so if I now just go back up here and I just choose this option here and choose copy variable I then can go over to the actual spacer itself I can then go up to the conditional visibility option just toggle that on select where it says unset and the Little P that sits up here just say paste variable and say confirm and then that will get the same behavior as well so if we set that property with inside our component parameters which is going to be on the actual Pages themselves then we can set that to be true or false and they'll both forget then give them that conditional visibility okay so let's now enable this option now with inside our actual pages so if I move over to the actual homepage here now obviously with inside the actual UI display here you can see that it gets displayed regardless but of course when we actually run this up then we know on this particular page this won't be visible but let's go over to the notes page itself let's select the bottom navigation bar component and then let's go over to the actual properties here and you can see this option here called show Central button just hit the little tick there now that means now when I run this up hopefully it's just going to be the notes page is actually going to show this option so let's now find this up in test mode and let's have a look okay so there we are now in test mode Let's choose the notes option here and there it is there is our plus button all nicely displayed that is great now of course the button doesn't do anything at the moment so we're going to come back and sort that out in just a moment but the good thing is is it demonstrates that it you can independently now turn this on across all the different p Pages where you've actually got the navigation bar components set so let's now move on to next bit okay so we now need to give some functionality to the actual plus button itself and we're going to want to apply that functionality within each of the actual paent Pages themselves so how do we do that how do we actually tell a component to actually execute the action that we're actually applying to the actual component parameter well let me walk you through that pretty slowly the first thing we're going to do is actually create that component parameter so let's move over to the actual bottom navigation bar component again let's just choose the bottom navigation component at the top here let's go back to component parameters and we now need to add a new one in there just hit the little edit option so I'm going to create one called ontap Central button just like that okay so it's just representing that on tap okay I'm going to choose my type here and I'm going to choose an actual action and I'm just going to take the required field off there okay so that's um that's now applied that property type just just hit confirm now that won't obviously mean anything at this particular stage because of course it won't actually do anything until we actually invoke that actual action with inside our button itself so what we need to do is we are going to pass in an action from our parent page actually as a input parameter actually into this particular component what we need to do is we actually then need to we inside the central button is when we actually press the plus we need to actually then invoke that action that's being passed in into the actual component okay and the way that we do that is really simple one action block needed with inside flood oflow you just click on the actions here obviously this is the button that we got selected choose add action now if I go down here and choose the utilities here uh let's just scroll down you've got this one that called execute callback if you just choose execute callback we can then choose the actual callback that we need to actually make so here we're just going to choose ontap Central button that's fantastic and of course if we were to open up the action flow editor we can add in of course more um kind of actions before we actually execute that callback so K it really depends on what you're actually doing with inside that particular component but I'm just simply just going to execute that callback straight away so just hit close so that's now going to call back to our parent page and it's going to it's going to invoke the actual action but how do you pass the action in well really simple if we go back to the actual notes page itself if I now go to the bottom navigation component you'll see here that we've got a an actual action flow editor option here now available to us we can actually click on the open and here we got this is just the traditional place that you would Define action so all I'm simply going to do here is choose add action and I'm just going to go up here and say show and I'm just going to show this information dialogue box and I'm just going to I'm just going to put up in here message and I'm just going to put the word hello and just choose close on that that's all that we need to do now if I quickly go back to test mode and run this now okay so I just need to press the little notes option here hit the little plus and then there we go our action is now called from our parent page of course you can do whatever you like and whatever use case you you've got in terms of adding the plus option onto either one page or a variety of pages you have the option to independently add in actions that's going to get inv vokes from that plus button so let's apply a few additional UI tweaks then um let's start with an animation why not let's put an animation on our plus button so every time is displayed on a page we just want to put a very subtle animation to then bring it from the bottom just to the top only very very slightly the way we do that really simply with inside flat oflow go back to the B bottom navigation bar component of course choose the actual container this is obviously the whole surround that we want to have animated not just the actual icon button itself move over to the animations here let's on the page load so of course as soon as it gets displayed of inside the UI we're going to want to carry out this animation every time hit add animation and we are going to add a little slide in so just choose slide we're just going to bring it very subtly up um from the bottom here now we just need to move down here to these particular settings so we're just going to choose a four here as it starting position so it's just slightly below where it is at the moment I'm just going to choose the apply same duration okay and we're just going to change this to 400 because at the same time we're also going to do a very very subtle fade okay so what's let's just move down to add animation here let's just choose that one so we're going to do a fade here uh we're probably going to keep this as is actually I think just on the zero and one yeah I think we're going to bring it completely uh whereas it's completely transparent through to one here now if I just preview this you can just see it just subtly comes up here from the bottom that's quite nice let's move just over to test mode Let's just try that out let's just do a Reload here before our session time's out okay so let's choose the notes option here and you can just see there that just slowly floats up from the bottom which is really really nice little animation of course you do animation on these buttons if you wanted to if you really wanted to go to town with your animations you can obviously animate all of these as well but um I think it's just quite nice to have that little plus option that gets displayed so just have one little tweak we need to make why we're here we've got the actual visibility here of the actual hole of the actual navigation Buton of course we've added in a stack now of course so it's probably going to be a good idea to remove the visibility condition from here and move it to the actual stack itself because at the moment it's only applying to the actual floating navigation container so what we need to do is is just go over to the actual conditional here just show that just select that let's just hit the copy variable option here let's just quickly then remove that and let's go to the actual stack itself here let's go to conditional and let's just select this and then paste it in here and just hit confirm then it means it's applied there in fact we still got the need to toggle that off as well we don't want that there so there we go so that's now nicely now in keeping now with the the ho of the application if we were to actually now hide the actual component and if you remember back to the previous video where we actually built the actual navigation bar component of course you have this option to actually hide the thing itself here by just choosing the little hidden option so of course that means it's now completely now hidden and not just uh doing the actual container itself so that's pretty well much the UI tweets we need to [Music] make

Channel: The Digital Pro's NoCode Academy

Views: 4,436

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: zdr9XMBY1x4

Length: 19min 29sec (1169 seconds)

Published: Mon Oct 09 2023