Flutter UI from scratch | Hidden Drawer | Pet UI Part 1

as you can see that I have created a new flutter project and we only have a scaffold that is a blank scaffold first thing first I have done some reconfiguration to my project got a scooty of obscurity amel and you can see that I have the custom fonts here so I've created a new folder named as fonts and I have all my custom fonts I'll be using circular font here so you can always download that from the internet and use that and you can use any font that you wish to use in your flutter application as well as I've created a new images folder and inside that I have all the icons images let me just show you the you a design for once so you can see that we have all the different kinds of items here so for that I have created a new file and name does configuration file as you can see in my live food I have a configuration tort art file inside that what do you have I have a primary green color that is I picked this color this one right and next we have the Box shadow I've created a box shadow that is every widget or every container here has some kind of shadow to it right so I created a custom shadow to it how to create it you can always see my container video I'll add the link in the description as well as as well as the varlet you a video where I use the same concept and I explained it in detail right so next is the category name and the images now this is the now these are the image that I downloaded from the flight icon files and you can see that I have the name that is cat and then the icon path or the images paths you can see that inside my images this cat I could but now these icons might differ because these are all custom made made by the designer so I didn't had any intention to copy it and make the icon so that's it for the pre-configuration and now let's see how we can cool this the developer [Music] normally what do we have is the drawer overlaps our way now this time our UI goes towards right side and we see this he didn't draw it right so how to implement that let me just show you so let's see the structure we only have a skier fooled with us so what I'm going to do is as a body to the scaffold there's a body to this get bored I'm gonna pass a stack why am i using why am i using a stack let's understand the concept behind how I implemented this for this I am using an animated container my previous video especially for the animated container that's why I made this so that you get the concept first and then the implementation so the animated container is like first we have this green screen containing the all this containing all the text and the buttons and then we have the upper frame which will be a home page screen which will be our dashboard screen right so let's let me just let me just repeat we have one more screen that is hidden behind the screen below the screen so we'll be using a stack first screen over another screen so our first finish this and over this will have this white screen right hope you understand let's do the implementation and you will understand bit up for stack as a children I'm gonna pass to widgets name as the drawer screen and then it will be our home screen now these two widgets are yet to be made so let's quickly make them so inside the slab I'm gonna make two new files it's your wish how you structure the program I will be using a direct files to it right you can always add some different different folders so it will be home screen dot dot and the other would be I would draw a screen so inside this rod skin I'll quickly import a material package and play alt and I'll create a state flu agent inside the stateful widget I'm gonna pass trial screen as a name and for the container let it pick container and next is the home screen so let's quickly import the material package and everything will be see a stateful widget name it as home screen right go to a main file and import both of them now what do we have we have nothing like we do have two containers but they don't take any space so what we're gonna do we'll go to the drawer screen and for the container part what I'm gonna do I'll give it a color of primary green the custom color that we have right save it and you can see the anther color is green so what do you see here we have a draw screen draw screen is taking up the green color and the home screen is not at all taking up any color it is of transparent seek a transparent color so let's go to Home screen and I'll add a color of white let's see they go now where is the green screen the green screen the green screen is hidden behind this below this container done now how we are okay so how are we supposed to add the effect the drawer effect to it so we're making a button here and on press of that button what I want is this UI to be shifted towards right as well as scaled to some proportions understand with the COA when this button is pressed this gets shifted towards right and is getting smaller so how to implement it will be using an animated container right so we'll quickly go to Home screen stay and for this I'm gonna change it to animator container rather than a simple container now this takes a duration so for the duration I'm gonna pass milliseconds 250 milliseconds 250 milliseconds is actually my preferred timings when you are doing any kind of animations next thing is let's make a button here so that we can toggle from between two screens so let's quickly see the UI we have the menu button here and then we have the name ok sorry the location and the image of the user so as a child I'll quickly give it up column why am I using a column because this will be our main screen so everything will be aligned in a vertical direction so first are the children first one will be a row as a row first one as an icon button let I can be I can start menu and on pressed it will be nothing right now let's save it and you can see that the icon is here so to give some margin to this I'm going to use a sized box and the size balls is a height I'm going to give it height of a tip there you go ok it is actually be able watch there you go FFT is good and after that what do we have after this button we have the location so as a column are the children so let's see the UI what's in the UI we have a column first one is the location text and then is the actual location so we'll use a text saying location then we have our text saying Ukraine and done right so you can wrap this with a row if you want to add an icon to it and we I can I can start location and the color would be primary green right saver and you can see that we have the leeway now we need well now we need to give some space between them so what I'm gonna do is I'm gonna give it a main axis alignment of space between and you can see that the white space you can always play with the margins on the padding's are not going deep into that what I mean is that you can always wrap through with a container and give it a margin from symmetric and from horizontal axis at 20 pixels margin so you can see that we have the spacing so not be going deep into these concepts like giving spacing and all that what why I'm making this video is to implement the trial right so next thing is on press of this pattern I want this container to be shifted towards right side and be swallowed in proportion right so you can see that on press of this button I want the content to be shifted towards right side okay so how to implement that what we can do is let's make some variables first when will it double x offset equals to 0 and then we have the y offset equals to 0 sorry for this right now I am using this because one press of this button I'm gonna toggle these values I'm gonna toggle these values and increase them so that I get some cool offset from x-axis as well as from y-axis and one thing more I'll be using another variable and M it has scale factor it will be 0 initially for other one right so this is these are the values that I will be using and playing with understand this that in animated container whenever we are toggling something we do too as of variables and initial values to builder your desired values right and next thing is to toggle it right so we have one parameter inside this animated container which is known as transform this take up as matrix for dot translation values so if you have seen my previous video beyond end metric container you would be knowing what are these translation values so these are some so these are the values how I want my continue to be shifted translation means moving one moving from one place to another so for x offset it will be x offset for y it will be y offset sorry it is y and for the Z it will be 0 that is for the z XS I don't want it to be translated we are not playing with any 3d kind of stuff and next thing is I want it to scale so you can always scale your widgets so for a scale factor it will be scale factor right if I restart this application it won't be seeing any any changes let me just right now if I start this application you saw that we didn't had any changes right so why were there no changes because we haven't actually given anything these are the default values and let's change the values on press of this button so whenever this button is pressed I'm going to set state always remember to set state whenever you are doing are playing with states in the widget because then only you will be getting the because then only you will be getting the changes in the UI next is when this button is pressed I want the X offset to be maybe 230 these are some random values that I'm choosing and for the y offset I wanted to be 150 maybe let's stick with 150 try tries different values based on your device pixels and the scale factor to be chained to zero point six right so what I expect is that whenever when this button will be clicked the offset will be 230 Y offset will be 150 and the scale factor will be zero point six that is this screen will convert itself to sixty percent of the original value save it and let's just start button if I press this you can see that we have the shifting now one problem is that when I'm pressing this again this is not coming back because we have not created any buttons for that right so let's write the logic for it so okay one thing okay one thing that I want a variable I should have some variable that tells me if this drawer is open or closed so so we'll create a boolean variable that will tell if the drawer is open or not the bull is drawer open initially what will be the value Falls okay always remember to give some initial value to your boolean expressions otherwise you'll get some better right so initially it is false so once this icon is pressed adding to all this stuff I'll write as draw open as true that is my drawer is not open now if this drawer is open I want the icon button to be changed to a back icon right so I will add the conditions here see I am NOT going through the structures as you have project to be structured I'm just explaining you the concepts here so here with me the structures are time following so all right is drawer open if it is open that is if the value is true then I want the icon button to be off back I can write so I declare another icon button here now this will have another function and now this will have separate functions and this will have and functionalities now the I can for this will be I can start Arabic iOS and on pressed what are we supposed to do or on priest this set state and the X offset value will be converted to 0 Y offset value shoot to be set as 0 as well and the scale factor to be set as 1 don't put at 0 here because that will be the 0 version size and next thing is is the drawer of open it should be set as false done make sense right so let's see you start this application and see you press this you can see that this I can has changed it has converted into back iOS I can and if I pass it you can see that it just came back to its original position so that's for the drawer part and next let's quickly make the UI for us you let's create a container and for the height of this container let me just give it at 40 pixels as a child to it I'm gonna make a rule right our children okay now understand we have a row first one will be this and second will be the description of the car that we are discussing here right so let's create the first part I'll be using two expanded widgets why because I want both of them to have equal spacing and equal spaces so to expand it which will ensure that the complete space is taken up now next thing is for the first expanded as a child to it I'm going to pass a stack I am using a stack because again if I if we remember that this image needs to be placed over this container right so for that at the children to it let's create a container you you okay so I've created a container let me just explain it once again I've created a container I've given it some border-radius as well as some shadows for the margin I'll give it margin from horizontal axis as 20 pixels right now this is the container I have not created anything else it's just a normal container given some decoration to it after that what I'm going to use is a line widget right inside this a line as a child I'll use image dot asset now I have this image in my sets folder it is images and let's see the name so you can see that I have an image known as cat bit one and it cat too so which is slash fit cat two dot PNG alright and let's save it and you can see that we have a cat now it automatically pops or why is it popping above this container because I've given some margin to this container if that's the cheat part here you can increase the margin and you can see that this container below is getting some margin but this image is not getting any margin so it's up to you how you're going to implement everything that's the G that I use that's how you're gonna implement the UI and let's move forward and quickly make the other container so I'll quickly give some decoration to it you can see that we have the container here and this container is taking up the entire space I don't want it to take the entire space so what I'm gonna give what I'm gonna do is I will just give it a margin and from top only I will give it a margin ah typical it is of same size so let's give it a margin of 60 pixels and from bottom I will give it a margin of 20 pixels and they were looks much cleaner much better now this container is actually square so to give some shadows and to gives first let's give it some shadow to the box shadow and the shadow list and then what else do we have we have we have to give it some we have to give it some radius so for that it will be border radius for the radius dot only right that is I don't want it to have some radius from here as well as here this needs to be squared this needs to be sharp only these two radius has to be rounded so for that we have border it is taut oldy we have top right this takes up the value as the radius dot circular and you give it a value of 20 and then we have bottom right same values save it and you can see that we have the UI here this will be the first part I'm gonna rap for this video I'll not be going any further why because the main thing that I wanted was to show how we're going to implement the dryer hair and how we're gonna implement all these UI the shadow stuff and the image to pop out from the container and the next part in the second part of this video I will be uploading that in one or two days so we will complete the drawer part as well as this second page so I guess you can make the UI till here it's just simple you make a column and the text widget the icons and different different icons they have used right so that's all for this video hope you liked the video if you enjoy the video hope you learned something from this video please write in the comments what else do you want and if you are happy with the video any feedback any recommendation any suggestions are much appreciated from your side and if you like the videos and if you like the contribution that I'm making I have all the links in the description you can always contribute there and that will be a huge motivation for me if you if you if you donate there if you contribute there and so thank you so much for watching this video hope you're having a nice day a nice time goodbye

Channel: The Growing Developer

Views: 77,906

Keywords: flutter tutorial for beginners, app development, amazing ui in flutter, ui in flutter, the growing developer, flutter, android app development, apps, detailed tutorial, easy app development, latest release flutter, ui development, designing ui in flutter, wallet ui flutter, flutter tutorial, flutter for beginners, drawer in flutter, pet ui flutter, flutter app development, flutter ui, animated container, amazing ui flutter

Id: Cg9vLhfvWBE

Length: 27min 34sec (1654 seconds)

Published: Tue Apr 28 2020

Reddit Comments

[u/cmdrNacho]

just curious how many prefer the hidden drawer vs bottom nav bar. I see a lot of apps are using the bottom bar more

[u/toufeeqahamedns]

Would be great if you can provide link to code