Sidebar Animation & Navigation | Flutter UI

welcome back to my channel so today I will be showing you this sidebar animation you I yeah not only the animation I will be showing you when you click on home button you can see the home page when you click on my account my account page is shown so I have not created whole page but definitely I have given you a entry point wherein you can navigate between these links and click on any of the link and the new page will be loaded and you can design your new page as and when what you want okay so let's get to start it I have created this project side by animation and the pub spec dot EML file the dot version is 2.7 and I have one point to flutter right now let me just show you that as you can see one point one two sorry and dot s to punchable and I am on dev Channel okay so from that's about perfect Protima later on we will be adding flutter underscore block package for navigation between the pages so starting with this let me remove the title and tell this show checked mode banner to false this will basically remove the top right corner banner is there which has label called debug so it will remove it and in this theme data we have to use skip fold background color as white because I want the background to be white as you can see here if I click on this here as you can see here it's all white right then my primary color is also white because I can see that the primary color of the app which is all over the screen is fine so I have taken a certified white now this you can use as a component so I'm going to create a sidebar layout which will contain two things the page and the sidebar right so I am going to create a sidebar layout widget I will create this in our new package so which is it will go inside bar package file name will be sidebar layout and any everything related to sidebar will go here okay so later on we can actually create a plug-in out of it and launch it and put it in depth so that anyone can use it layout and this will basically have for a snack and two things first will be your home page right now it's a home page but this will be handled dynamically you whichever menu item is selected based on that this will be selected okay and then we will have our sidebar that's it so this is scheme now this sidebar we will be creating inside sidebar package sorry you could create a new dot file right and what will be the color of this so basically right now let me put color as whatever is given in the design so it is 0 X 2 6 2 so this is the color of sidebar okay then let leave it like this right now go to main good input this like this and now go to live folder and create a new directory wherein we will put all pages so basically how many pages are there I am going to cover my account my orders and a home page link on top of this so that I can get back to that page that's it so first piece will be nothing much to be writing is written here Center and children sorry child continue and a simple thing which will be a text okay I can directly use action or use contain note not required text and every write home page okay with a style of four three two yeah and the font size as it but now this we can actually replicate just copy it paste it and my Eclipse and and you can also write my cons page this okay then you create new block all sorry just copy it paste it and my orders right so this is how you are you have created multiple pages just have to change this to orders hope you change is to accounts and my right go to a window dot import this sidebar layout and actually this sidebar layout is inside it should be inside our step a step scaffold just cut it will be right now let's import is home okay it seems it is three places okay we have to change this page we have done the groundwork right we have our three pages and test this so we have our three pages we have a sidebar layout now we need to work on sidebar and home page right let's see the output of this what how much it is showing and what it is showing now hope will write code for sidebar let's see this so sidebar has two states open and here it shows closed right so we have to handle this through animation definitely but we will be right now stirring starting and later on in this video you will be seen how the animation thing works now if we have to design this complete so we can divide it into two parts first of all first part being this thing till here so from this point to this point is first part and the remaining will be second part where we will be drying you a custom shape which will have a item in it okay so and also we will like to expand it so we are going to use a row widget here okay and put is not ready let me stop it I'll turn it again meanwhile since we know that we are going to use the row so I am writing row and my first child will be expanded widget which will have container color will be same as what a little this it's not needed this is ultimate period and let me take the color from node sorry where I have written okay I wrote here it's in color it is 0 X 6 - 2 X right so this is expanded and then we can have a container right now I'm creating a rectangle container with width of 35 and I plus 1 1 0 ok I will just explain you in one second son why it is like this why it is only blue the reason is very simple sidebar layout contains home page as the bottom layer and cyber on the top layer so if we comment it and we run it you can see the whole page so this is the said that we will be using right now a sideburn will come on top and it will be displayed like this now how this is can you I came a simple reason we are creating expanded and continuous edge so this blue color is coming from this expanded and container itself is this white okay I can show you with this thing if I want to add a color Google store temple ok you can see that color is here and with the width of 35 and height of 100 now instead of this we need this color right right so this is how it will look now we have to align this because in our UI this portion is somewhere on the top it's not at the center right so we have to wrap this in a align visit alignment sorry what will what I did loop it will take it to bottom but we won't reverse right it has gone to the top right now we need to give a custom shape to it shape to it as well as we need to give position to it now when I say position see um this sidebar is inside sidebar layout right so and it is inside this tag so we can use position widget here so let me wrap this whole thing in position and I am going to show you two states of the drawer okay so be there for two minutes and you can see the two states of the door by top 0 and bottom 0 I won't sidebar to start from here and end here right it is already doing it we are just doing a formality now what should be the left position if it is open so let's first of all take a flag so right now it is close to be all that it should we find them one okay okay so right now it should be false right so if sidebar open is false what should be happening left should be zero always turn right like no I'm saying zero but later on it will be changed for if sidebar is closed then also it should be zero right now just beware with this this value will be changed when it is not open when it is closed the left value will be changed now right if sidebar opened if it is open the right is to the right of your screen width so we have to take our screen width variable X cubed equals two media three dot size top width that's it we got the screen width so if sidebar is open we have to use a screen width oh sorry we have to use zero because it is from right right and right fine and what should be the right value when it is closed so basically lighter is somewhere here right and this is 35 s and concern right so if I want this point to be here somewhere it should be from left hand side it should be something 45 or 35 so if you right screen width minus 45 then what will happen screen width minus 45 is some value that some value will be right side means that value from right side so it will be somewhere here let me run it and tell you how about you so this looks like this okay now what happens when I do it true now what I am saying is right value from right you have this much space for different right this is what I was saying now if you make it crew and run it it becomes like this so basically we have found our sweet spot where we know what are the values now is we need to animate all descendants right so for that I am going to use stream builder sorry yeah I am going to be the stream builder and animation controller and the steam controller stream stream sync all in all in all together to do animation because I don't want to use SATA state okay but since I am creating animation controller so I will have to make this visit as it sticks okay so let's add animation to this sidebar layout okay so what about this 45 value see this 45 is nothing but giving fit for this specific vertical line 45 - width of this 35 which is written here is actually 10 which is width of this so if you want to increase width of this you change this value that's it so right now I am taking it well 50 45 anything as for my convenience whatever is required at your end you can do it now first of all to add animations let's see use animated position now for this you require a duration right so we will use animation relation for that we will be declaring animation duration here of 500 milliseconds right that's it let's see how it works how this will animate so this is false right now we make it to true and we will run it now this dart tool actually makes it very easy it will just change the speed so animation will happen just in front of our eyes oh maybe not I am wrong it should be said state maybe it is not happening so definitely it will happen in some time so let's add animation controller yeah so we have to use this and yes let's try it again okay not happening no problems okay so I have used single ticker so definitely I am going to define animation controller not final because we need to initialize it in unity state and dispose it will dispose method so this is animation controllers let's define the third you need to state a new controller equals to integration will be as defined top right let's create a disposer third and put it sorry let's prove it now we need to pass value here which is dynamic so let's create before that before that let's add the icon so that we can animate the icon as well according to our animation animation controller value okay so this color means this one so we'll be adding a icon to it sorry animated icon do it now there is a specific set of icons already given by flutter framework so you can use animation the icon that we will be using is animated icons dot menu close so when it is open it is in the first it is menu if it is in the other animation controller value is 1 then it is in closest rate so this is the meaning of the color of this icon will be it is not blue it is something like this as you can see here right so 0 x FF 1 PP 5 every right this is the value of the color and what is the size of course less than 35 so it is 25 right now I'll let me run it okay there are some L is definitely there will be because you know the animation is not running it is not in it is not losing any value for that so we have to do or maybe we have to run the animation first of all okay let me just fought reload everything okay so icon is here now this container also we can give alignment so whatever content inside a line inside this container will be Center and left side so it came in center right definitely in the next part means in this video in only after some minutes we will be seeing a shape for this but right now we need to handle the animation first of all right so let's add a stream builder a final stream controller of bull-type so basically this stream controller will have a stream and a sink so string controller is this side that's it this is the stream cutter and lift raise that you have to sorry it says that you have to close it so in this pose method you do it like this is cipher string control dot close now we need to have two more things stream so that we can get the value of what a string controller is having and stream sink and so that we can add something to the stream from the same part this I have already done in many of my videos so you can go through I will say you can go through my initial videos which has flight app which was booking app so you can go and learn how it is work working but this video itself is self explanatory how things are going so you can continue with this the sink also you need to close itself are synchronous right so you have done all initializations everything you have done but you have to initialize the string controller in in its state right you have not done that so you will be me using published subject and it will have Google type like this or we have to put it it turns out that I have to add 30ml rx start in box and Rohde ml I'm little bit confused but right now just add it and work with this so now this is valid statement my publish subject is working now on the screen which is if cyber open stream can be fetched from a controller don't extreme and similarly sync can be fetched from this okay so this is your initialization now right so now we will add click listener on this and will handle F of this item right so hold this container will be inside gestured this you have to go on like crest and you just feed this method now void first okay what will happen in this on I can twist so first of all let us get the current status of our animation which is this now let's check whether the animation is completed or not now there are why I am doing this because if animation is completed to be are actually current considering that it is starting from false which is side bar is closed right now so if it is opened it means animation is completed that's why we have taken this variable and let us remove this because we don't required hard-coded value now we will be using stream controller so they will be wrapping this inside stream builder just wait for one more minute let me write this goal now if if n mission is completed we have to run the animation in reverse direction if it is not completed we have to run it in the forward direction so if it is not completed we have to run in forward direction right and if it is completed we have to run in reverse direction what happens to the sync values so if it is completed that means it is opened and when you are clicking on it we have to make it as closed so is side bar opened value becomes false right so take the sink and add a value of false so what will happen when we click on icon and suppose Ike the straight of side bar is opened it has to become closed so we have to make it as false and similarly here we have to make it as screwed just reverse of it now if on I can pressed is there calling is done now we need to wrap this in stream builder right and this stream builder is going to take its course now what is the initial data it's closed what is the stream it is the stream that we defined is sidebar open the stream now is the Builder so builder takes in context as well s is like now this is a variable that we have defined so we can to exist just because it's a s in value that is why we have written essing in front it's just a norm that informant otherwise it's not mandatory to do it now cut this and put it in builder that's it now use this value to decide whether the position of left and right what it should be right okay I think and and see this will have qu all false so if it is true which means sidebar is open so left is 0 if it is false left is 0 this value will be change just wait for some some whole time is sidebar open a sink which means if it is true right that will be 0 which is open and if it is false this will be here now let's run it all through a complete hot reload ok this is how it looks and I click on this animation happens and it comes down back right fine now let's add multiple items here so that I can tell you why you should not use 0 here ok so we are going to use this first of all we are going to create this so this is a column right so would we expand it and inside your child column right now the first item in the column sized works I'm just going to create it quickly so that it isn't way to waste your time why I'm using dollars I shall be using my name right by amusing opacity just look at this it should little bit it's like opaque so or what it in do is I can use I can color that is much relevant now for the image I am not using any means I'm just using the already different icons so till now let's see them okay this is how it is looking now let me explain I can explain you why we don't need zero in when I click on this you can see this right this is the issue I don't like to use this is the thing right why it is happening let's just understand this when every time it is zero right so the width of this becomes N and you are putting a very large text inside then what you need to do is we have to you have to preserve the width overall width of your role right so how you can preserve when it is opened you can have 0 but when it is closed you have to have 0 - something here ok this will define that it it is not the width is not getting change its position is getting shifted so I am going to - is stream width so that I utilize every part of the screen and when I do this when I run it let's see the output okay fine and I close it everything goes fine right see this there is no issues because when I close this this page is going till here the left part is here right part is here okay so this is how it works now now let me just minimize this you like this and add up let's complete this quickly do this divider height 64 thickness 5 if you can I think you cannot see it because there is for color but let me add the color so what I will do let me just leave it as it is because constraints get compiled only once so this is the divider can you see no you could not okay fine so in the end from the left-hand side I want 16 from right-hand side I won 16 can I see it no I can I don't know now I can see let it be like this now okay now so this lets you know was fine let me add 32 it this is fine perfectly fine now after divider we need to have multiple items this is this all are same so let's create a custom widget go to your sidebar creator dot files named menu item because it is used multiple times so let's create in that the poured strict list item right what our menu item has so right now it has icon data string which is try to later on there will be something will be coming here so that we can handle the top of it so right now it's out there we are not using it so [Music] click on 16 right after that use because there are two idols one night so let's see use row so you don't any module may be size box okay whatever I can is passed right color will be just any color size 20 okay defined items we have two different sized box don'ti and text title and right you have done the menu item we need to initialize them so we need to create a constructor for this and that's it menu item is done we need to edit it multiple places two men go down and the first one title will be homepage for simple cumbia right okay let's see it sort it out put fine this is fine no if it is not in Center for that maybe we have to wrap everything in central let's add first of all all the items just to placate it add come order that my account copied pasted sorry about the sum we have home for account the other person we have shopping it let's see the output okay looks good ok fine but that we have card gift card to the wishlist then we have sorry my orders let's have a divider in between again ok after the VF settings and exit settings and exit to app which is so this is how it works now why I am the thing is not in Center maybe we need to add somebody or left pedal yes we have that ready so burning I didn't said some trick or it onto the printing yeah it looks good now and we need to close when we close then we click on home when we click on this and this and that we click on this so everything will be called but now let's work on some interesting part let's create this shape after this shape we will be handling click listeners right so go to your container and when it will want to work with shapes either use a clip path or be used custom shape right right now we are using clip path as you can see this is a rectangle I want to clip the path from here to here like this right click path sorry just wrap this in clip path and create a paper which is many custom create this file extends custom Clippers and which path % clipper of path let's overwrite two methods this will return true ok let's work on it okay let's see the shape which we want to make this is the shape and this is our rectangle we have this color and we want to clip the rectangle so whenever Italy the rectangle whatever path we create okay it's like this wherever I am moving the mouse the path is like this you have to set or colored for this closed path path starts from here goes till here like this like this like this goes here then goes to there and here this whole path has to be white so you have to create a paint object and make color as white because the closed path has to have white and we need to return a path so you will have to create a path is that right and return this everything will happen with the path now plus we need to have bit the Ridgid which it is going to clip it so as you can see container 35 and height will be the values passed to this clip path in the form of sighs so size dot width will be 35 size not height will be 1 1 10 these all we will make use of to create the path because as you can see here we need these values right so first let's move to point 0 0 right so right now we are here we need to make a curve having a control point somewhere here and destination point here okay so let's add quadratic Bezier curve so control point 2 x 0 8 and distinction point somewhere here which is 10:16 symbol I have carefully chosen values it was very hard to choose the values but I have done it for you you can just copy paste all the value they lose and use it but it could understand you have to watch this video now I am here what I want to make is I want to make a curve till here so endpoint is width height by 2 and somewhere control point will be yeah right so control point is bit - one height is hide by 2 minus 20 and distinction will be built in height by 2 so wait if you are not most my previous videos you can again learn custom Clippers custom shapes from my flight app video or wherever I have used a fitness app there is a fitness app here I have used it the previous video I have used custom shape and clipper so you can learn there as well so last step is events app ok ok so let's see till where we have reached in this case so we have reached till here right we need to pass out clothes so that it closes itself right anyways and right so after this just be out till here now we need to move till here right so smart dot put at ecclesia curve with now these all are reciprocals of each and every one if it is minus 1 here it should be plus 1 it because after half it's just plus values right so if you copy this it will be plus 20 right and width it is 10 actually int is right minus 60 by because this was 10 in 16 so I just replicated the mirror image if you understand this it is just a mirror image of what you have created on the first half right after this pass it on contradict now you have to use zero height so your curve will be till here now so your control point is almost here right and very tight - a twist that's what I was worried about so your control point is still here and then we will have a line from zero to zero right right right so this is how it should work now let me run it and you have got the shape if I remove this line let's see till where okay so now you can understand first point and the second point then middle image still here and then again the last so go so this shape is created let's run it yeah it works fine okay you can anyways change the way how it renders so we have done this side bar but we have not added Cliff Asness so let's just import slaughter log package let me just check the version of it so it is two point four point one let's just get the dependencies now to hand to work with block when creating a package directly so it is having a blog dot negation but they can do multiple blocks in your app so right now this block is handling navigation so I am creating a navigation block package inside that you can have a dart file wherein you won't have a navigation and everything related to that right now I will not have multiple things okay fine so first of all what is block now if you want to understand block let me give you my youtube channel so sorry for the bad traditions okay so this is my channel if you go to the videos just let me this is the first part okay so if you go to playlist you can see that yeah block flutter block this playlist has basic introduction to floater foundation and then you have a second part of this which has integration with transform translation transition and debounce and then you have complete third part so all these 3 parts are actually explaining you good things in terms of foundation of rotor block pattern so you can go through it and learn about floatable operator right let's come back to the navigation block funny so let's click create let me just write the dependencies navigation block now if you are little bit aware of what is god so block a works with events and states ok so basically you have to impose this package today so my show because wrote a blog is depends on this distance which depends on knowledge on this little book okay fine so it means that we can remove our X start because flutter blog is already using stream right and it already has our extraordin it so don't have to use it import blog block dot dot what is happening I think it will automatically work now it works on event and state so whatever event is there is a state associated with that so navigation event and navigation state so it works for navigation events in the States okay so let's clear let's define what are the events so I'm creating a navigation event enum so basically it is a home page it is my accounts click event seemingly intrigued it is my order and so on so you can add multiple events like this ok fine now let's add step so I am going to add a strict class revolution States that's it this is me now let's see how it will work to its same two inputs two methods over I two methods in it is initial state will be my home page now there will be some error by first of all you need to import this right after you input it says that a value of type home page can't be returned from function initially because it has a return type of navigation set so what you need to do is unit you need to have home page as a navigation type so you get maybe nation states so now it becomes our type of navigation States now when it becomes type of navigation States we can use it as on state right fine so initial state is homepage now now whenever there is this method map even to state what will happen is whenever there is a change in the event this method will be called and based on whatever event is we need to file fire or new state according to accordingly so go to switch event suppose it's you can say homepage click the event what do you do will yield homepage and by it this is not taken because you have to write here essence turn so yield homepage and then in crater right it says you don't have you are not handled my accounts in my order so we are actually going to do exactly st. you have to use my accounts have to use my products right for this you have to use my orders page my columns is import them they will show errors because as you know we are not made those two pages as navigation States so go to my accounts page make it nation states I don't know why editor is giving me this but it should not be like that let's see it will run similarly for orders page as well immunity - navigation states right ok now let's go to block and everything is fine no errors right now how do we use this so when you go to your site power layout right so stack so we don't have to use one page because we know that hump it is not the only page that will be displayed when we are using side below so we need to depend on block provider for this which will give us it should actually take a navigation block [Music] so we are going to use navigation block here which will have create method it says what we have to create so we just have to initialize the immigration block which block it is going to take it just as for that and then we need to have a child so this child will be built based on this sidebar click OK whatever is clicked so we need to whatever stack we have sorry I made a little mistake on X you have to use block builder here and your child will be your stack two children say second one will be a side so all of your layout is under bla provider now based on whatever events it has right so we need to have lock inside it this block the world works on two things against event and stakes okay oh did that sorry sorry sorry it works on innovation Blanc and navigation states there are certain changes in you can say certain changes in flutter block I believe so it's like that so provider basically gives you the block it initializes now this block can be used further down the tree whenever you need it it it doesn't mean that you cannot use this value in your sidebar it you can use the block current value in your sidebar so block builder is basically extends stream builder if I'm not wrong it should use yeah it uses stream so whatever changes in the stream will reflect here whenever there is if there is a new event it will reflect here in the form of state okay so builder takes navigation state and context and so whatever state is right now it gives you that now right see how this will be called whenever there is a new event it will run it will yield a new state right so that state will come in navigation state so you just have to return navigation instead right that's it this is how everything will be handled in terms of navigation but we have not handled the Detailers so what we can do go to your sidebar go to all the items you know I mean to say go to the on tap events honey go to your sidebar go to the expanded items so suppose many waiters is the first one over you need to do is you need to write on tap and before that and you don't have to handle on tap here you go to menu item wrap this everything in gesture detector count app and in this on tap you just need to call a method contact this method will be passed from a caller so it's a function type since you can pass functions in as a parameter so you can do this right so whatever happens in the on tap will come here and it will be executed now let's come back to sidebar right on that thing call a method which is nothing let me just tell you what it will be having so now as I said you you need to dispatch an event from here so you need to have a context you need to have the block navigation block otherwise you cannot do that but there is a way to do that sidebar layout sidebar comes under block provider so it has navigation blocks instance inside bar as well right so how you can how you can fetch that instance so basically here to write block provider not off of course we have context we need a type of navigation block just vote it then add which means dispatch that event so it is only a click event so this event is dispatched as soon as this event is dispatched the navigation block will yield a home page that's it similarly but when the home is state we also need to close the sidebar so you just follow that method on Taikan list and everything will be happening similar way as it happens when we click on this and this okay I'll copy these two lines and paste everywhere for my account also you based but so you have to add on depth now whatever you define in this method will go in the on type method of this and it will be executed right it is my accounts click home pay clicked event similarly just copy this own app and paste in my orders so this is how you will be adding multiple click events okay I am running this whole app from scratch right now it's home page because why it's homepage go to sidebar layout go to block builder [Music] why it is own things so it should be [Music] let me just check it side Balio do you go to sign Bollywood stack okay hmm I done it again I should be somewhere me not really completely start the app but it so you when you go to navigation block your initial state is homepage now what happens with this you go to sidebar layout whenever you are giving block provider and you're initializing navigation block this navigation block has this initial state and somewhere in the flutter block liability initial state is already passed to your block builder so if you haven't that thing you have homepage right so that's a home page was shown if I change it to my accounts page it will be my account states at the start let's see the output it's running taking some time it's done yeah the app is getting started so it is home page let me add since I changed the code so it is sinking again it's little slow don't know why should be done there this time anyway I think you have got the idea so meanwhile everything is getting started and running the moment is taking too much time so this is the video that I wanted to create so that I can tell you about sidebar and a new way and how you can handle navigation between the multiple pages using the sidebar that I have done and if you are not subscribed to my channel please do subscribe to it and let me know in the comment section how this tutorial came to you and how did you like it or not just tell me that so my accounts page is the home base now now if I click on home it gets closed and home page is the value when I click on orders its my words let me go to my orders it's my orders in navigation block I'm doing my orders page what I'm doing wrong here okay got it go to sidebar and here I have not changed the type of event the test will fight what we started my accounts keep on my orders it's my orders so this is the end of the video I think you'll like the video and hit the like button if you really liked it and you can also hit the dislike button if you didn't like it I know it was little longer than the content but I have explained you how you can navigate using Twitter blog how you can create this menu items how you can animate using animation controller without using search State so guys thank you for watching the video come back to my channel and again for other videos as well as you can also press the bell icon so that you will never miss the content whatever I am posting on YouTube you

Channel: Techie Blossom

Views: 137,464

Keywords: Flutter UI, Flutter SDK, Animation, Sidebar, Navigation Bar, Stream controller, Bloc Pattern

Id: oExw0U4U_UI

Length: 65min 32sec (3932 seconds)

Published: Mon Jan 06 2020

Reddit Comments

[u/matt-1818]

Gorgeous!

[u/ItsTimeForKetchup]

Awesome work!

[u/melewe]

Looks pretty nice! You should publish your work to pub.dev!