Combining a Row and Column in Flutter | Flutter row & column

welcome to flood literature so far we have seen row widget and the column widget while creating uin flutter it's very common to have a combination of row and column so in this specific video we'll understand how we can combine row widget inside a column or you can say the call of widget inside a row so without wasting time let's get started for understanding the combination of row and column we'll create this specific ui in this ui the first component that we see is actually a column that contains a container with an icon and we have the text below it the next component that we have is also a column that contains a container containing an icon and the text below it and both these columns are actually placed inside the row so just imagine that the red box that i am placing here is actually a row and both these column 1 and column 2 are actually the children of this specific row initially i will create this basic ui and at the end i will explain how we can create the same ui by using the custom component we have simple letter application code written that contains import with the material.dart then we have the main function which is calling the run app and inside it i'm passing the object of my app my app is basically constructed by using this stateless widget and inside this meyer class i'm retaining the meta lab and as a home of this one we have a scaffold inside this cap wood let me use a property called body for the body i will use a container here inside this container what i am going to do i need a padding at the top so let me use your padding for aging sets so i will use here only and i will specify the top let me use uh the 100 pixel from the top and as it is the constant so i can prefer this one using cost here for this container we need a child and as i explained you at the beginning this specific child has to be a row in case of my ui and this contains two different child let me use the first one and the second one you format the code little bit so number one and number two now this first thing that is we have here so this is basically a column here let me use a column inside this column we have two different child let me use a children property and let me use the first children and the second children of this container for this column the first style needs to be contained let me use your container widget inside this we need a bit so let's take the width of 50 pixel i need the same height let me use here the height of again the 50 pixel let me use child property another child we need to apply the icon let me use that icon inside this we need to write icons dot and the icon that i want to use is basically file upload so let me use here file upload outline and for this we have to apply some color so let me use here green colors we can write here colors dot green and let me save this one let me format it now this container needs some background color and there has to be circular shape for this we need to use the decoration property let me use the decoration and as a decoration i am using here box refrigeration inside this box decoration let me apply some color so i will use your colors.3 and in order to have a lighter shade i will use the function called with opacity and i will apply the opacity of 0.25 let me save it and you can see we have got this specific color as the background color now in order to change the shape that is to make it circular we have to use shape property and for this we use the box shape here so let me use a box shape or circle when i save it you can see we have got these nice rounded container containing the specific icon below this container we need a text so i will use the second child as a text here let me use here text and i will write here let's say file upload we must add comma here now there has to be some gap between the container and the text for this what i will do i will use the option called size box here let me use the side box and i will use height let me apply the height of 8 pixel let me save it and you can see we have got the nice gap between that let me use fonts here we have got this column as the child of this row so we need the same column as the second side of this row for this let me copy this column so let me copy up to this column and we need to add comma after this column and let me paste it as a second child so let me paste it and save it column has to be aligned properly for this we have to use property called main axis arrangement in the row so let me use here property called main axis arrangement for this i will use the value called main axis alignment dot space around ui is looking perfectly fine and i will update the second column later on now let me explain how we can create this component by creating a custom widget for this we need to create this column as a custom widget please click on this column and we have this bulb click on the bulb we have the option called extract widget click on this extract widget option now this will ask you the name of widget that we are going to extract or let's say we are going to create i will name this as let's say the file option let's use the file option then hit the enter button now you can see we have got a custom widget called file option let me just scroll down a little bit you can see we have got another class which is actually created by using the stateless widget now the widget that we have created called file option is not a customizable so let me customize it for this we need to add some variables here let me add a variable and i will make this variable as final this is because we have the stateless widget here so let me use here final stream and i will name this as the text that we'll get and let's again use final it has to be icon data so we can use the icon data let's use your icon data option finally let me use again final and i will name this asset color so let's use variable name as color all these three fields must be initialized in the constructor so let me click on this constructor we have option called week fix and just click on the option called add final feed we got all these final fields now this field needs to be required for this what i will do i will use the annotation called required here so let me use here required let me copy this one paste it here and paste it here as well let me format now what i will do instead of using this specific icon i will use here let's say the icon data it may add a comma here now don't apply the green color here because it's custom valid let me use here the color that we have used that is the color will color variable here and now don't use this green dot shade with opacity instead of this what will be here will you say color dot opacity whatever color that we have here now don't use this file upload instead what you will do we have to pass the text that we have accepted in the constructor now this is showing error here the reason for error is inside this specific component that is inside this file option three parameters are compulsory let me pass all them one by one first of all let me pause the text so the text has to be let's say the file upload let's write here file upload second thing we need to pass the icon data so right here icons dot the icon is basically file upload let me use your file upload outline then we need to pass the color here so let's pass the color so i will pass here colors dot green save it now it's perfectly fine and let me delete the second column because i'm not going to use this column instead i will use the custom valid let me save it now you can see we have only one component here let me copy this line here and let me paste it here because this is the custom component we have created save this one let me change this file upload to save file download so you need to write your file download let's save this change this file upload to file download so let me use your file underscore download option so let's lose your file download infinity user download outline let's find download outline and we need to change the color so this color has to be already in my case let me put the extra comma here and we need to format the code we can also write the columns there because both these are the constant let's format the code save it and finally we have got this nice ui by using the combination of row and the column and i hope you guys might have understood how i have constructed this custom component or let's say the custom widget here so if you don't understood how i have customized this custom widget or the custom component here don't worry in our upcoming session i will explain in detail how we can create a custom component and the customer widget as per in our requirement that's it for this video see you guys in the next video if you really like the way i'm explaining the concept then don't forget to like share subscribe and hit the bell notification button to get my latest videos

Channel: Flutter Teacher

Views: 6,059

Keywords: Combining a Row and Column in Flutter, row with column, column with row, flutter row column combination, combination of row and column, nesting row in column, nesting column in row, row widget, column widget, nesting of wdgets, row and column in flutter, flutter, flutter tutorial, flutter widgets, flutter tutorial for beginners, flutter row and column, flutter column and row, column and row in flutter, merging row and column in flutter

Id: lZ3vAHmq4rU

Length: 9min 4sec (544 seconds)

Published: Fri Apr 08 2022