Collapsible Sidebar and Navigation Drawer | Flutter UI

hello everyone welcome back to my channel so today I have come across this design which is actually saying it's right by plus icons so the whole idea behind this design might be that there is a sidebar and when you press somewhere here a back button sort of or a close button sort of it becomes minimized and you can click on this and the subsequent screen will change accordingly so since in flutter Mystica we have navigation drawer so we will be going with navigation drawer or we can directly attach it to the whole screen and take it as a sidebar so this is the video that I will I am doing now so let's start coding so I already have this app bar and app is looking like this right now which has our title of this drawer sidebar so yeah so let's add the body ok let the body be let's add the drawer so we will be creating a collapsing navigation drawer widget which will which will be a standalone widget which can be used as like this or it can be used directly in the body like this so you can directly use like this or and wrap this widget inside I would say you can wrap it inside a stack or a row so that it the sidebar comes here and wholly remaining load comes here ok so right now it's for draw let's create this class in our common widgets folder Commons and let's keep I would say this should be stateful because you know we have to give some animation so when I click on back button here which is not right now but I will put it when I click on back button here it should animate down to this width okay so that's why we'll need animation controller here now inside its container what we can have is we can directly have a column okay and and have list view dot builder which will have some items right and it will have a counter right and then you can I would say you can return collapse if collapsing list right okay why I am creating my own lifestyle because the default list style has extra padding Xander the margins and here already it's a very less space for the mobile screens so I would not like to have much padding so that's why I have created my own and I will be creating here yeah so yeah now this should have you know as per the design this is having I can end the title only second thing third thing will be whether it is selected or not and yeah and which part is selected so we have to give the give those things as well right now we will go with title and we will go with icon okay so I can also can be given actually it's a builder so what we need to do is we have to have a list of I would say list of navigation items so let's create a model first okay and that model will be there in a list so we will have a navigation model class okay which will have title and icon data right this can be imported from material and then we will have our list right of navigation model which will be called as navigation items and in this we can actually add multiple navigation models so right like this and now we can create multiple navigation models so our title will be first with dashboard icon will be icons dot chart yeah okay then second will be we have five items here so error search notifications and settings errors search settings in settings we have this icon for notifications also we have icon for search as the and for errors okay you can have cross we do have so let us take errors itself no issues with that so this is our navigation item now we can add okay so we can add here navigation items counter dot so let's import this first right and and the title then navigation items counter dot I can okay now we need to create the list item first let's create it in the comments again so collapsing let's type pay okay import my Tyrael stateful again because this will also be used for any mission so that's why collapsing right now okay there is a spelling mistake okay this will be very simple so it is just a row and it has children so first will be I con I would say okay before that we need to have a constructor as well collapsing this title died sorry and this would have title I can so and these both are required right now okay let's have these two themes right all errors are gone now let's add two things here so first will be our icon which will have simply icon and also the color should be color start okay so color not white 30 right and this should be widget rhotic right then we will have a small-sized box size box will have ten size of it so that there is a space between I can and the title then we will have text okay and text will be widget or title simple let's see how it looks if it runs properly let's import it here and let's see here as well so all the errors are gone let's see if if it runs okay okay nothing is there because it takes complete height so you know you have to give some bit through this whole drawer so let's wrap it in a container and let's give it a width of 250 and we will do one more thing here we will take I would say a max width okay because this is the max width of the rod and there will be a min width okay it can be 70 so when our drawer is it is smaller in size its bit will be 70 if it's full inside it will be 250 I mean to say this is 250 and this is 70 okay I think I'm clear so let's add the width here it is okay there is some issue okay so it's a column sorry okay let's run it and again it's a issue let me give some background as well so that we can see how much is or so the error is as you can see here it it will be we have to wrap it in expanded widget okay because it says that there is an unbounded height so we have to put it in there some you some we have to say that this will take whole space okay after that we also missed one thing we have to give item count here to this list view which will be our navigation items dot length okay now let's run it and check how much how much it is visible okay so we have five icons they are very stick together so let's add some padding some sizes for that let me create I would say themes dot dot file which I also created in my previous video so this is the content of that file right now so this is for list to tile default text style when it is not selected right so when it is not selected to stay text color is white 70 and when it's bold and when it is selected its color is white so as you can see here it's a little bit of white and here it's complete right okay then in when the list item is selected we have this color coming when the item is selected so selected color is slightly blue and there is a drawer background color as well this color so we will be giving our background color to our drawer okay let's do everything and this is our drawer let's add our color to it so it will be drawn background color right okay so after after doing this completely out I will be adding a back button here so let's do it right now after this expanded we will have icon and that will be I can not a left arrow that would be sufficient and its color will be white right now okay yeah and size can be 50 as this have to be a little bit more in size now let's go to the every list item of our widget and let's add size so it will be 38 and you can take any size based on your designs and here style will be I would say recenter now it will be default one because we have not added any code for when it is selected or when it is not selected okay so let's add it here right let's import it now let's try and run it so this is the thing it looks like this it is good but we will have we will need to have some padding and margin so let's add I would say yeah first of all one more thing we left is we can we have to have these two things as well and asking and telling what these two things in this demo I am not showing this one because you know it's already been shown here and this is just a demo for sidebar and navigation drawer so not giving much attention to this thing because I have already done this in my flight list app you can watch it okay so yeah I will be drawing this not this so let us quickly do that as well let's add a container or we can say collapsing similar thing very similar to this okay let's add it and since we don't have any icon so we will be using I can start person so this will be sufficient here and now a name also that's it that is it okay so okay this will be okay now fine so yeah let's add some margin so we will be putting it in a container which has margin and padding both now as you can see here it's completely sticker here so we need margin okay so horizontal will be eight and vertical can be also eight right so there is or if there is a gap in between these two let's check how much gap okay so there is a good cap here and this has gone at the top so what we can do is we can add a size box which sorry since box height 50 that would be okay yeah so it has come down pretty nicely okay so and here also we need some specific gap so that this back icon is not affected by the notches right now coming in each of each phone so this is our icon and on click of this we will collapse it and so yeah we can also add some okay let's do the animation now okay so when I click on this I need to collapse it right okay so let's the start then we will do the rest of the things later on they are very trivial things no issues in that so on click off this item I can first of all let's wrap it inside interval so that we have the click listener for that okay and then we have to do something okay let's see or what we can do here so first we need to have whether this layout is collapsed or not so initially it is not collapsed okay and then on click of this we can make it is collapse is equals to not is collapsed so that this is a toggle type of thing okay now we need to add single ticker okay for animation we have to do that and we can add animation controller right now we can have unit estate as well and we can initialize this okay so for your sake I am right now taking duration as a bit longer so 3,000 right so that you can understand it and then we will be playing with the I think you are getting the idea you playing with the animation with animation okay so I will be changing the width of this complete thing to 70 okay so first of all let's add 15 let's initialize of 8 animation with our twin of double type let's not forget that it caused some issues earlier on in my previous videos so and end will be minimum bit okay not animate and you can do animation controller yeah this is okay now what we need to do is we need to pass without any mission with animation dot value here so that whenever this animation starts this value will change accordingly right and now let us come back to set of state so this satisfied what it will do it will change the state of that and we also have to if it is collapsed we need to run this in forward Direction means to 50 to 70 or 72 to 50 so we need to run it in reverse direction both rivers right and here you can do forward so when it is not collapse you can get it done it in forward direction so I think let's check if it works in this thing it's just based on your confidence that you can do it so let's check it how it works yeah let's run it okay so I am clicking about this and there is some animation happening but it's not on any mission so why it is some sometimes it's like this so it's an it's completely a very wrong thing so there are some bugs here so first of all I would suggest and it's a good practice to move it out okay and use animate any machine builder okay because your layout is not static it's it's built using animation so that's why you need to have our animation controller this will have context and widget okay this yeah so we need to return something here right or we can do like this okay get rejected and pass these two things now let us create a method which will this give us this widget which we copied so we will return here right yeah and let's use these two parameters that were passed so that there is no error I said this is the structure of animated builders nothing much fancy here only you have to take a whole your container out of this okay and second thing since we have to give a width to this container as well because you know if this container size is more than the parent it will show this type of error render flow exceptions so you need to have same bit calculated same width of this thing so what we can do is we can pass a animation controller here as well so that we animate this thing and as you can see when we collapse it this text is not gone which should be constitute are all part of animations so we need to give and controller here okay and pass in that let's have some variable there which takes this animation controller here so we are not initially initializing it again here but we are using the previously initialized animation controller okay and this is a warning that you cannot have underscore when you are using this type of variables right so again let's create one animation like we created there so this is also with animation which would have this is with animation is for the width of this thing okay it's completing animation let's initialize it into the state similar very much similar no issues in that so I can just copy it from there here okay there is no rocket science involved here okay and since this is also not known so what you can do is I think you can import it okay if you can't then you can hard code right now here or you can put it somewhere globally so that you can use these two things everywhere and this is our animation which it taught animation controller okay so this with animation is there now we can change the width when the animation starts okay so yeah let's run it how this behaves let's see how this behaves now so there is error definitely okay we have this value was called a null so let's check it out what is the issue yeah let me just stop it and run it again are we passing it here yes we are passing it here but we are not passing it here so this will cause a issue right that's not it so whenever you are using a collapsing at least title it should have a controller now this is the mandate so what we can do is we can add this also as required right okay so we never miss out on these details now it's opening like this when I click on this see the animation okay no worries no worries become there is nothing wrong here or navigation drawer is animating and when I click outside it goes inside there is no issues because it's a drawer this can happen okay as we did in between of the animation so this type of I read game but if we are patient enough we can see the animation okay well I can end the video here but no I want to fix the error of this because there is a calculation mistake definitely and also we can see here see you know then when you should decide this text should not be shown this text should not be shown when it cannot be shown while collapsing okay so we can do like this okay we can I would say if let's add a condition with animation the auto value is greater than equals to 20 then only show this otherwise return on Alman container widget okay so okay this is better understanding so if this condition is true this text will be shown otherwise container will be shown let's see if it works so click here see the text gone okay and they are also gone so it was error because text was is still there and it required more weight but we restricted the width okay so this was the issue again there is some issue there is a sized box so what we can do is we can also remove the sized box so let's create another animation which will okay Sybok animation which will actually move from ten to zero right sighs okay so here also we can change the value of this size box animation it will change from ten to zero okay let's see it will be almost done then there will be no issue see it's gone yeah it looks good but again there is something I would say this with some space here so let's check how much is the space ok so it's ok I would say this width is more ok ok so no problem with that we can take it as 60 ok it will come to the 60 and minimum also 16 right now its proper now what we need to do is we need to animate this icon as well because when we click and now I will also reduce the duration because it's too much data action the animation so let's do it quickly animated icon and here you can use animated I don't okay and see we don't have right now so we can use closed menu because initially it's okay so I can will be this and province will be our animation controller right if we don't have any animation built-in right now which changes this back icon this arrow icon to this arrow icon that say right now it is working like this okay so if any mission is more slower you can actually see a very quick animation and you won't be bothering about this type of text closing ok it's perfectly fine this is the animation here now I would like to tell you one thing here that you know do you still believe that this pattern is good you have navigation drawer and you cannot do anything here means this is completely useless to have a sidebar because you just touch here and the navigation drawer will be closed when you call navigator dot pop so I have thought of an idea because it's also a title that it's a sidebar so let's do in that way I thought of an idea let's remove this drawer just copy this let's move the drawer okay and run it so you have this thing and just add a color to it so we'll be our I would say this drawer okay right okay so it looks like this okay no problem now let's add a body and let's take our stack two children first will be our this it will be on top of so there will be another container which will have color torque under dot red okay okay so let's see now can you see now what will happen if you select any of this you know you will you are still able to name in fact here and on click on clicking on this as well this is not going so this is the benefit of using sidebar instead of navigation row now there is elevation which also can be removed this is the whole concern that I was very willing to share with you guys and yeah there are some things which are is still remaining here so if you wish you can still continue and I am going to show you a divider here I'm going to show you I selected how this look this will look when it is selected so let's jump into that directly and I will not speak much I will just do it okay so I will make it as separated because I need separation and there is two things one is a separator builder which also takes context and counter right now I read in the documentation counter will vary because it will be counter minus 1 it will be navigation items dot length minus 1 for separator builder and it will be navigation item dot length for item so you need to be aware of that using a divider color as my 40 just picking a good value so that there is a difference specific defense okay and now you don't need the size box because we are using this container inside below this earlier we were using on top of this so and you can see I have taken this complete out I mean this is this has nothing to do with collecting navigation drawers so this can be taken out and it's completely standalone thing okay so this is for the dividers now since I added a divider I need not have vertical margin for my list type so I will remove this right I would like to add some padding and I actually did something also it should be 12 because it's a divider in between of these and I should add our dividers and there will there will be no color here just next up two dividers this can be 40 so this divider will jump here and rest of the dividers will be here in between now let's run it okay you can see it ok now this error has come by because I added some padding here so the overall width of this complete lifestyle increase so back to 70 let us see if it is okay no it is still some 10 pixels issues so now it might be fixed okay it's not so it is 10 pixel issue okay so we need to do it here as well it might be the 7p will work yeah it worked so you can do 70 let's run and check it ok fine yeah it looks good so you can also reduce little bit height no issues you can do with sorry you can do 220 and 220 here so that it's more cooler than you can see more items now you can work like this so second thing is we need to have a right now Electric thing okay so let's do it quickly quickly very quickly and okay so we have to add on tap first of all there will be a on tap method or we can directly do something on tap right there should be a is selected variable as well right this medieval will be okay so it's selected will be my correct so int current electric index equals to zero right now V be the first element will be selected so if counter is equal to this it will be marked as selected now we have to do two things here first will be is selected which will be a boolean third will be a final function which will be on tap right now we need to add this tort is selected and this not on that right now we need to make it clickable so let's wrap it in inside Inc well okay and I would not require you just call that method which I taught on that right and you need to do some coloring so um okay now let's color the text if it is selected if widget thought is elected we have will have list a tight to tighten selected style otherwise we will have list title default text style okay I hope you understand this similarly for this icon Richard plot is selected it will be our selected color which is you know which is this blue ish okay otherwise it will be white 30 okay so we are done with this yeah there will be a background for this okay so there is a decoration you know which background I am talking what I am talking about this background when it is selected so let's do it very quickly now this is a common stuff that we have already done in many of the videos so it's nothing to be explained here at 60 it's bit round II and so color will be if it dot is selected so let's start transparent with opacity 0.1 this is a very good thing you know there is a paucity for transparent color as well which is very weird but it works okay let's run it and you will see that difference the boolean expression must not be null which is actually how you can deal with it you can actually make or default of it so initially everything is not selected right now this dashboard is selected when I click on this nothing is happening so we need to change and see this it brilliant okay now when I click on I would say on this any items so I have to make this was clickable already so if I okay yeah so let me do it yeah so when I do something here I need to set the state and selected index will become my counter right let's see the magic okay brilliant it's look very nice now you need to change something here as well so for that definitely you need to change into the body that is now you would say that there is no elevation here so you can also wrap it inside of another widget called material so you can add elevation of 8 so that it looks like it's on top of this screen if you're not able to see it I would make this color as white and then probably you are able to see the elevation if still you're not able to see it let me do it like this you can see the elevation there is some elevation so it has come on top of it also this is on top of this stack so it's the topmost layer so let's make this color something so that I can it's not good okay I will do that color that's not an issue but I have shown you this elevation and it looks when it is okay so yeah guys that's it for the video and I hope you are liking my content please suggest me what else do you want to see I will be working on some animations and block pattern some of you have asked you want to get a block from starting from scratch so I will work on that yeah I think this is the end of the video please subscribe to my channel hit the like button if you like in the content show some love by supporting the channel and sharing it with your friends or colleagues and help them to learn floater and yeah so this is the color that I finalized that's it guys

Channel: Techie Blossom

Views: 79,213

Keywords: Navigation Drawer, Sidebar, Flutter UI, Animation, Flutter SDK

Id: 2SjvhAUR9aw

Length: 39min 20sec (2360 seconds)

Published: Sat Feb 09 2019

Reddit Comments

[u/krmax44]

Doesn't seem that sensible, given that phones already have such little horizontal space. The sleek look doesn't make up for the usage of this valuable area with a menu that could also be a bottom nav or a hamburger menu in my opinion.

[u/ChrisyKL]

Hard to understand, hard to follow. Your red thread is a big knot. Do you prepare your videos?