Flutter Layout Design Tutorial || Top 5 Widgets

Are you trying to layout the page in flutter and not able to decide what to use or you want to expose some of the most common feature here you go In this video I will discuss about top five widgets to build a page easily. Hello and welcome back to channel codex this is your host Afzal and you're watching flutter basics series. Before we actually begin let me thank all the subscribers we have entered thousand plus subscriber club and Counting.. As a giveaway I'm going to provide two license keys for Eagle software to know more about it watch the video till end. Without delay much let's begin with our first widget as the name suggests it's a group of witches placed vertically it's as simple as that if you come from Android background that is called linear layout and if you are a nice guy that's called stack view so don't get confused with the naming convention. What basically happens in column is your elements will be placed vertically one below the other so let's understand this with design so here I have three widgets an image text box and another text box which is placed one below the other inside a column so if you have to achieve something like this you have to use a call now the main thing to remember about column is this the main axis of the column goes in a vertical direction and the cross axis goes in horizontal direction now let me tell you there are three most important properties which is commonly used for column that are main axis alignment cross axis alignment and main exercise let's jump back to the code and see how we can deal with column so here you can see that I have a pretty simple structure there's a column and there's a three elements inside it one is this logo there's a spacing and there's a column again inside a call you can nest as many as controls you want there's no restriction on that so inside column I have a text I have two text widgets fine now let's discuss the properties so you can see that I have used main exercise as min why I have done that let's remove it and see what is the effect if I save it you can see that the column expands vertically so by default the main exercise of a column is set to max so if you don't specify it it's going to take the entire space available to it for that purpose I have used a main axis of size minimum now you know what is the use of min and Max and how the box now the next thing is main axis alignment to align your widgets in main axis you have to have enough room correct so with main exercise minimum you're not going to see any effect when you put main axis alignment let's let's see real quickly so I'm going to specify main axis alignment to the end I want to control to the end but that is not affecting because this controls they are tightly packed inside this column the column is not this big our column has a minimum size it's children requires so this is already packed so whatever you say start and center it's going to fit here you will not see the effect now let me change it to max and see you can see what column has expanded and children's are having enough room to adjust and to make its alignment so now you can say that you want it to be Center or maybe start different properties you can try okay what I'm going to do revert back to the original code and this looks awesome now let's talk about cross axis alignment so you can see that this image and the things are centered by default so cross axis alignment has a default value off center if you want things to be centered you don't have to specify that's the default value if you want something else so you can specify cross access alignment to one of these property so here if you if you want to say start so your things will begin from start if you say end your alignment it's going to be at the end now you may say why these two is not getting affected by these two didn't align to the end because here I have used another column inside and explicitly I have specified that this two should align from start because this two title and subtitle I want to be aligned from start and rest of thing I can control from here so inside a column if you want different alignment for your widgets you can nest with another column wrap you wrap your widgets with the column and you can easily control individual controls there's the other way also to put alignment to the object but that only works on the single object so I'm not going to get into that how we can do with the column that is about main agenda because we are trying to learn the basics of flutter which is five digits so let's remove this property and we have this nice card as per our design now let's move to our second widget our second widget is our row this behaves similar to the column but the only difference is the widgets inside the row will be placed horizontally so whatever you going to push inside this will be placed in a x-axis like this I have this controls there's an image there's a column around here there's some spacing and sorry okay there's some spacing and there's an item so again similar to the column we have this concept of main axis and cross access inside a row the main axis of row goes in horizontal direction and the cross axis goes in vertical direction so whenever you say main axis alignment cross axis alignment this is going to affect in this particular direction so this is the important thing that you have to remember about row and column that row column has main axis in vertical direction row has main axis in horizontal direction I think this is quite understood but this is the point where majority of people make mistake they want to align their digits in some direction they are trying with the different properties and not able to achieve what they want so I just wanted to make it clear fine now let's jump back to the code and see how we can deal with the row let me just quickly change the page here I'll say row demo for the source code I will give the link in description you can go ahead and check later for now let's see we have this items which is a logo there's a spacing there's a expanded widget and at the end there is an icon so this for widgets are placed in a horizontal direction okay now there's no property specific property I have assigned here because the main axis alignment it's already taking the max size which I want and for this extra padding I have used a padding widget for cross axis alignment this is already centered as a default value so that will work for me if I want to play something say for example let me show you if I say cross axis alignment to end oh it's going to look like see this I can move down so now all the widget inside is aligned to the end and cross axis this is the cross axis for roll so I don't need this the default value of center will work for me now you may say that for main axis we have a main axis size where we can control how it's going to shrink and expand in main X's but what about cross axis there is nothing called cross exercise we have only cross axis alignment if you want your control if you want your row or column to stretch inside a cross axis to expand in cross axis then you can use a property of cross axis alignment and give a value of stretch so this will stretch your control in cross axis see this is how it's going to look main axis it's already expanded now we expanded this in cross axis so this behaves like a cross axis size but this is named as cross axis align this is the important point to remember I hope I made this point clear now let's move to our next vision stack also has the children's property it accepts multiple children but instead of working in X or Y which is horizontal and vertical direction it works in Z direction so this is kind of a 3d thing whatever you are putting on the screen that is going in the Z direction like you have placed something inside a box and you are seeing it from the top so all the elements you are going to push that will be placed on top of each other and you can see the top element first and whatever remaining visible area that you can see let's jump into the code and see how we can achieve this UI and how to place widgets on top of each other with the help of stack and we will also discuss some of the properties and some of the most commonly used widgets inside stack eagle is the software to organize your images assets and digital file at one place you can filter with as simple as providing a color or shape or there other parameters to filter with not only that it comes with a browser plugin so if you like some image on the Internet you just have to drag-and-drop and it's there in your organized folder simple isn't it but what if I want to download multiple images just press alt 1 and you will get the list of all images available on that webpage select as many as you want and click import and here you have it you can use these images in any software you like just don't forget to credit the author there are other tools like capture page capture area bat save with eagle software you can use all you have to do is subscribe the channel right away like the video and provide your comment with the hashtag flutter I'm going to choose the comment which I like the most and I'll give away two licensed copy of this code software now back to our video let's do this exercise again I'm going to change my base to stack demo and see we have this kind of design okay maybe I change it so let's discuss this first then I'll show you how we can place that I can as well now you can see that we have fun opacity element and there is a one position dot fill element so this opacity actually contains our previously designed row if you see inside we have the same row which we designed previously on top of it I just added opacity to give it a feel of like not clickable disabled now this element was there on top of it in Z direction we added position towards fill now position widget is commonly used with a stack which positioned you can specify the exact place of the jet here I have used a film which means whatever you are going to place that will fill the entire space available to it inside that you can use any widget here I have used an icon with this cross so this gives a feel of not clickable item okay let me show you the example which I have designed in Adobe XD who's a positioned and this we are not going to use our film instead we'll give exact position so let me just add a child quickly to it now you can see the default behavior of this stand that whatever you are going to push into the stack that will be placed on the top-left corner and you can change that position by providing left so say for example I want a pixel from left hand side and from top I want 8 pixel down and now we got this a star over here so position position dot fill align these are the widgets which are commonly used with a stack so you can place as many as elements you want and that will be placed on top of each other as I said earlier and that makes it more flexible you want to have something say for example you want something over here bottom so it's very easy you can just duplicate and say from bottom I want eight pixels from right side I want eight pixel now you have it here you can define from right I want 32 pixels that will come here you can play around with the entire space you have available with you container one of my favorite widget container is like a wrapper it isn't too actually much to the layout but it has all the necessary properties to customize your widget say for example you want padding you want margin you want shadows you want maybe gradient background tons of feature our packet of container that makes it more flexible always when you feel like you have to decorate some of the widget you can use container let's jump into the code and see how does it work so I have said here they this is again the same code which we used for the previous one instead I just grabbed this row inside a container one of the most important property of container is decoration you can customize your container as you want with the help of decoration say for example you want to change the radius of this bottle you can do it with the help of water radius property okay then you want to specify a gradient now this gradient can be linear gradient or radial gradient starting from Center or however you like you can specify multiple colors to have your radiant this is a two color gradient starting from dark blue to something light blue you can add as many as color you want in this array so it automatically it will adjust the gradient in that manner now with with this color property you can specify some of the other settings like from where your gradient should begin so you can say from top right or top whatever whatever you want so for this demo I'll say top center where your gradient should end I'll say bottom center so basically I'm creating a vertical gradient over here you can see from top center to bottom center the gradient has changed you can always you can also specify stops if you want so you can specify custom values from where it should start which color should take how much space you can give it tile mode and there's many more to it right same thing goes with radial gradient okay now we have covered the gradient part now let's look at the shadow part so you can specify shadow to container by using a box shadow and this is array of shadow so here I have specified only one shadow container itself has so much to talk about that I can create on the video for container itself so if you guys are more interested on container part or more features about container then write down in the comment and I will create a video for container but just to cover it quickly let's talk about box shadow so how we can give shadow to container here but remember shadow box shadow is an array so you can specify multiple shadows so here I have given one shadow which is of color pink just for demonstration purpose its and blur radius what it's going to do it will provide the blurriness till 12 pixel and it has an offset of 3x3 which means the shadow is 3 pixel away from horizontal axis and 3 pixels away from vertical axis now if you change something like in vertical axis I want to displace the shadow by 12 pixel this will grow like this so there are many more as I said one common mistake usually people do with container that they specify color initially something like say for example the last dot Raider ok now you will get this error if you are using decoration you cannot specify color outside because all the decoration thing has to be inside the decoration property that is the common mistake people do while developing if you have color outside over a is just pressed all key and down arrow you have your color inside we are done with the container now last but not the least Oh in fact this is list almost all application has list either it's a collection view recycler view list view whatever you call it but you have a some sort of listing inside mobile application and that makes it a building block of mobile application that's why it's covered in our top 5 widget now we will see how easy it is to produce a list inside flutter let's jump to visual studio and here is a list demo again it's the same card we have the same container now what is the difference is we have wrapped everything inside a ListView builder now there are different variants of ListView that is called this generate ListView taught builder list as a control itself and then we have lists I'll and there are many more to it again list which is a very big topic but at the top of widget what we are going to look at these two properties one is item builder now remember item builder takes two parameter one is the context and second one is the index this is the key part where you are getting the index of your list say for example you have list of contact and you have 10 contacts so while iterating it will give you the index that I am iterating the first contact which means the zeroth element for each item the index will be changing and you will be getting a different contact okay and this contact you can use inside your control here like something like this you can say contact dot name contact dot phone number you can map it here this is how ListView binding works now the second property of the ListView which I want to discuss is item count say for example you have contacts as list then you can say contacts dot length so it will dynamically take length of your list and it will iterate through each items using item builder and it will return each time a new container and let's see how it's going to look like so this is our just single element I'm going to change this value to hard-coded something five again okay and now let's change to list them and see if we have a nice list view over here with all our five elements with that our video comes to end thank you so much for watching subscribe the channel if you haven't already do like this video and give your feedback in the comment section below see you guys in the next one

Channel: CodeX

Views: 47,223

Keywords: flutter, tutorial, how to, android, ios, ui, top, five, widgets, row, column, stack, listview, container, linear, gradient, development, flutter ui, flutter tutorial, flutter app development, flutter widgets, flutter ui design, flutter tutorial for beginners

Id: -z26yE9g0Hg

Length: 21min 4sec (1264 seconds)

Published: Thu Mar 19 2020