Top 10 Must Know Widgets In Detail for Flutter Developers | Flutter Tutorial

[Music] hey hello friends and welcome to retro portal studio and in this video we're going to take an in-depth look at top widgets for UI design in flutter which every flutter developer must know the ranking of widgets in this video is just for demonstration and does not hold any special meaning this is going to be a long video and you can find the timestamps for all the sections in description below some of the widgets in this video might seem simple but I strongly suggest you to watch the detailed explanation because for each widget we're going to look at all the essential properties and you might find some new use cases for the same widgets so without further ado let's get started [Music] okay so let's say we have a simple app in which we have only one textview on the screen and it is sticking to the top-left corner of the screen so what a central widget lets us do is well it helps us Center the widget but whose center so to use the center widget in Android studio what I can do is I can click on this text here and click on alt enter and it will prompt me with the options and I can click on wrap with widget and what I will do is I will wrap the text with a center widget and if I click on save now and it will heart reload the app into the emulator and what you can see is the text is in the center of the screen so basically what a center widget does is it takes the width and height of the parent and it centers the said widget that is the child of the center widget into the center of its parent so by default the center is having the width and height of its parent so what if you want to change that so other than this child property Center is also having two other properties that are called high factor and width vector so let's take a look at height vector first so let's say I move the child down and add a high factor here and what a high factor will do it will take the height of this textview and it will multiply this height by the height vector and it will assign that height to the center so right now in the emulator we have a textview in the center here and if I add a high factor of two and if I save the app again so now what you can see is that the textview is no longer in the center of the whole scaffold so why is that so basically what's happening is that the center is taking the height of the textview and multiplying that by the height factor and then assigning the height to the center itself so right now the center is taking this much height and is centering the textview inside of that and you can also see that the width of the center is the exact same width of the scaffold this is because we're not using the width factor right now so let's take a look at it so if I go down here and add up with factor also and give it a value of two and then save it so now you can see that the width of the center is no longer the width of the scaffold it is twice the width of the textview that is the child of center so basically what Center is doing right now it's taking the width and height of the textview and then multiplying that width and height by the width and height vector that is to at this point so the width of the center is going to be twice of the top textview and the height of center is going to be twice the height of textview and it's centering the textview inside of it so you can say that the child is the most important property of the center and if you want to adjust the width and height of the center you can use the properties called width vector and height vector [Music] so a container is one of the most used letter widgets and it is for a reason when you add a child to a container what you can do is add a background color shadow margin alignment and you can also transform the widget by adding rotation scale and much more so let's say we have a simple app here in which we have only one text on the screen and that is at the center of the app using this center widget so what we want to do is we want to add a background color to this text so that can be done using a container so basically what we have to do is we have to contain the text inside a container so for that what I can do is I can just click on this text and add alt enter on the Android studio and wrap it with container so what we want to do is we want to add a color property to the container so in this case I'm just going to use colors blue so in this case what I also need to do is add a color to the text so it's visible in the container so I'll just go to the textile and add a color so if I save the app and see the emulator you can see that the container is containing the text and the color of the container is blue that is as the background of the text but at this point you can notice that the text is touching the borders of the container so what we want to do is we want to add a bit of space between the text that is the actual contents of the container and the vaults of the container so for that what we can do is I can just go to the container here and other than the color I can add a property called padding and in the padding I can add a new property that is called add in sets and using the constructor all I can just add a value of 8.0 so basically using this property I'm adding 8 points of padding to each side of the container so if I save the app and go to the emulator you can see that the container has applied 8 points of padding to the content that is the text so other than the color and padding when I click on control space you can see there are a number of other properties also so the next property that we're going to take a look at is this constraints so what constraints basically does is it helps you in giving minimum and maximum dimensions to your container let's say I want the container to take as much as possible width and height so for that what I can do is I can just use box constraints dot expands so if I use this property and save the app so you can see that the container takes all the available width and height available to it by its parent that is in this case it's Center so if I want to give my own box constraints to the container what I can simply do is use a separate constructor of box constraints so for that what we can do is use box constraints and use this constructor here and if I click on this it wants me to give it four properties that is maximum height and maximum width and minimum height and minimum width so from here what I can do is I can assign a minimum width to the container so in this case I'll just assign a minimum width of 100 so if I see the app and run the emulator you can see that there is absolutely no change in the container because it was already taking a minimum width of 100 so the problem will come if I just add a maximum width that is off 150 because the container is clearly taking more than 150 pixels so if I save the app again and go to the emulator you can see that the text wraps to the second line because the container max out at 150 pixels but the text needs more space than that so it basically wraps down to the bottom and because we don't have any maximum height property there is no problem in that so basically as the name suggests constraints help you provide minimum and maximum dimensions for your containers so let's say we keep the app have the Box constraints of expand so in this case the container is going to take the full width and full height so what we want to do now is we want to align the text in the center of the container so that brings us to the next property of the container that is the alignment so by using the alignment property we can align the contents of the container so in this case if I just write alignment dot Center you can see that the text appears in the center of the container and you can also change the alignment to center left and if I save the app you can see that the text is aligned to the center left of the container and you can provide all sorts of alignments that are given to here in the form of static constants so I'll just keep the alignment at the center for now so in the alignment we have a basic property of width and height so as the name suggests I can give a particular width to the container so I can just write 200 here and we can also add a height property that also says 200 but if I save the app and go to the emulator you can see that there is absolutely no change because in this case we're applying constraints and we're using the constraints of expand so a container is taking the full width and height that is available to it so in most scenarios what you do is you either add the constraints or add the width and height so if I remove the constraints for now I'll just comment it and if I save the app and go to the emulator you can see that the container takes 200 written Heights and is a complete square so I'll just remove the written height from here and we move on to the next property that is called transform so by using the transform property we can change the scale rotation and all sorts of dimensional properties of the container so in this case I'll just show you the example of changing the rotation of the container so in this case what we have to do we have to use metrics for dot rotation and for rotation I'm just going to use this that axis so for that I'm just using the function called rotation Z and we have to pass radians these are not degrees these are radians and if you don't know what radians are you can just take a quick look by a search on Google so in this case I'll just write a value of 0.5 which is approximately equivalent to 30 degrees so if I save the app right now and I go to the emulator you can see that the container is rotated by 30 degrees right here so in this case it's quite hard for me to see the container so what I will do is I'll just remove the constraints and add a width of 200 and a height of 200 also and I save the app and go to the emulator you can see that the container is rotated by 30 degrees so there are all sorts of other properties in the transform so we'll basically be taking a look at transform in another individual video because it itself is a much more detailed concept so I'll just remove the transform property from here right now so the other property that we want to take a look at is deck so by using the decoration you can change a number of properties of the container like the shadow the shape the borders and the box shadow so for adding decoration what you have to do is you have to use box decoration and in the Box decoration you have a number of properties like color border border radius and so on so in this video we'll be taking a look at the most used properties for the box decoration so the first one is the color so for the decoration you have to keep one thing in mind that you can't use the separate color property if you want to use the decoration property of the container so we'll have to supply the color in the decoration so I'll just give the color of color blue and if I save the app and go to the emulator you can see that there are absolutely no changes in the app so other than the color we're gonna take a look at border so for providing value to the border you can use a simple constructor of the border class so in this case you have to provide separate values to the top right bottom and left and instead of this what you can do is you can also use border all if you want to provide same type of border to all the sides of the container so in this case what I will do is I'll just use border dot all and provide it with a color that is going to be colors black and I'll also give it a width and the width is going to be off to point zero in this case and other than the width I'll give it a style and the style is going to be border-style:solid so if I save the app you can see that the container is having a nice border around it so you can also change the radius of this border by using the border release property so what this border radius requires is an instance of border radius and I'm going to apply the radius to all sides and in this case you can provide a radius not circular and the circular radius can be of 20.0 and if I save the app you can see that we have provided 20 point radius to each corner of the container so other than the border radius property let's take a look at box shadow so with the help of box shadow property you can give multiple shadows to the container because the Box shadow property takes a list of box shadows so in this case I'm just going to add one child to this list so in this case I'll just add box shadow and the shadow is going to require color spread radius border radius and offset so for the color I'll add colors gray and for the blood radius I'll add it approximately to 4.0 and for these spreads I'll just keep it minimum at one point zero or two point zero let's say and we're not going to give any offset right now so I'll just save the app and watch the emulator and you can see that there is a bit of shadow to the container so for making it more visible what I'll do is I'll just remove the border property from here and I'll change these color of box shadow to red so that you can see the shadow clearly so I'll just save the app and go to the emulator and you can see that we have added a bit of shadow to the container so other than the box shadow we also have another property that is called gradient so what you can do with the gradient is you can add a linear gradient or any other type of gradient to this property so I'll just be using a linear gradient so for using the gradients we don't need to use the color property right here so I'll just remove the color property and I go down here to the linear gradient and this requires a list of colors that the gradient need to move in between so for the linear gradients what I'll do is I'll just pass the list of colors so in this case I'll just use color start blue and for the second color I'll use colors dots light blue and so basically we will be getting ingredients between the blue and the light blue so this linear gradient also requires a starting and an ending point surface starting we'll have to add this begin property so in this case we'll add an alignment and add the alignment of alignment Center left because we want to start the linear gradients from the center left position and we want to end it on the alignment of Center right and if I save the app right now and go to the emulator the change in the color is quite light so I'll just change the color from light blue to white and I'll save the app and run the emulator again and you can see that the gradient is starting from the blue color and go to the white color from center left to center right so other than all these properties we also have another property that is called shape so for using the shape I'll just have to remove the border radius property from here with the help of shape what you can do is you can add a predefined shape to the container or you can create your own shape so in this case I'm just going to use a predefined shape that is going to be box shaped circle and I'm just going to save this and go to the emulator and you can see that the container has changed its shape from rectangle to circle so instead of adding the border radius you can simply use the shape property right here so these are all the properties that are associated with the container and the box decoration that is used as a value to the decoration property of the container so row and column are frequently used to arrange visits in horizontal and vertical fashion respectively both these widgets have a children property which takes a list of widgets we will be taking an example of row here and the knowledge is transferable to column with it right now I have a center widget in which I have a simple sex so let us say instead of this we want to have three buttons horizontally that is along the x-axis so we have to use a row visit for it to use it we simply replace this text with a row and in this row we have to add a children property now this children property requires a list of widgets in which we have to add multiple widgets so in this case I'll add three simple buttons that is button 1 1 2 and 1 and 3 so when I heart reload the app you can see that there are three buttons arranged horizontally in the center so what I'm going to do right now is I'm going to wrap the row in a container so I'll just wrap the row in a container and I give the container a color of color start red the reason for adding a container to the parent of the row is just to make you see that the row is taking full width of the screen that is the available space so what if we want to change that for this what we can do is add a simple property to the world that is main access size and for the row the main access is always going to be the XX and by adding this main exercise but we can simply do is we can call main exercise men and if I save the app you can see that the row is now taking only the space that is required by its children and if we set this main exercise to max and I save it you can see that the row is now taking the full width of the screen and the main exercise dot max is the default value for the main exercise so let's keep this main exercise to max so that the row can take the entire width of the container so what we need to do now is we need to align the children along the main axis that is the x-axis for the world so for that what we can do is we can simply use main axis alignment and by default the main axis alignment is set to start and if we set the main axis alignment to center and save it you can see that all the children move to the center of the world and if I change this to end and save it the children move to the end of the row and other the distort center and end we can also set space between and by using this property all the children will have equal space in between them and there is another property that is called space around and what this will do is that each of the child is having a space around it so you can see that by using different values for the main axis alignment you can align the children of the row along the accesses in multiple ways so at this point you can see that the height of the row is only the height that is required by its children so just to give the Rose some extra height what I need to do is I need to add the height to the container and I'll just keep the height to 200 so right now even if it's not visible the row is taking the entire height of the container so just to prove that I can use another property that is called cross access alignment and the cross axis alignment in case of row refers to the y-axis so by default the cross axis alignment for the row is at the center and if I change the cross axis alignment to start and as soon as I save the app you can see that the content of the row moves to the top that is the cross axis alignment dot start and if I change the cross axis alignment to end and I save it the children of the road move to the very end of the container and if we change its back to the center all the children with the center of the container at this point we can have another question that when we set the cross axis alignment to start and save the amp why did the views move towards the top of the container and the answer is quite simple that by default the vertical direction of the row is from top to bottom and there is another property to alter this behavior that is the vertical direction itself and by adding the vertical direction to the row we can set this vertical direction to up and by setting this vertical direction to up we're saying the row to change its vertical direction from bottom to top and now if I save the app all views move downwards so when I set the vertical direction to up the start now moves to the bottom because the row is now pointing from bottom to top and when we set the vertical direction to town and save the app the cross assess alignment star makes the views move to the top because now the row is pointing from top to bottom so in the same way we can also change the direction of views from left to right and for that we have to use a simple property called text direction and by default the direction of views in horizontal axis for row is from left to right so in this case if I change the text direction from right to left that is using RTL and save the app you can see that the bottom three comes first then the second and then the first and if I change it back to LTR that means left to right the button one comes first two comes second and three comes third in the same order that we're giving it to the children property so basically the default vertical direction of row is from top to bottom so when we set the cross axis alignment to start it moves the views to top and if we change the vertical direction to up the row will now point to bottom to top and the cross access alignment of start will move the views to the bottom so these are the properties that you will require most when using the row with it so the properties of the column are similar to that of the row and the knowledge is transferable so if I change the row to a column and save the app you can see that the buttons get transferred to a vertical fashion and to make it a bit more appealing I can add a simple width to the container and let's just make its 400 and save the app and right now the cross axis becomes the x-axis and the main exists becomes the y-axis because the column aligns the children from top to bottom so the main exists is the y-axis and the cross axis is the x-axis so right now we have the main access size of Max so the column is taking the full height of the container we have the main axis alignment to space around so each child widget is having a space around them we also have a cross axis alignment to start and the cross axis in case of column is the x axis so all the views shift to the left hand side and because by default the container is moving from left to right because we have the text direction of left to right so you have to keep only one thing in mind that the vertical Direction deals with the y axis and the text Direction deals with the x axis and how the vertical direction and text Direction affect the main axis and the cross axis depends upon the view that is in case of the column the main axis is the y axis and in case of the row the main axis is the x axis and just by experimenting with these views you can understand these properties in a much better way because rows and columns are one of the most frequently used widgets in Flour development [Music] we have learned that by using row and column we can arrange widgets in horizontal and vertical fashion but there is a limit on what we can achieve using these widgets so let's take an example in this app we have three buttons and they're being displayed in a horizontal alignment now if I try to add two more buttons to it and save the app the layout breaks and we have this yellow barrier that tells us that there is no more space to display all the child widgets so in such cases where we do not have control over the number of widgets which we have to the row or column and they can easily exceed the boundaries of the device we can use the ramp widget so if I replace the row with a wrap widget for now and save the app you can see the remaining views which earlier were not able to fit in the given device width move down to the next line so by using the wrap widget we can add as much views as we want as children and they will wrap on the screen if the area is not enough for them to display good thing with the wrap is that we can use the wrap widget with both horizontal and vertical direction using the direction property of the wrap we can change the direction of wrap widget by default the direction property of the wrap is set to access horizontal and here if I simply change the direction of access to access vertical and save the app you can see that the wrap now behaves as a column and all the child widgets are now aligned in a vertical fashion so we can use the wrap widget both as a row and a column by simply changing the direction property of the wrap and changing it to access dot or azan ttle or access vertical and even if I set the access to vertical and an increase the number of widgets and save the app you can see that the widgets now shift to a second column when the first column is filled to the bottom of the device now you see the true flexibility of wrap widget let's get back to the basic example and take a look at some other properties so right now even if not was herbal wrap widget is only taking the space that is required by its child widgets so to prove this what I can do is I can make the rap widget a child of a container and then add a width and height to the container so I'll make the width a nice 400 and I'll give the container a height of 200 and I'll also give the container a color of colors dark red so that the container boundaries are visible to you and I'll see if the app and you can see that the rap is taking the space at the container now and suddenly all the views move to the top-left corner of the container now to change the alignment of all the child widgets of the rap or we can simply do is change the value of the alignment property and we can set the alignment property to wrap alignment dot Center and if I save the app all the child's widgets of the rap move towards the center and the wrap itself is taking the full width of the container so by simply changing the wrap alignments to ends I can align all the child widgets to the ends of the container that is towards the ends of the wrap Bridget on the horizontal axis and in the same way I can change the wrap alignment to space around or space between and if I change the wrap alignment to space around and save the app you can see that each of the child widgets is having a space on its left and right hand side so the alignment property of the wrap widget is a basic equivalent of the main axis alignment of the row and the column widget and for the cross access alignment in case of wrap we have a run alignment yes this is a strange name but basically the run is the direction or access in which the wrap will occur so basically if I add two more child widgets to the row and now if I change the run alignment to ramp alignment the center and I save the app you can see that all the widgets move towards the center of the container because the wrap widget itself is taking the full height of the container so basically the run alignment in brown budget is the equivalent of the cross access alignment in the row and column widget and you can set the same properties to the ramp alignment and changes to space around we have multiple rows because of the wrap and Ichiro is having equal space around it and if I change the space around to start and save the app all the views move towards the top of the container and if I change it to end and save the app all the views move towards the end of the container and I can change this behavior by simply adding another property that is called vertical direction so by default the ramp widget is pointing from top to bottom so when I change the run alignment to end all the widgets move towards the end of the ramp widget and if I change the vertical direction to vertical direction dot up then the ramp will be pointing from bottom to top so basically the start will now be the bottom and if I save the app you can see that all the views moves towards the end that is now the top of the wrap widget so I've explained much about the vertical direction property in my last video that was about rows and columns and I'll leave a link for that video in the description below so feel free to check it out so the next property that we can discuss after that is the spacing so spacing deals with the main axis of your widget that in this case is the horizontal axis so if you're laying out the widgets in x axis that is by using the axis horizontal then the spacing will add a margin to the left and right hand side of each of the child widget so if I add a spacing of 10 and save the app then you can see a slight change in the spacing between each of the widgets and if I increase this to 20 and save the app you can see that each of the child is now having a space of 20 points to the left and right hand side of it and in the same way there is another property that is called run spacing and by using this property we can add spacing to the top and bottom of each of the childhood and if I add a space of 40 to it and save the app you can see that each of the child widget is now having a space in top and the bottom also so I can simply prove that by increasing the number of children that is by copying and pasting the widgets and if I save the app so the container is now being overflown but you can see that each of the child widget is now having a spacing of 20 for the left hand right hand side and a spacing of 40 for the top and bottom so other than the spacing the last property that can be useful in a ramp widget is the text Direction property and by using this we can change the way in which the widgets are ordered in the wrap so let's come back to the simple example of three buttons and I'll remove all the other buttons and now we have basically out in which we have a button one on the start button - on the middle and bottom three on the end and if I simply add a text Direction property and if I change the value of text direction to text Direction RTL all the buttons in the view change their direction and now the button three comes first two comes on the middle and one comes last so basically the text Direction property change the direction of the views on the x-axis that is the main access in this case so all these properties are relatively simple and they're more or less similar to what we have learned in the row and column widget but their names are quite different in case of the rap because in rap you can change the direction of views according to your own need and you can make the rap widget a row by setting the axis to horizontal and change it to a column by setting the direction to an axis of vertical unlike row and column which are used to align their children vertically and horizontally stack is used to place widgets on top of each other that is along the z axis so like row and column here we also have a children property and with which we can give multiple children to the stack so right now we have two containers one with a red color and a 200 written height and another with a written height of 100 and a color blue arranged in a column with main axis alignment of sensor so what I will do is I will just remove the main axis alignment and change the column to stack so as soon as I save the app you can see that the stack positions the widgets on top of each other and the second child that is the container with a hundred of width and a hundred of height and a color blue is placed above the child that is having a 200 of Britain height and a color of red so basically higher the position of child in the list of children the closer it will be to the user so the stack behaves a bit oddly in terms of width and height by default the written height of the stack is decided according to the requirements of its children so in this case the maximum space taken by the stack is of 200 by 200 because this is the maximum width and height that given to any of its child but this behavior changes if we wrap the stack with another widget that is having its own width and height so let's say I wrap the stack with a container and I give the container of with the 400 a height of 700 and a color of gray and as soon as I save the app you can see that the contents of the stack moves to the top-left corner of the container and this is because the stack has now taken the width and height of the sized container so basically the width and height of stack depends on two cases if the stack is wrapped with a widget which is not given a width and height explicitly like the center earlier then the stack will take the maximum width and height that is required by its children and in the case in which the stack is wrapped by a widget that is given an explicit width and height then the stack will take the width and height of the widget it's wrapped with which in this case is the container which is given a width of 400 and a height of 700 so in this case all the children are aligned to the top left corner of the stack so to change the alignment of children I can simply use the alignment property of stack and if I change its value to alignment dot top right and save the app you can see that all the children are aligned to the top right corner of the stack and if I change it to bottom Center and save the app all the children move to the bottom center of the stack so there are two other properties of stack which we have to look into but before that we have to take a look at another widget which is most of only used with stack to position widgets in a much more custom way and this widget is called the positioned widget so to use it we simply need to wrap the child with a position with it and in this case what I will do is I will change the alignment to top right and I see if the app and what I basically need to do is I need to move this container that is this blue container to the bottom right corner and for that what I can simply do is I can wrap the container with the position the widget and I'll simply give some properties to this position the widget and in this case I want the view to be at the bottom and I'll give the bottom a value of zero and I'll give the same value to the right so the reason for giving the value of zero to the bottom and zero to the right is that I want the view to have zero distance from the bottom and zero distance from the right so other than the bottom and right there are four more properties so this top height and bottom deal with the vertical axis and this left width and right deal with the horizontal axis and out of these three vertical properties that is the top height and bottom you can only give value to two at a time and in the same way out of these three properties that deal with the horizontal axis you can only give a value to two at a time and in this case I wanted to position the widget in the bottom right corner so what I simply did I gave the bottom value as 0 and I gave the right value of 0 and so the widget that is this container with a width and height of 100 is positioned to the bottom right corner of the stack and the width and height property of positioned widget overrides the width and height that is given to its children so in this case if I give the positioned a width of 200 and I save the app you can see that the container is now taking the width of 200 instead of its actual width of 100 so basically if I also give a height to the position widget and change it to 300 let's say and save the app the containers height will now be overridden by the height that is given to the positioned so positions is really a simple widget and it helps in positioning elements in stack so let's come back to the stack now and let's take a look at another property that is called fit and the fit can be given three types of values one of which is stack fit dot loose so basically what's tactic that lose does it lets all the children of stack have their own width and height restricting their values to the maximum width and height of the stack which in this case is 400 by 700 so any of the child of this stack cannot have a width that is more than 400 and height cannot be more than 700 so other than this stack picked up lose fits can also be changed to stack fit dot expands and if I save the app you can see that the stack is now filled with this container that is in color and this stack for thought expands forces each of the non positioned children of stack to take the maximum width and height that is allowed by the stack which in this case is 400 by 700 you must keep in mind that this only happens with the non positioned widgets so in this case I do have this container which is hundred by hundred in width and height and it is positioned to bottom right corner and the stack with dot expand does not have an effect on this position to put it and in the case if I remove the positioned and if I save the app again you can see that the container that is 100 100 in width and height is now affected by this stack fit dot expand so let's say I change the bottom position of this container to minus 20 and if I save the app you can see that as the container moves down the remaining portion of the container is now clipped that means any part of container that exceeds the bounds of the stack is now clipped from the stack so we can change this behavior using the overflow property so if I give the overflow a value of visible and if I save the app you can now see that the blue container which is positioned at a bottom of minus 20 exceeds the bounds of the stack but is still visible outside the bounds of the stack so using the overflow property we can decide what we want to do with the visits that overflow the balance given to them by the stack so if I change the overflow to clip and save the app the remaining portion of the container is now clipped again so by default the overflow property of the stack is set to overflow top clip so these are all the important properties of stack and positioned which might come in handy in flutter UI design [Music] what I have here is a center widget which is having a child of container and the container is having a red color and a text that says welcome it is not much of an elegant look when you see that the text here is touching the borders of the container so in such cases when you need to add some space between the boundaries of the parent and it's children you need to use the padding widget to use the padding widget what you need to do is you need to wrap the child with a padding and the value of this padding property needs to be an edge insets and you can create the instance of edge in sets in multiple ways let's discuss the most useful ones the most basic way is by using the edge in sets all and by using this constructor you can give a padding value that is similar for all the sides of the container so in this case I'll just give it a value of 15 and if I save the app you can now see that the container is having a padding of 15 from its child from all the four sides that is top right bottom and left this is the most common way of giving padding but you can also give padding in more selective ways so if you need to give different padding for horizontal values that is left and right and different padding for vertical values that is top and bottom you can use edge in sets dot symmetric so let us say we need a padding from only the left and right hand side so in that case we can give only the horizontal value to the edge in sets dot symmetric and in this case I'll just pass the value of ten and put a comma here and save the app and you can see that there is only a petting of ten from the left and right hand side so let me just increase the value of padding here so it's much more visible and save the app you can now see that the padding of 20 is being applied from the left and right hand side only and if I want to apply the padding from top and bottom also so I can simply add a vertical property to the engine set start symmetric and give it a value of 50 and save the app you can now see that we have a different value for the horizontal padding that is from the left and right hand side and a different value for the vertical padding that is from top and bottom and if you need even more control over individual sides then you can simply use as in sets start only so by using this construct what you can do is you can pass a different value for right left bottom and top so in this case if I only give a padding value to the right and give it a value of 20 and save the app you can see that there is only a padding of 20 from the right-hand side and if I want to add a padding to top also so I'll just give it a property of top and give it a padding of 50 and save the app and there is a padding from top also that is of value 50 other than these there is another way of giving agent sets it is a bit advanced because this is mostly used in case of animation we can use edge and set slurp so let me just remove this from here and pass it adds and sets the lerp and the lerp here stands for linear interpolation to use this what we need to do is we can give two values for the edge in sets you can consider them as limits for the first argument I'll pass in the engine sets to all and give it a value of 10 and for the B I'll pass in the eds in sets and give it a value of 20 and the last argument that the lerp requires is like a control handle and what you need to do is you need to pass a double value here which can be between zero point zero and one point zero what you can do is you can pass in a value of zero point zero and if I add a comma here and save the app you can see that we're applying the padding of ten and if I pass in the value of one point zero and save the app the padding that is being applied now is the padding of 20 so basically if a passing the value of zero point zero the first padding will be considered and if a passing the value of one point zero then the second padding will be considered and if a passing the value of 0.5 the padding of fifteen will be applied and point five represents the value that is 15 between the 10 and 20 this kind of interpolation is mostly used with animation where you can interpolate between two padding values so hope you have a much better understanding of padding widget and you can apply padding in other ways also rather than just using the common constructor of add in sets all [Music] creating UI for mobile applications has a number of challenges you need to plan and implements your apps behavior on different devices with different screens and user settings you need to check the device size and orientation font size and other properties to display a responsive UI that fits the device screen comfortably and doesn't affect the user experience to get such information about the device and user settings flutter SDK provides us with media query to use the media query what you need to do is you need to use the media query class and use the off function that is a static function and give it build context to provide the build context you need to be in this build function and then we can access the information directly from the media query there is a lot of information that is provided to us by the media query and all of this cannot be discussed in a single video so we'll only be taking a look at the most important properties of media query that you're likely to use during your flutter app development such as size and orientation starting with the most used one that is sized using this we can get the maximum size of the screen available and we can get the width and height so what we can simply do is we can use the size property and this gives us an instance of size so what we will do is we'll create a new instance of size and just name this size and put it equal to the media query instance of size so let's say we have to place two containers in a row where each container is taking half the device width and both the containers in total fill up the device width so in that case what we can do is we can replace this text with a row and we have to give it children property and in this children we create two containers in which each of the container is having the width and height that is equal to half of the device width what we can do is we can create a simple container and in this container we can give the width that will be equal to size dot width that is divided by two and we can do the same thing for the height and we'll just change this to height and just for some distinction I'll just give this container a color and what I will do is I'll just copy this container and create a duplicate and change its color to green and when I save the app you can see that in the device we have two containers with equal width and height that in total cover up the whole screen width so this is all possible by using the media query and its size property other than the width and height size also gives us with other useful size information such as shortest side and longest side so just to demonstrate let me just remove this row from here and let's say we have to give this container a size that fits in the device dimensions comfortably so for that what we can do is we can simply use the width and height property of the container and give it a size that will be off shortest side so in this case the shortest side will be the width and hence we will not create a container that goes beyond the width and height of the screen so if I give the height also and give it to size the shortest side and give it a color of color and start red you can see that the container now takes the width and height that is equal to the shortest side of the screen dimensions so using the shortest side here guarantees us that the width or height of the container won't exceed the dimensions that are given to us by the device width and height I cannot explain to you each in every use case in which the size information will be useful but majority of the use case of slides is with the width height shorter side and longest side other than the size media query also provides us with orientation so the orientation gives us with an instance of orientation and we can get that in the same way as we did with the size so for that I'll create an instance of orientation and I'll just name this orientation and put it equal to the media query instance to demonstrate the use of orientation let me use a simple example in this example I'm using the orientation data given to us by the media query and using it to create a responsive UI so in this case I have the information displayed in a column which has two containers aligned vertically so if I rotate the device to a landscape view and now the information is being displayed horizontally in a row so I'll just change the orientation again so in this case what I'm doing is I'm getting the size property from the media query and getting the orientation from the media query and decreasing some width from the shortest side to give it patting and using that for each of the side of the containers that you see here so in the scaffolds I have a Center in which I'm using a builder so that I can check whether the orientation is landscape by using the index property of the orientation you can compare the index of this orientation with a constant that is orientation landscape dot index and if the values are same we display the information in a form of a row or else we use a column so in this case you can see that I have a function here that says layout children which takes in the boxed side that is the size of each of the side of the containers so basically this layout children is a function that I've created so that I don't have to repeat the code for each of the row and column so just by using the media query we can create a simple and responsive UI there are other widgets in flutter also like layout filter which help you decrease this complexity but there are some cases in which you have to use the media query directly to get some fine-grained control or what you can do with your flutter UI other than this most use properties of size and orientation media query provides you with a number of other options for example if you're creating an application that deals with time in some way you can use the always use 24-hour format and use this in your application to display the time to the user in the format that they request other than this you can also see the property of disable animations and if your application is using animations extensively and the user has explicitly disabled animations so you can get that behavior from the media query and then reduce your animations in the application there are other features like view padding and viewing sets so you can keep the track of device and system specific boundaries such as notches status bar rounded corners etc but rather than directly using these properties from media query that is of view panning and viewing sets there is a quick and easy widget just to do that and sometimes when you have to keep your us safe from device and UI specific things such as not just status bar rounded corners etc you can use safe area let's go back to the basic example that we had before so in this let me just remove the written hide from here and save the app and also remove the size from the media query right now you can that the container is taking up the area of status bar also but in normal applications you have to leave this area out of your application screen and for achieving just that we can use the safe area so in this case I'll cover the scaffolds with the safe area and save the app and instantly you can see that now the UI is below the status bar safe area does the same thing that it did with the status bar for the notches and punch hole displays also you can test this on a real device because on the emulator the device screen is just for decoration and it does not really give the real information to the system UI safe area also gives us 4 properties for the top bottom right and left and we can remove the padding given by safe area for a specific side but turning these properties to false so right now we're protecting our application UI from the status bar but if I turn the top property to false and save the app you can now see that the safe area is not taking effect from the top side and the container is again taking the space of the status bar safe area is basically a really focused version of media correct and we can get the same functionality by simply wrapping the scaffold with a padding so let me just demonstrate that so if I remove the safe area and save the app and now cover the scaffolds with the padding and I'll just remove this default value and what I will do here is I'll get the media query my media query cut off context and I'll get the view padding and this gives us the information regarding the edge in sets to keep the device and system UI out of the way so in this case I'll store this information into edge in sets and now I can use this edge in sets for the padding property of padding widget and if I save the app right now you can see that we get the same behavior that we did with the safe area while creating UI for mobile applications you have to keep all these things in mind and media query and safe area are one of the most important widgets that you have to use in order to get device specific information [Music] every application that you create has to have a text in it letter SDK gives you with more than enough options to create any type of text for your application like any other thing text is also a widget given to you but letter SDK to create text you need to simply use the text widget and you need to pass a string of the text as the first argument to this text widget this gives you with the simplest form of text for your application which looks something like this but flutter is all about UI and you might need to format this text in different ways to make it more appealing for this text has a property called style and the style takes an instance of text style text style is quite a detailed class on its own the most basic properties in textile includes font size which requires a double value in this case I'll just pass a value of 20 point zero and you can just pass 20 also then comes the color so I'll just pass the value of color to colors blue and as soon as I saved the app you can see that the default looking text changed its size to 20 and the color to blue other than the font size and color there is font weight with the help of which you can make the text bold according to your need the value of this font weight can range from 100 to 900 but you can only use the range that is supported by the font that you're using other than this range there are other type of values like bold and normal so in this case I'll just be using the bolt and as soon as I save the app the text becomes bold we can also apply a background color and I'll just keep this colors black and for now I'll just change the color to color dot white and save the app so you can see that the background color of the text changed to black and the background color will only cover the space that is covered by the text so in this case I'll just remove the background color property and I'll change the color back to blue other than the background color you might also need to decorate the text with underline over line or line that goes through the text this can be done using the decoration property which can either be over line underline online through so if I just set it to underline you can see that we have a nice underline with the text I'll increase the font size so that the underline is much more visible I'll change the text size to 40 and save that and you can see that we have a nice clean underline with the text you can also combine multiple values for the decoration and in this case we can use text decoration dot combined and in here we can pass the list of text decorations so I'll pass the first item as text-decoration:underline and the second item as text decoration over line and if I save the app you can see that I have the text with the line above and a line below we can also change the thickness of this decoration by using a simple property of decoration thickness so I'll keep this to 2.0 and save the app and you can see that the lines become bold but the color of the lines is still blue so to change the color of decoration you can use decoration color and set the value of color to colors dark red or something else and if I save the app the color of the decoration lines become red and you might also not want your decoration lines to be a straight solid line in such cases you can use the property called decoration style and set the decoration style to text decoration style for wavy or dashed in this case I'll just use dashed and save the app and you can see that the decoration lines become dashed I can also set them to wavy and as soon as I save the app you can see that the lines take the shape of a wave rather than just a straight solid line other than the decoration properties you might want the words and the letters in your text to have custom spacing between them and this can be achieved by using letter spacing and word spacing and if I change the value of letter spacing to 2.0 and the value of word spacing to 4.0 you can see that the space between the letters is increased and the space between the words is also increased and if I change the value of were spacing to a bit more and make it 20 and save the app you can see that the space between the words that is hello and world is increased and if I change the value of the letter spacing to 1 and save the app the letters come close to each other and if I increase this to five and save the app the space between individual letters is increased so word spacing and letter spacing are nice tools to have to make a clean-looking text in your application text in flutter also supports a shadow property and this takes a list of shadows so just for demonstration I'm going to pass a single instance of shadow and in this I'll pass the color to be colored black and the blood radius to be 2.0 and the offset to be offset off one by one you can see that the text now has a nice shadow for it and if the shadow is not quite visible what I can do is I can increase the X offset and make it four and save the app you can see that the shadow is not visible so with just a few lines of code we're able to add a nice shadow to our text which can otherwise be a difficult task so the next property we're going to discuss his font family by using the font family we can change the fonts for a text widget for adding the font family I'll remove all the unnecessary properties that have added to the application till now I have the fonts here in the TTFN format and what I will do is I'll take two files from here and copy them and come back to the application and create a new folder here and I'll name the folder assets and in this folder I'll create a new folder that is called fonts and in this folder I'll paste the fonts that I just copied so have a railway - bold and a railway - regular and both the files are of TTF format the next thing that I need to do is I need to come down to this post vector tml file and in here I need to come down to fonts property and what I will do is I'll just uncomment this fonts and I need to adjust this according to my own needs and once this is done I need to adjust the indentation of all these properties in the pub spectral KML file you need to also keep track of the indentation because if the indentation is not correct your app will not get built so once this is done you can click on package upgrade and the application will build so what I need to do now is I need to pass a string to the font family and this can be rail weight and this name corresponds to the name that I've given to the family of pops bechamel file so once the application runs you can see that just by doing these few steps we have changed the fonts in our application and it looks much more elegant than the default fonts given by Android so to make this more visible I can also add the font weight property and set this to font-weight:bold and if I save the app you can see that the text becomes bold and with the new font that is railway so other than the font there is one of the property of textile that it might find useful and entrusting and that is foreground and what this foreground requires is a paint object and with the help of paint you can do a lot of things with this text in this case we'll just be adding a stroke to this text for that what I can do is I can use this paint object here and add a color to it and I can change the stroke width and set it to 2.0 and along with this I can also change the style of this paint and I'll change the style to paint style dot stroke and also to use this foreground we need to remove this color property from here because now everything will be painted by this foreground using this paint and if I save the app you can see that the color is removed and we have a nice stroke for the text and if you're not familiar with what this line is doing it's basically something like this this is the old conventional way of doing stuff in which we create a new object and then change the properties of that object but instead a new dot what we can do is we can create the object and continue the line until we have changed all the properties and then add the semicolon this basically reduces the boilerplate that we have to write in the old way of creating objects so this covers the text style section of the video and you can see that clutter SDK provides us with a bunch of options to decorate our text in flutter but decoration is not enough when we're dealing with a large number of texts we have to keep in mind the alignment of text and the other ways in which text should behave when there is a lack of space so let's increase the content of the text and change the font size and I'll keep this 2:15 and I'll also remove the font rate and the foreground properly from here and instead I'll add the color that is colors black and if I save the app you can see that the text now wraps down to multiple lines if there is not enough space to display the text in a single line and in such cases you can see that the text is not properly aligned for that we have to use the text aligned property which is not a part of the text style so we have to move outside of it and outside the text style I can add the text aligned property and this can be set to text-align:center right left or justify so I'll set this to justify and if I save the app you can see that the text is now justified to the left and right hand side and if I change the align to right and save the app you can see that the text is now aligned to the right hand side other than this we can also change the direction in which our text is being displayed so for that I'll just change the alignment back to justify and I will add the text Direction property and in this I can pass text Direction RTL and now you can see that the text is being written from right to left instead of the default direction of left to right so in this case I'll just remove the text direction and save the app so let's say we are in a situation in which we know that there are going to be multiple lines of text but we can only afford to display two lines in that case what we can do is we can change the maximum lines property and set this to two and if I save the app you can see that the text is now being displayed in two lines only but this raises another problem because here the text is being clipped abruptly and there is no way for the user to know whether there is more text to read or this is the end of the line so in such cases what we can do is we can use the overflow property and in this we can set the value to text-overflow:ellipsis and if I save the app you can see that there are three dots in the end of the text which tells the user that there is more text to read and if you want to keep the text to cover only a single line what you can do is you can set the max lines to one and save the app and the texts will only cover a single line but there is another way to do this for that what we can do is we can set the soft trap to false and now the text won't wrap and we will be presented with only a single line and in this case also we will be presented with three dots to show that there is more text to read other than these important properties there's also properties like text scale factor with the help of which you can scale the text and this can be used to show a magnified version of the text that is in the application so in this video you can see that there are a number of alterations that we can do with our text in flutter applications and this makes text as one of the most highly feature widgets in flutter okay so let's start this video with a question what would you do if you have to create something like this in your flutter wraps in which you have to have multiple text widgets with different styling or you have to add an icon along with the text or something like this in which the user can click on certain text and he's taken to a separate URL or something well the most common approach when beginning with flutter would be to create a row and then add all these widgets as children and so on although it's perfectly good and you won't need to think of any other way but structuring everything in a row can be a bit tedious especially if visits grow in count for example if there are more than two text widgets here or you have to have some other text along with the icon on the right-hand side then there can be some issues of overflow and if you have to add something like this you have to manage different gesture detectors to detect the users click on portions of this text and you can see how this can turn into a widget tree help well as you all know that flutter takes UI pretty seriously and it gives us with an awesome widget called rich text so let's take an in-depth look at rich text and how you can use it in your own flutter wraps in this tutorial we'll be taking a look at something like this which might have seen on the login screen of certain apps at this point I have used ro to create this but instead we'll be using a rich text so I'll replace this row with a rich text and this rich Trax requires a property of text which takes an object of inline spam there are multiple type of inline spans that you can use depending upon the content but in this case I'll just be using a text span and in this text span there are certain properties that we can use in the text property we can pass the simple text that we want to add and there's also a style property with the help of which we can style our text so first I'll just add a simple text and I'll add the text off don't have an account and at this point if I save the app you can see that nothing appears on the screen and the reason for this is because we have not passed any style to this text and by default the text is coming out to be white so in this case I'll just pass in a style and give it a property of text style like we give to a normal text widget and in this I'll pass in the color property and put it colors dot black I'll save the app and you can see that we can see the text of don't have an account I'll also increase the size of this text by passing in font size and I'll just pass in the size of 20 now to add the register text what we need to do is we need to use another property of this text spam so I'll come below the style and here I'll add the property of children and here you can see that it requires a list of inline spans so here you can imagine that we can split our text in multiple forms and we can apply different styling to each of them so in this case I'll just add the children property and here I'll pass in a list and in this list I'll also add a text span and in this text span I'll pass in the text of register and if I save the app you can see that the register is right here at this point by default this register is taking this style that is applied to its parent that is this text span right here so we need to change the color of register here and we want to make it bold so what I'll do is I'll add a style property and pass in a text style and give it a color of colors in red and give it a font weight of font-weight:bold and if I save the app you can see that the color of register is now red and it's bold in comparison to the text on the left-hand side what we also need is we need to add a bit of space between them so what I'll do is I'll come up to the text span here and after the account and the question mark I'll add a space and save the app and you can see that the changes reflect on the app and we now have a space between the register and they don't have an account text at this point the UI is done but there's no way of detecting the users click on this register text and without that this text has no use well the text ban has another property for solving this problem too so for detecting gestures what we can do is we can come here in the text ban after the text style and we can add another property that is called recognizer and this takes an instance of gesture recognizer and for creating a gesture recognizer what I'll do is I'll come up here and create a final variable of type tab a gesture recognizer and you can see that there are other type of gesture recognizers too but I'll leave it up to you to try them according to your own needs what I'll do is I'll create an instance of taps gesture recognizer and name it gesture recognizer I'll just minimize the emulator and here I'll initialize this with a constructor of tap gesture recognizer and what I need to do is I need to give a value to the on tap property of this so far this I'll provide it a function and here I'll just pass in debug prints and give it some text of hello worlds so once the gesture recognizer is ready while passes same gesture recognizer for the recognizer property of texas-pan and I'll open up the run window and I'll just run the app now once the app runs on the emulator you can see that we have the text here and if I click on register the hello world text appears on the run window so our gesture recognizer is working correctly there are endless possibilities of creating complex text based applications in flutter using the rich text widget but the rich text widget does not limit itself to only the Texas fan but instead we can also use a widget span and here you can pass in any type of widget as a child of this widget span so in this case I'll just pass in an icon and also I'll change the text of this first text ban to share and here you can see that we have a sheer string with an icon alongside at this point if I just change the size of this font to 30 or 40 instead you can see that the icon is not properly aligned with the text and for that we can use the alignment property of the widget span and in this alignment we need to pass in a value in the form of placeholder alignment and for now I'll just use placeholder aligned mint dot middle and now you can see that the icon is now vertically aligned according to the height of the text you have seen that the possibilities with the rich text are endless so if you find this video useful please hit the like and subscribe button and consider supporting me on patreon for more flutter' videos coming your way on flutter widget essential series on retro portal studio see you next time peace [Music]

Channel: RetroPortal Studio

Views: 49,281

Rating: 4.9809523 out of 5

Keywords: flutter, flutter tutorial, flutter course, google flutter, flutter app development, flutter app, flutter ui, flutter widgets, flutter container, flutter column, flutter richtext, flutter safearea, flutter responsive ui, flutter tutorial for beginners, top flutter widgets, flutter vs react native, flutter responsive, flutter android, flutter align, flutter for beginners, flutter mobile app, top flutter widgets for ui, flutter ui design, flutter complex ui

Id: x1LHDKLDT38

Length: 69min 13sec (4153 seconds)

Published: Sun Apr 26 2020

Reddit Comments

[u/Hotel_Arrakis]

Very nicely thought out. thanks.