Flutter UI - The Navigation Drawer

welcome back in this video we will have a look at the navigation drawer so if we go down on this page you can go to material i o components navigation draw flutter anatomy so if we look at the anatomy of a navigation drawer by the way this is what we'll create in this lesson so we'll create a navigation drawer so that's that little three lines there on the left hand side and if you click on them it opens up your navigation drawer so in this case you can see that we've got a drawer header there so that's the first part there number one they say is the container so that's the thing that contains this whole navigation bar and then there's a header which is optional the spot there so our header will have this picture in the background with a name and an email address with a picture and then at the bottom we've got a list of items so you can see that there's also a divider so i'm not placing a divider in this example of us right at the top there but you will see there's two dividers at the bottom so we'll look at the dividers also but because i have a picture there it's already dividing the picture part with the list part of the items then when we get to the items you can see there's an active text overlay so it's this purple part and you can see in our example we'll have that blue part if i click on start you can see it opens up that page for start and you can see start is now selected if i click on drafts you'll see the drafts page opening up and that one is selected so it's this overlay or that background color for that specific tile and then if you go down also you have these text that is actually not selected so we talk about active text so this one is active text where you can see here also the drafts and the icon is blue that's the active text and then you've got this active text overlay which is the background there that background blue color and then you can also get your inactive text which is the rest so that's like synth start and inbox now it's inactive text they all look the same so you can clearly identify which one has been clicked then also we've got subtitle and so forth but we will not do a subtitle and the rest in here so the subtitle you can just use as a subtitle of this list style so i'm using list styles here and there's a subtitle property for a list style if you want to do something like this we're not going to do it here but just note that you are able to do that you can even have a simple text view or text the text widget as an example also so that you can have some labels there and use normal tiles then from there on fourth right so that's just a quick introduction for your navigation drawer so i'm going to close this down and i want you to go to the following webpage so you're going to go to http or just type in bit.ly forward slash nav drawer rss and make sure about the spelling there so this is the resources that we're going to use for today's lesson and you'll get this zip file that looks like this and you're going to download that zip file there just make sure you download it and let's show it open it up in the folder i'm going to close down the web page and there we are with the navigation draw a zip file i'm going to extract this so let's say extract all and extract it i'm going to double click this and i will need the assets and the defaults folder so we'll come back to this just going to keep them open so we'll come back and we're going to copy the assets folder as well as the defaults folder in here so what i want to do first or what you need to do first is go into visual studio code and create a new blank application so i called my navigation drawer video so you'll need to go to view command palette new application project select where you want it and then give it a name so remember all lower case navigation draw a video or whatever you want to name it so this is then our file structure basic structure that gets created as soon as you create a new project so into that structure i want you to go and paste these folders so the first folder we're going to paste is the assets folder so i'm going to copy the assets folder i'm going to go to where i've got my project there's my navigation drawer video i'm going to go into it and the assets folder i want to have directly in the root so make sure you paste it there then when i go back to my downloads and i go to my defaults folder you're going to copy that defaults folder again go to where your project is saved into the project folder and under the lib folder i'm going to paste this defaults so under defaults you'll see there's a default dot and we'll go through that now okay so that's basically all you needed to do is to paste that assets folder where we've got some images these two images that we're going to use and you can see this is where i'm using them as the profile picture there as well as the background there so make sure you get those too then also in your lib folder under defaults that default.file we'll look at that now okay so we can close down and let's see what we have now in those two folders so you can see them there's the defaults folder we've got defaults.dot so if i look at the defaults.dot we will basically be having a draw item color and a draw item selected color so if you look at this the drawer item color will be this gray color there the blue gray and then when it is selected we're going to use the colors.blue with a shade of 700 and that's the color that we're using here and also as part of this defaults class we've got a static final draw item text and that's a list of just string values inbox starts in draft spam and you can see that's the names for the items we have listed here and then the corresponding inbox star send mail delete warning icons so these icons is the icons that's listed on the left hand side so we're going to use this defaults.dot to refer back to it in order to get all of these icons that we want to use as well as the colors that we're going to use right so now that that is set up let's go to our main dot dot and let's just clean up some of this that was defaultly added for us so i'm going to delete all of this so let's leave that one as my app and we're going to create a stateless widget and let's call this one my app so it directly goes from run app to my app and that's the one that we want so remember that we should start off with a material app and that gives me all of the material design features that we need so i'm going to start with material app and the material app has got a home and that home property is where we want to start off with so for this home property i'm going to call this one main page and just put the comma there now we do not have main page yet so in order to get main page let's just use a stateful widget i'm going to use a stateful widget and i'm going to call it main page and then everything should be fine okay so we're going to start off with the material app and the home will be the main page now the reason why i do this and this should be the structure then for all of your applications is that you just have the home property as a specific class that links to and i can even have this main page now in its own file and the reason behind this is so that inside of your initial app that you run you only have basically the material app and all of its settings and you can see there's a lot of settings there there's uh initial route and when we get to routes and adding the routes and so forth we will get to this you can also set themes and titles and colors and stuff like that and all of that will be part of this my app but your homepod should be on its own so for now i'm going to leave it inside of this class but probably for your own apps as you get designing bigger apps you will put it in their own files okay so when i get to the main page then you can see it's a stateful widget so we have the state class there that's called underscore main page state which is private and this is actually where we will start so the first thing i want to do before i actually start with anything else is to just go and set up this initial pages that we want to link to so let's say for example i click on inbox it needs to take me to this page called inbox and if i go to start it needs to go to this one okay so in order to do that i'm just going to keep it very simple and we will have a index variable declared outside of the classes so it's going to be a global variable called index clicked and i'm going to set that initially to zero so you can see it's out of side of my main it's outside of my app it's outside of main page it's a global variable called item or index clicked and you'll see later on why i did that it's because we're going to use it in another class not just in main page right so inside of your state class there just above your build method let's go and create these pages that we will need so i'm going to call this final pages and it's going to be a list of widgets sorry just the equal sign there so it's going to be a list of widgets and this widget can be anything so i'm going to keep it very simple because we are not building a page here we're just looking at the navigation so i'm going to start with the center widget and the child for the center widget will be a text widget and that text widget will start off with the first page being inbox let me just save this quickly so let's run this and then we can see the output on the screen right and there we've got the output doesn't look like anything yet so we will look at that now so i'm going to start off here with a scaffold so remember that we normally start with the scavel scaffold so that we can have an app body let's say app bar and for the app bar i'm just going to set a title and let's use a text widget there for the title and we can say navigation bar example and let's save that and at least we can now see something on the screen okay so after that i'm just going to place a comma so it's nicely formatted and then after the app bar we normally have the body now the body i'm gonna set as the following so the body will refer to these pages at the specific index that's clicked so i'm gonna say index clicked and put the comma there and if i save you will see there's the text widget the very first one inbox is right in the middle of the screen so this center widget now could be anything you could have a column with different rows in it or whatever so just this is just an example to actually take us to just something very basic so we'll have inbox there will be a few i think there's five of them okay so the first one is inbox the second one will be start the third one will be sent this one will be drafts this one will be trash and then there's another last one which is spam okay so remember that we are basically setting this center widget with the text new remember this is basically what we started with when we started flutter as we started with a center widget with some text in the middle of the screen and that will be your body depending on what page you selected here so if i make this index clicked a 2 and i run this again then we will see synced as the text with text widget they centered in the middle of the screen so it's a very basic but remember these pages could be very very big you can even have them in their own classes and refer to them here to go to their own classes also for these specific pages right so i'm going to go back to the index clicked as 0 and save that which i will not see the change unless i rerun this okay so there we go get inbox again okay so remember when we save only the bold method gets rebuild and that's why this index clicked did not change so nothing else changed so just remember that okay so in the scaffold we've got an app bar and we've got the text widget now and there's the body now the new thing that we're going to do for today is called the drawer so for the drawer we will have the a class also as the draw that moves in from the left or from the right so by the way you're going to do exactly the same thing if you look at your scaffold and you look at the drawer you will see there's an end drawer and there's a drawer so the drawer that we're going to build now comes in from the left to the right so if you change that drawer to enter draw your drawer will come in from the right hand side to the left no other changes in coding you need it you just change this drawer here to an end drawer and then it will come in from the other side so that's up to you right so let's look at the drawer quickly okay now because we need to actually build the top part which has got that two pictures let's just go to the pubspec.yaml and make sure that we've actually got everything we need so at the bottom you'll see there's the assets so make sure you go into this assets part there use your control forward slash and let's set up the assets quickly so basically what we're going to do is to say we've got an images or we've got an assets folder inside the assets folder we've got an images folder and because there's more than one image i can actually just say assets slash images slash and it should include everything for me if you've got problems with that not including then you can go and list them individually so just saying assets images so there it is under assets there's an images folder it must include these so very important on that and then we can also go and say let's use the google fonts again and i think google fonts are still at 2.0.0 okay so let's just save this one quickly and that should add your google fonts package also so we can use those fonts and it also includes your assets and everything seems fine right so let's go into the drawer so our images on our part of our application we've got direct access to them let's go into the drawer and for the child of this drawer i'm going to use a column now if you look at the drawer there's not a lot of settings but there's an elevation which i'm going to leave at 16 and that's just how high it is from the screen or how high it seems from the screen so you can change the elevation there if you wanted to the child is important so the child is the column that we will use now for this column there will be some children and i'm going to start off right from the start i'm going to set the cross axis alignment to cross axis alignment dot stretch to make sure that our picture is spanning the whole drawer there so let's go into the children and we will start building the drawer header so it's just a widget called draw header and if you hover over it there's a lot of things that you can see and you see there the child parameter is required which means we need to have the child day so we will get to the child now if we actually save now you will see that the three lines there and if i click on it it opens up my navigation drawer so you can see your navigation drawer is already working and it's opening up by just doing this actually just adding drawer there now let's go into the drawer there's a few things we need to change here i'm going to start with the decoration i'm going to use a box decoration where we previously used colors and maybe change the rounded corners and stuff like that for now i'm going to use an image there for the decoration so that will be my background image so i'm going to use a decoration image and that decoration image just remember your commas at the end for that decoration image i'm going to set it to fit boxfit dot full so it fills the whole area and then we need to specify the image that we want to use so i'm going to use the asset image and that image we will find under assets slash images slash now if you look at your assets folder i want to use this draw.jpg so i will say drawer dot jpeg now let's see if it if it actually will do it without that required argument there so nothing there okay so we'll get to that now right so after this decoration then i'm going to remove the padding so i'm going to say edge insets dot if you can use 0 you can use the 0 otherwise you can say dot all and just put in the 0 there that will also do the same thing and then after the padding let's start off with the child and the child i want to use here will in fact be a container right so inside of this container i'm going to have a column as the child for this column we will have children let's start off with a circle avatar now for the circle avatar we will have a radius of 40 and we will have a background image and the background image will be an asset image and this asset image will be under assets slash images and you can see we want to use that profile so i'm going to say profile dot jpg okay so now that we've got it rerun yes now we can see the background picture there as well as the circle avatar so maybe in front of that circle avatar let's use a size box just to create some space and i'm going to set the height as let's say 10 and save that just to bring your picture down a bit so you'll see this gray part at the top there or the faded part there is actually your notification bar it's this this bar that gives you these icons there so it's the notification bar and we want to have it just a bit down from that this is actually the system user interface that's crashing it's not the app okay so if i click there now i can see the circle avatar and now we can add some text there at the bottom okay so we started off with the draw header inside of the header we added a decoration which is the image and that is the image at the background okay and we set it to full and we added some padding or actually removed the padding so let's see when what happens if i actually leave the padding there and i save this not a big difference so maybe you would would have liked that but i like to remove the padding and change everything on my own okay and then the child is a container we start off with a column there's a size box with a height of 10 and then we've got the circle avatar with a radius of 40. so if you wanted to have that a bit bigger to see a bit more of the picture you can also do that so i'm going to leave mine at let's say 42 no that's fine okay and then that's the background image for the circle avatar and now underneath that we can go and add our text widgets so i just want to add some space there again after this circle avatar so let's say a space of 10 again and then we can add a text widget right so the text widget now let's just add some text there let's say it's going to be john rambo and the style there i want to make use of google fonts so make sure you click on it so it imports at the top so you can see at the top it's been imported so i'm going to say google fonts dot and let's use sanchez for this one okay so there's my google fonts it's we're using sanchez by the way if google fonts was not imported at the top you can just use control dot and then the import statement should also be here okay so google fonts sanchez let's make some styling changes there let's say first so nicely formats and let's add the styling there so let's say something like the font size should be 15. we want to have the color to be colors dot white you can see there the john rambo there is black so it doesn't look nice there on on the dark uh picture so let's make it white and we can use the font weight to be font weight let's go with a 400d save it with the comma and save that looks fine okay and then underneath that we will have another sized box so let me just go after that text widget we'll have another size box maybe not 10 let's use the half of that so let's use five and then i'm going to use this exact same text widget again looks a lot the same just a few styling gear in there so instead of saying john rambo let's give him an email address there so it's going to be john rambo.com and for this one let's make the font size a 10 and let's save right so that seems fine so this could be your top part and just remember that you can actually [Music] take this to the left so remember in your column for example you can go and say the cross access alignment should be let's say at the start and if you save everything will move to the left and then you can just add some padding to this column on the left and you can move it in and everything's on the left and you can even use a row year now to do something else there so your options is is not limited to what i'm doing here so for our example we'll have it right in the middle and then we will have our items now listed okay so in this column we've got this that's all part of the drawer header so after the drawer header is where we can start now with our items right now so for our items i'm going to use a list view here so i'm going to say list view and the reason why i'm using a list view is so that if there is too many items listed here and the phone is a bit smaller let's say you've got a smaller phone that only goes up until there the height of the phone is not as high as this one then some of your items could cut off and then it's easy to then just scroll to get those items so basically what we're doing now is we are making this header fixed so it stays there it's always the same size but you will be able to scroll through everything underneath it and that's the list to you so you can also use the list view dot builder there but using the listview.builder you could run into a problem on adding those dividers at the end so it's up to you whether you're going to use the boulder method because we are actually using if i just open up the defaults quickly because we're using lists your builder works perfectly as well because you can just use the index and build the items from there so yes your listview.builder will work but for this example i'm going to work with a normal list view so that we can add those dividers at the end and like the example we did with the app name and the version number and stuff like that so normally your items inside of your navigation drawer will never change so to make them in a normal list view is not that bad now the first thing i'm going to do for this list view is actually to remove the padding for the list view so i'm going to say edge insets dot zero and i'll show you later on if we comment this out the effect that it will have on your list view then we will have some children and the children will now all be list tiles so i'm going to use a list style there and now if you hover over the list style you will see that it's got a leading widget it's got a title widget so for the leading widget we'll have the icon for the title widget we'll have the text and then you can also see there's a subtitle so in the web page you've seen that there was a subtitle there so you can use the subtitle for that little grayed out type of text there and there's also trailing so if you wanted to add a widget right at the end you can also do that so for the list style then let's add the leading widget so the leading widget will be an icon and this icon i'm going to refer to my defaults so it's this file there this defaults to dot because there's the icons listed and i want to use that first one the first index day okay so i'm going to say the leading icon should be defaults and it's better if you can choose that from the list because then at all to import and then i can use the draw item icon and at this stage i'm just going to set it to zero there so we can see something happening on the screen now when you save you can see that actually nothing is showing so if we quickly go and have a look at what is going on we will see there is a lot of errors actually happening now and it says the vertical viewport was given an unbounded height which means that this list view of ours because it doesn't know how far it should go down we did not give it a height we just said you know you were part of this column but we did not specify how much space you can take up so if when you get or when you're using list views you can run into this error a lot so what i'm going to do here is i'm going to use the control hold down my control use the dot on it and i'm going to wrap it with a widget and the widget i'm going to call expanded so if i save this now you will see that the item appear and all of those errors are now gone so if we go just go back to the bottom you can see all of these are now gone right so now if i go back to this expanded widget what happened now expanded just means that for the rest of this column this list view can taper take up all of the available space so remember there's also for a expanded widget there's also a flex value that you can set the flex is normally one but because i'm only setting expanded on the list view it knows that all of the available space is available for the list view and the listview will take up the rest of the space okay so now we've got the leading widget there just put a comma there and save again so let's just go into this icon quickly and let's set the size also for this icon and let's make the size let's try a 30 maybe a 35 okay so let's say that's the size of this icon and that's the leading widget which is my icon and let's also set a color for this icon so the color will do something different here for the color i'm going to look at that index clicked if the index clicked is equal to zero in this case so we will change this later on so it makes a bit more sense and it actually works for reusing our code so let's say the index clicked is in fact a zero then i want to have the color for this icon to be defaults which is this defaults clause of alice and then there is an item selected color but if it's not zero then i'm going to go to defaults dot draw item color let me just save this quickly so what's happening now if we run this let's save you can see it's actually blue because it's currently selected it's index number 0. so if the index clicked is zero then the color will be the selected color which is the blue otherwise it will be the normal color so if i change this item select it at the top to be let's say a 1 and we rerun this you will see that color will change now so if i click on it you will see it changes okay so i'm going to leave it at a 0 there we'll see the change late on okay so this will come in effect a bit later on so we will we will look at that so the color will be based on when the indexes are clicked so if it's clicked it must be blue but if it's not clicked it must be that blue gray color and that's what we're doing here so we're setting the color based on the index that was clicked and if the index is zero which is the same as this one this is this is index number zero then we set the appropriate colors okay so after that icon we can set the title widget and for the title widget we will just have a normal text widget now where do we get the text again there's the text inbox start sent the same as with the icons so it's just another list there that we're using and it's called draw item text so for this text i'm going to actually use drawer which is defaults dot draw item text and also add this exact same index so if i save this now you will see it says inbox there so that is the index number zeros text which is inbox now let's just make some changes to this text so the second argument or the first argument must be the text and then the rest of the arguments is named arguments so for the text we can add just the style there so i'm going to use style again and we're going to use google fonts dot sanchez again right let's make some changes let's set the font size to a 20 let's see how that changes that looks fine let's set the font weight to font weight let's make it a 500 there put the comma save again that's fine and let's do the exact same thing with the color like we did for the icon so i'm going to take that whole color property there and i'm going to do exactly the same thing which means that that in inbox should also be blue now right so this seems as if it's working fine so now if i want to go to another list style i will need to have to copy this whole thing copy it and i'm going to paste it and the only thing i need to do is to change the index value here so if the index is one and make it one everywhere and there also make it one and i save it ah there you can see they start that's index number one and i can do the exact same thing again so i can copy this list style again and paste it again and so it will go down and because the item clicked property there right at the top is the zero it means that only the first one will actually be blue and the rest will all be gray so as part of the list style also if you hover over it you will see there's some functions inside of a list style that helps you to let me just quickly get there there's a function called ontap and that's what happens when you click this list style so let's go to the first one and we use the ontap property there and we quickly say what should happen when we click it so for this list style which is at position zero if you click click this one i want to call set state and i actually want to change the value for index clicked so let's just go back there so i'm going to say index clicked should now be have the value of the index that we're currently in and we are currently at index number zero so the index clicked should change to zero i'm just going to copy this part let's just copy this hole on tap i'm going to copy that and i'm going to do it for this list style also and this time it's going to go to 1. so let's save it quickly and let's see what happens if i click there this one becomes blue if i click there that one is blue so yes it's working another thing that we also want to do is if we clicked on inbox this whole drawer should actually disappear so how do we do that so inside of the same method maybe outside of the set state all right so what we'll need is navigator dot pop now we'll get to talking about this navigator class which will help us to move between classes and so forth but for now just know that this line of coding navigator.pop will basically just pop off the previous context in this case it is this navigation drawer that we're actually closing so this line is closing my navigation drawer so i'm going to use it in that tile and also in this style for these two and if i save now if i click on start it closes but you can see start is selected if i click on inbox it closes but you can see inbox is selected now if i click on start can you see the start page actually opened up if i click on inbox inbox page actually opens up so why is that it's because the index clicked value changed and that means that when we set the body that index changed which means that it will choose from a different list of pages here or choose a different page depending on the value that you actually clicked so yes everything seems already if it's working quite fine but you can see that we will have a quite extensive expanded widget here within this or within the list view quite expanded set of widgets here that is actually very repetitive the only thing that changes everywhere is this index value actually and for the rest of it everything stays the same so instead of having this list style copied a few thousand times here so if you want to extract this widget now i'm gonna use the control and click on dot and i'm gonna say extract widget now for this widget let's call this one app drawer tile and we should get into a problem here so it says the reference to an enclosing clause method cannot be extracted so the problem here is this on tap of ours we cannot actually extract this whole on tap so what i'm going to do is i'm going to delete everything inside of this ontap let's just save it again and let's try and extract again so i'm going to extract the widget let's call it app draw a tile again and you can see now it extracted perfectly okay so let's just quickly talk about what we want inside of this app drawer tile of ours now so all of the repetitive code is now gone and it's just one line of coding but we will probably need to pass in something to this so we don't want to have this index as a one there obviously because it changes depending on which one is clicked so what we want to do there is to actually add a final int index and then inside of this we will say at required this dot index so we will definitely need to have the index there and we will also need to have a method so you can see we could not actually execute the method here so that method will also change if you look at your method there there's the method it will say set state and we will need to set the index value so again to set that index value to zero you'll need to have that index value also passed in now let's look at the following quickly if i start typing start typing set state here you will see that set state does not get picked up now let's go back i'm going to even copy it from here let's take that whole part there and let's paste it here you can see set state cannot be called in any other place then in fact inside of a state loss so you can see that this class extends state and only between this bracket and the bracket right at the end can you actually call set state you cannot call it d so this is becoming a problem for us which means that we will need to also pass in the function there so i'm going to use a function and for that function let's just call it i'm going to also make it final let's make that function call also on tap and then there as part of this function instead of doing the function year we will pass that up for the state class to provide the function for me so it's going to be on tap okay and then we will also just have it at required year and we're going to say this dot on tap so to this specific app drawer tile we will pass in an index and an ontap and both will be required and that's why you see this yellow underline there so we'll need to provide the index and the ontap ontap will go into the function of the list style and where do we want to have the index everywhere we have that one now we will use that index we've got the one there so i'm going to use the index there we've got the one there so i'm going to use the index d and we've got a one there so i'm going to use the index there so i'm going to pass in a 0 or a 1 or a 2 or a 3 and it's going to place the index value there the the and they so it's essentially the same as having 1d but now we can reuse it okay and that's basically it i think this should work so let's just check out this one so what we need what is required is in fact the index so this one is the second one the first one is there we can even change this one but we will do that now okay so we'll need an index and let's say the index for this one is a one and we'll also need the on tap which is a function that we want to do something and inside of that function i actually want to call this part there so let's copy it put it inside of that ontap and i want to say the index should be 1 and i should set that to a 1 there as well if it if it gets clicked and if i save it now let's see if it still works so if i go to start i get start and it's selected if i go to inbox i get inbox and it's selected so yes everything is now still working but i replaced basically this amount of lines of coding that whole part there with something that can just be done in a few lines of code okay so i'm going to do exactly the same thing for the top one so i'm going to copy this and let's replace this list style with our new list style and now you can see it's a lot smaller everything should still work except for the index should be zero for this one and we are going to set it to zero there as well right let's click it inbox showing inbox start showing start working perfectly just to make sure let's rerun it from scratch right so let's open it up inbox there's start inbox again everything seems to be working okay so now the question is if i look at this app drawer tile i can see that okay yes i need to pass in the index but this untap method even looks exactly the same except for that one simple value so how can we also reuse this or do something so that we don't need to type all of this every single time we're doing this app drawer tile so if you wanted to yes you can just copy and paste and add the rest but let's see if we cannot make this a bit shorter still so what i'm going to do there let me just take this whole method there so i'm going to take it from there up until there the whole anonymous method or function the whole anonymous function and i'm going to copy it and we're going to reuse it somewhere else so right at the top there let's do it underneath our pages there i'm going to declare a function now if you look at your ontap there you can see it it accepts a function right so let's go and we declare this as a function and we're going to call this let's say update state and the only thing i want to pass in is in fact an index again and that's the only thing that's changing and then i will just say return and i'm going to return that whole anonymous function and add a semicolon at the end and if you save everything should be fine so remember i'm able to call the set state within this bracket and where it closes which includes this function so i'm going to return changing the state of index clicked to whatever the index is that i'm going to actually pass in so that index will be changed then so then when we go down to the bottom instead of having on tap there we can now call this function called update state and just pause in the index so everything from there till there we can just replace with update state remember your comma at the end and passing in the index of zero so that's a bit shorter now so let me just copy that part and we're going to do it the same for this on tap and let's pass in the value of 1. so again the coding a bit shorter right so now if i click on start let's start if i click on inbox we see inbox okay and i think our coding or our code is now as short as it can be while still being efficient okay so this is how our whole app drawer tile and the method that we're passing in is the update state so you can use your control click on it it will take you to that method it takes in an index it changes the state and it closes your drawer okay so i think this is the shortest we'll get now let's copy the rest now so i'm going to take that paste it again paste it again paste it again so let me just see we're going to have 0 1 one two let's go to three four and five now let's save it and let's see right so we've got inbox start sent drafts trash and spam everything working as expected so let's look at that selected background color that we talked about also okay so we can go down to where we've got this app drawer tile because that's where we define it and how it looks so the icons will have that specific icon and we'll have the specific color depending on where it was clicked so we can also add for a list style if you hover over it you can see that there is a selected tile color that works with selected either true or false so you can see selected is defaultly false and then you can say a selected tile color so if you want to use this you're going to use both of these values select a tile color and select it okay so let's see if we can set the selected quickly how will we know that this specific inbox is now selected or if i click on drafts there how do i know it is selected well that will be if the index clicked in index that's currently clicked is equal to this index that was passed in so we have an index value that was passed in and if the index that's clicked is equal to the index that was passed in then we know the specific one was clicked so in effect i need to pass in a true or a false value there you can see initially it's false so if if the index clicked is then equal to index then it will return true and it will be selected right and then we can now use the selected tile color and the selected tile color will be colors dot blue and let's use a 100 there and because this is maybe a color that that or color that we could reuse i'm going to copy this and let's paste it inside of this one so let's say static final color and let's say drawer selected tile color and we're going to set that color so if we wanted to reuse that color we can we can do that so [Music] let me just use that one so it will be that specific value there inside of defaults dot okay there it is selected tile color and if i save it now you can see that drafts is actually now selected if i click on synced synth is with a blue background if i click on spam spam has got a blue background if i click on inbox again blue so maybe we want to have some space there from the end and or from the beginning and the end and to do that for this list style i'm going to add just use your control dot on it and we will wrap it with padding and let's use a double click that again a symmetric one this time and we set the horizontal padding to eight let's just save that again yeah that looks good so we can leave it at eight or you can make it a bit smaller so if i click on drafts drafts will be selected if i click on spam spam will be selected right well done for coming this far so let's do the last part we will add two dividers as well as two text switches there so in this list view remember we can just keep on adding on it so underneath this app drawer tile we can now start adding the other widget that we want we don't need to have all exactly the same widgets in this list view okay so let's start off with a size box just to get some space in between your divider as well as this list or this last list style and let's set the height to something like 30 we'll see now if it's if it's enough and then to add a divider you just add a divider that's as easy as it gets now for a divider you will see there's a few items that you can sit there you can set the height you can set the thickness of the line you can say if it needs to be indented so we'll look at those two now and you can set the color so let's start with the divider and we set the let's just set the height to let's say one let's set the thickness of it to a two let's set the color of it to our defaults which contains all of our colors and we're going to use let's say the draw item color now let's save now and you can see there's the line it seems a bit thick so let's make it a one and if you all hover over it you can see it's a double which means that you can go even lower to 0.2 or something like that if you want a really thin line so let's just go with with one there i think one will be fine okay let's make the height at 10. okay so you can just see it changes it just moved down a bit so i'm going to set the height as 1 that's fine the thickness is a 1 the color we've set now let's look at the indentations there so i can say indent 2 so if i save this you can see maybe two is too little let's make it a 20 just to see the change so you can see from the left hand side it's indented a bit so let's make that a three okay so just a small bit indented and then if you want to have the indentation on the right hand side also then that is the end indent so let's make that three also and save and you can see it's moved a bit from the side so actually let's just make this 30 and 30 and you can see on both sides it's the same so i'm gonna leave it at let's say three for now okay so that's our divider it looks fine we've got it giving it a height thickness a color and some indentation all right so let's add our size box there again after the divider just to get some space there and let's make this one a tin in height and then we will add the text widgets so let's add the text widget first let's say that text should be jet mail that's the name of the company that's making the app or maybe the app name or whatever you want to put there and let's use the style property there and use google fonts again dot let's use that same font sanchez again let's save okay so you can see it's set to the site so if you want to change that user control dot on the text widget and wrap it with the center if we save nicely in the middle of the screen okay let's style this text quickly let's set the font weight to a font weight dot 500 let's set the font style to a font style dot italic let's set the font size to a 20 and let's set the color to defaults dot draw item selected color and let's save it yeah that looks fine right so that is the center widget now let's use this whole center widget with the text again so i'm going to paste it there and let's save right so that one probably will need some size box in between so we get some space between them and let's make the space not that much let's make it a five okay we can add the version number there so we can say this is version 1.0.1.2.5 or whatever you want to add there and let's change this a bit let's keep it italic and everything the same but let's make it a 12 there and let's make this not the draw item selected color but just the drawer item color and let's save it okay so it just stands out a bit the jet mail the and then the version number underneath it and then we can have that size box again underneath the center and then we can end off with the same exact same divider so even now you can see i'm reusing code here actually duplicate coding here so if you've got a divider i'm not going to do it now but you can also extract this divider and name it name it your let's do it quickly extract the widget and let's call it app drawer divider and you can say okay there and i can just have app drawer divider there copy that one wherever i've got dividers and i need them i can just paste that one line of coding and it will still work the same okay so that's a bit of code reuse there and even you could have done it the same for the text widget also because we use the same font weight we use the same font style we use different colors so you can maybe pass in the color and the font size and the rest and the text maybe and the rest stays the same so it depends on on your own example there right so there's your divider you can place this in its own class whatever you want to do and also if it's a const constructor and you can set some of these two constants this one could actually become a const also which is a lot better so the size box for example can become a const this one can become a const that one can become a constant your size box can become a constant let's make that one a constant as well because you're using a method you cannot have those as constants so also remember to run through your coding and see where you can actually replace some of your widgets with a const widget because that will really make it a lot better performance wise and remember it's this build method that gets rebuilt so the more things that you can actually add uh const to inside of this build method the better your performance will be so let's just save for now and let's see if it works if i click on inbox i get inbox if i click on sent i get sent yeah everything working as expected so i hope you've learned something from this video on how to do your navigation bar it's quite easy to do your navigation bar but just keep in mind that all the indexes and stuff that we did here to extract some widgets just to make your code a bit easier to read and to maintain for example let's say i want to change these colors now i don't need to go into every single part in my coding where i change the colors i can go to my defaults and say well that color should not be blue gray anymore but let's make it a dark blue gray and if i save and i rerun this i click there you can see now all of my color change all of my colors changed where i've used that but the rest still stays the same and this will help you actually to make changes to your code quite fast instead of taking a very long time to just change one simple color especially for uh going to your customer and you're showing this to him and it you need to take about 10 minutes to quickly do all the color changes then yeah you're going to waste his time and your own so this is also a nice way to quickly do a color change throughout your app so make use of a file like this one like i that i did here for defaults that will save a lot of time okay and that's it then for this video thank you very much for watching see in the next one

Channel: Johan Jurrius

Views: 2,770

Keywords: Navigation Drawer, Flutter, Navigation

Id: cxfCTfNzXwI

Length: 55min 59sec (3359 seconds)

Published: Fri May 07 2021