Flutter - Creating Custom Material Navigation Drawer [ Drawer | Inkwell ]

hey hello welcome to this new flutter tutorial and today we're gonna be creating this customized navigation drawer in flutter so this sort of navigation drawer material navigation drawer is an Android thing basically but using flutter we can create this effect in both for both Android and iOS in Android you have to do kind of a lot of stuff to get this going if you're not using the template but in flutter it's kind of really simple and really easy you can build this whole thing using scaffold and adding customized widgets to it so I'll be guiding you through the process of creating this sort of nice-looking drawer which has kind of a header there with an image and a text and these customized items list items which create this ripple effect of deep orange or any color that you might need so you not get this sort of effect out of the box you have to create the things yourself so I'll be guiding you through the process of creating all these customizable things that you might need in your applications okay so let's get started okay so now we are in a fresh project given to you by Android studio I have cleared out the main dart file usually there is an application here that is given to you as a sample I cleared that file and I have imported the material dart file the art package and I've created a void main' function with a run app function that calls the material app now we're gonna create a new class that is called homescreen that extends a state less widget okay so this home screen is basically the home for application defined in the material app so for the home screen I'll be adding the missing override as you can see that a home screen is a stateless widget because we're not going to go any anything that affects the state of the widget so I'm just for the simplicity sake I'm just using the stateless widget okay so for the homescreen we're adding a scaffold so that as a root of widget so that we can use all the features like app bar so I'll be adding a new app bar that saves the title of sorry let's say the title of text a draw tutorial Dora tutorial and I'll be setting the background color to colors that deep orange as you can see that in the tutorial I in the sample application I do have the deep orange color in the app bar I'm using this as the theme of for my applications so okay at this point when I run this application you can see that when I save this and I run this application we have this drawer new app with a drawer tutorial title on the deep orange app bar now there is a simple way of adding drawer to your applications in flutter and that is simply by using drawer property of the scaffold okay you can simply add a new drawer like an app bar for drawer you have you can create a new drawer the drawer is also a new widget in flutter so the drawer takes a new child so what a child of a drawer will be it will be a list of items that will contain a header and a list of navigation buttons that you further would link to your navigation or any other sort of thing that you sort of actions that you want to perform when the person clicks on the drawer buttons so for the drawer we'll add a new child of list view I'll be creating a simple list view because we know that the items that we're gonna add to the drawer or finite otherwise we'll be using list builder because it takes an account the items that are being shown on the screen but in this case we only need to add five to six items so we know the count and it doesn't really affect the efficiency of the application so in this case I'll be adding new children to the list view for the first children you can add sort of a material okay so you can add a customizable a header also but flutter also gives you a drawer header drawer header this drawer header is basically a widget that is given to you by flutter itself to add as a header to the drawer okay so for the child of the drawer header I'll be adding a simple text for now simple text that says this is drawer header okay so other than the drawer header we'll be adding a new list tile this the list tile is just for now so that I can just explain you how the drawer works so in the list I'll I'll be adding a new child sorry I'll be adding a new title that says text this is tile one and I'll be adding just I'll be copying this list I'll copy comma I'll be sorry I'll be adding this list I'll a few other times okay okay so now we can see that there is sort of a hamburger icon on the top left hand corner of the application that when we click on this hamburger we are presented with a drawer it as simple as that that you can just add a new drawer property to these scaffolds and add a new drawer there draw a widget that contains the drawer header so at this point we can't really see that the boundaries of the drawer header so we can clearly see that so the tiles are there this is child one I forgot to change the numbering there but okay so we'll be customizing this draw header first to make it look more like this we'll be adding a gradient to the drawer header so we can clearly see the boundaries that the drawer header holds okay so for now we'll be going to the drawer header in the drawer header I'll be adding decorations that is another property of the drawer header and for this we'll be adding box decoration and a new ingredient so for the gradient I'll be adding a new gradient linear gradient so there are few other type of gradients like radial and steep so I'll be using the linear gradient and for the colors I'll be adding a new list so the list will be of type color and I'll be adding to the list colors dot deep orange and the second color we want to be colors that orange accent okay so the gradient will go from deep Orange - orange accents that are the two containing colors of the list so I'll just save this and we'll see what happens okay so now we have a list drawer so sorry a drawer header that has a gradient that is going from deep Orange - orange accent color so this is looking really good we'll leave this as it is so that we can customize the items first so as you can see right now we have the list tile and even if we add on tap method to this list tile and give it an empty function and I saved this so you can see that there the ripple effect that is being shown here is not really quite catchy okay so we want to create sort of for customizable list items which we can use any other at any other place in our application we want our list items to look like this and to achieve this using the list tile is completely possible but it's quite a painful experience so we'll just create a customized widget and we'll use that in our application so for that I'll just come out of the homescreen class I'll create a new class called customized custom list tile and that will extend state last widget so in this I'll be adding the missing override that is a build method as usual and in the return I'll be adding a new what should we add we'll be adding a new inkwell okay so inkwell is another widget that is given to you by the flutter SDK it is sort of a button with an on tap on double tap properties and many other properties that can you can see that it has on tab children boria's custom border and on double tap on long press it's kind of a customizable button you can customize this to really a great extent so that you can get the field that you want to show in your application so for our a use case we'll be adding a new child to it at this point and we'll be keeping it row okay so we'll be keeping it a row because in our application we want to show an icon profile and right arrow and we want them to be in a horizontal alignment that is given to you by the RO widget so for the row I'll be adding the children property and for the icon I'll be adding Koons dot first just for testing purposes and for a text I'll be adding simple text quality calling profile and a new icon that sort of says I can start arrow right okay so at this point this custom list a tile is not really customizable because I have just provided hard coded values to its contents but I'm using this just for testing so we'll replace the second list tile with custom list tile so that you can see the difference so I'll be creating a new custom list tile and when I save this okay so now when I run this application you can see that the second tile in the drawer is containing an icon a profile and another icon that is the arrow right okay so we want to customize this tile so that it can more look like this instead of just the all the icons mushed together on the left-hand side of the drawer okay so for achieving this I'll be going back to the inkwell so for the row I'll be adding the main axis alignment and for the main axis alignment that is the x-axis of the row I'll be adding the main axis alignment space between so when I save this you can see that all the items are sort of aligned the space between all the items is given evenly so for achieving this type of effect where the icon is right where the profile the text is right adjacent to the icon and the other icon that is the arrow is on the extreme right we'll be taking first two properties that is the icon the main I can end the text and instead of them I'll be adding a new row because for the row the default property is that all the items are aligned to the left-hand side I'll be adding a new children property and in there I'll be adding the icon and the text that were outside of it so when I save this you can see that the first icon and the profile are in the extreme left hand side and the other icon is on the right hand side but the size of the tile is not quite right at this point so for that I'll be increasing the size of the text by adding style to it call with the text style and for this I'll be adding font font size I'll keep this at 20 sorry 20 is more than enough 15.0 at maybe so when I save this and the size has increased but not quite much I'll be keeping this 16 okay so that is acceptable and the text is sort of right adjacent to the icon we want some padding to be there for the text so I'll wrap the text with a new padding I'll save this now and you can see that it is starting to look a bit like the example that we're talking about so at this point you can see that the alignment is quite right but the padding of the list items is not quite good and when we tap on the items nothing happens there is no ripple effect that is the property of inkwell so for achieving that sort of ripple first we have to activate the on tap method so in the inkwell about the child I'll be adding on tap method and for now I'll be keeping this empty and when I save this you can see that now I can click on the item and there is sort of ripple effect but that is quite them and it's not quite attractive at this point okay so at this point the icons in the tile the items in the tile are not quite padded the profile is padded from the icon but the hole of the tile is not quite padded nicely I need to add some padding to the inkwell itself I'll add some padding of eight and when I run this you can see that the items are nicely padded and as we're applying the edge and sets to all the sides of the inkwell we don't want this to happen we want the padding to be on right-hand side on the left-hand side so I'll use a ten sets dot from LTR be left top right bottom so for the left's I'll be adding 8.0 for the top I'll be adding zero for the right I'll be adding 8.0 and for the bottom I'll be adding zero so when I save this you can see that there is not quite noticeable change but it does make it better so what we want to make now is the inkwell the default way the inkwell works is or any and any widget works is that it tries to take minimum space that is required to cover its children so at this point I want to add a container to the inkwell with a defined height okay so I wrap the row with a new container and the container is given a height off let's say 40 so when I run the application now you can see that is not quite noticeable here but when I change the color of the inkwell so I'll change the splash color the splash color is defines the color of the ripple effect so I'll add colors dot orange accent and I'm gonna save this you can see that the inkwell is really looking nice and it is covering more space than it was before because we have added a container that has a height of 40 so inkwell will have to have a minimum height of 40 and the width of the drawer so this sort of effect is really nice and what I'm noticing is that we need to change all the items to the custom list I'll delete all these list tiles custom list tile comma I'll copy both of these copy and I'll just put them there okay so now save and run this you can see that all the items are really nicely padded and there the ripple effect is looking really nice so what I will do now is we don't want all the items to be same we want to customize the custom list tile to make it customizable so I'll add the constructor to the custom list tile called custom list tile and here I'll pass this dot icon the icon and that should be there on the left hand side the main icon and this that text whatever we want to be the text of the tile and this dot on tap whatever action we want to perform whenever the list icon is a list tile is clicked so I'll be adding a new icon data that is sort of the first argument of the icon here the icon the first argument is icon data so I'll be adding a new icon data called icon and a string of text and a new function of on tap okay so we have a constructor and we have the variables here in the class now we want to replace the hard-coded once - I put icon here and for the text I put text and for the right arrow we don't need to put anything but for the tap although will not be doing anything when we click on the item but for the sake of it I'll be adding in the on tap here which will be empty eventually but okay we have an error here okay you want to fill the items I forgot so I'll add icons dot person and I'll have the text of profile and an on tap method that says that says empty we don't want to perform anything yet so I'll copy this and I'll just replace every one of the tile and for the second tile I'll be calling this notifications and I'll be changing the texts to notification and litter to settings hmm the icon to settings and the fourth to log outs and for some reason I wasn't able to find out log out I can I don't know why is that but I'll just replace that with lock for now you can add your custom icons to it but I'm not going that way so I'll use log out as the text and when I save this you can see that all the items are really looking nice with different texts different icons and different arrows here so what we want to do now is we want to increase the height for each list style to sort of match this and really look more clean than that than what we have now and we want to add these horizontal lines horizontal lines between all the list items and so for achieving this first we'll be adding the padding so for padding sorry padding I'll increase the container height 250 and when I save this yeah you can see that the items are more nicely padded more evenly padded because we are increasing the height of each tile and it sort of matches with the padding that we have for the icons so at this point we need to add that border that line here so for that I'll be going to the inkwell I'll just wrap the inkwell with a container and I'll be adding a new box decoration so box decoration does have property called border so in the border I'll be adding a new border that says that has a top that does take a border side border site and I'll set the color to colors dot gray for now and when I save this you can see that there are lines but we don't want the line to be on top of each tile because when the drawer header ends we don't want the line to be there so in the example you can see that the line is only between the items so instead of adding the border to the top I'll add four to the bottom and I'll sort of decrease the shade of gray dot shade I'll keep this 400 and when I save this you can see that we have nice lines between the list items okay so this sort of completes the bottom section you can see that we have nice inkwell effect and all the items are looking really good in the bottom section but this drawer header it is not quite looking good so what do we need to do is we need to add an image and a text in the bottom so that it looks like this we are using a flutter icon letter logo and a flutter written below it okay so what I will do is we'll go to the drawer section in the scaffold and in the drawer in the drawer header what I'll do is I'll replace a child so okay at this point I'll be adding a new container here and in the container I'll be adding a child that says column that is the column and for the column I'll be adding the children property and for the children I'll be adding a new image so what to expect from this image is that we want this sort of rounded rounded icon that contains the image so for this rounded feel I'll be adding a new material mm-hmm and for this material I'll be adding a new child of the image but at this point we don't have an image in the application so for that I'll be commenting on this code for now and what I will do is I'll just create go to the root directory and there I'll be adding a new directory called images okay and for the images I'll be going to the folder and I'll just copy this flutter logo and to the images I'll be adding this folder I'll be adding this image flutter - logo dot PNG so we'll go to the pub spec yeah old file and there we need to define the image to be used in the application so I'll just comment off all these things and there we have - image - flutter - logo dot PNG so this is sort of the way to define the the assets in flutter so when I save this you can see that there is the get dependencies that means that the application built successfully because in pub spec the ML file there is a lot of issues which comes with the spacing so you need to space the items evenly and I that's the reason I just pasted it beforehand so that I don't have to face those kind of errors if they come okay so I'll just close this pops back to the ml file and I'll go to the material and here now I can use just uncomment the child and for the child I'll be adding new image dot asset and here I'll be for the first argument I'll be adding the path that is the images - flutter I'm sorry I'll be adding flutter - logo dot PNG and for the width I'll be giving 100 and for the height I'll be giving it a hundred so at this point when I run this application you can see that the material does have sorry the material does give you a white background but it is not quite rounded so for that rounding feel what we want to do is for the material want to add a border radius and we want a border add a border radius dot all and for the radius I'll be adding a new radius circular will keep this 50.0 and I save this so you can see that now there is nice borders around the material okay so it gives it sort of a rounded feel here at this point the I can is sort of protruding out of the material but we want to keep it inside so I'll just add some padding to the image and for some reason the intellisense doesn't work here so I'll just cut the code and I'll add a new padding and in the padding out as a new inch in sets dot all and give it a value of 8.0 and for the child of the padding for the I need to add a comma there and for the child of the padding I'll be adding that image and when I save that you can see that it is not quite round anymore why is that because when we created that circular feel our image was having the width and height of hundred and the image will keep that within height of hundred but it will also add padding so now the within 108 okay so on the 100 plus 8 so it is 108 so what we want to do now is we want to decrease the width and height of the image we'll keep this around 80 and when I save this you can see that the material is now rounded to the material I'll be adding elevation I'll be adding elevation that is of 10 and I'm going to save this yeah you can see that to the material is raised up and it gives nice look and feel to the material app that we're gonna create so below this I'll be adding a new text so in the column children I'll be adding a new text sorry it was outside of widgets I'll add a new text here that says flutter and I'll be adding a new style that says and that takes a texas-style and I'll change the color of the text to color stock white and a font size to be 25.0 and when I save this you can see that - there is a nice image and below that there is flutter but there is no gap there so I'll be covering I'll be rounding the text with a new padding so for the padding I'll be adding a chin sets dot all eight point zero and for the child I'll be adding that text save this there is spacing issue I'll just decrease the padding oh sorry I'll just keep the padding 8.0 I'll decrease the size of the text in this case I'll keep this 20 and I'm gonna save this you can see that the flutter is really look nice below the image and we have all the tiles that are customized over design pattern okay so today we learned how to create this sort of customized drawer in your application with an image a title and a header and sort of these customizable list tiles where you can add icons and text and other icons and all these nice inkwell effects that is sort of the ripple of different colors so I taught you how to use how to use inkwell and different widgets like drawer and drawer header and all these sort of things so now you will have a clear understanding of how to implement how to implement the navigation drawer in flutter that can be used in both Android and iOS so I hope you had a hope you learned a lot and I'll see you next time

Channel: RetroPortal Studio

Views: 90,726

Keywords: Flutter, Flutter Basics, Navigation Drawer, Material Drawer, Material Navigation Drawer, Drawer, Android Studio, Android, Navigation, Flutter Navigation Drawer, Flutter Material, Flutter Development, Flutter Course, Flutter Tutorial, Flutter Lesson, Flutter Easy, Flutter Inkwell, Flutter Inkwel, Flutter Widgets, Widget

Id: jDQQM1RfjNc

Length: 30min 41sec (1841 seconds)

Published: Sun Jan 06 2019