Hi, welcome back to my YouTube channel and in this video we are going to see how we can
show these these two button inside a row or in a horizontal position so that it looks
nice so as I have given a clue inside previous video and in this video we are going to use
a row widget so flutter has a row visit by the way to show widgets inside a role that
cool so inside the column widget we are going to use a row widget so below the text field
but I can do is that I can insert a new space and type in r o w for row widget and inside the row widget just like column widget
it takes it children property and inside the children property but we can
do is that we can specify our two button so these are the two button that we wanted to
show inside a row so I will just cut it and past it here and press the control S button
and you can see that in the right hand side we have the widget showing in the row
so the login is showing here and the sign up is showing here well that's good that we know how to put
our visit inside the row but this is very near to the button so login button and
Saina button must have some space between them so that you know it looks even nice so
to put some space but we can do is that we can add some size boxes so flutter provide
a size box widget and we can use that to put some space so I will insert it and after that
I will put a comma so that flutter nows that these are the widget so we have some elevated button
size pause and other outline button if I click on control S now we don't
see any difference then before but I will do is that I will put the width property and
if I choose the width from here I can put for example 30 and if I save it now you can
see that this login button and sign up button has a size box between them that is of 30
size so this row widget has many other properties that we can utilize according to our use case
for example if I want to centerline these two buttons and I can use the main axis
alignment property of this row widget so let's see how to do it if you are new on this YouTube
channel then make sure to subscribe it and hit the bell icon because I will be bringing
more and more flutter related videos on this channel I will go here and I will type main
axis alignment property so main access alignment can take different arguments so for example
if I want to centerline it then I bet I can do that I can type main access alignment dot
and these are some of the properties that are available inside the main access alignment
classes centers and space around space between Space evenly and start so by default it is I
think start and let's see if I provide the centre value then you can you will be able
to see that our widget will be in the center so as a Control + button you can see that
our buttons are in the center of the row so let's see what other options are here
so if I do space evenly then these two widgets will have equal space between them so left
and right an if I do space between them they will have a maximum amount of space between
them so you can see that login button is left aligned and sign up button is right-aligned and both of
these widgets have maximum space between them so check out all the properties that
are available inside the main axis alignment and other than that there are two Axes of
a row so one is the main access and one is the cross axis so if you are in a row then the
main access will be the horizontal axis and horizontal axis of the row will be the main
axis and if you talk about the cross Axis then the vertical part of the row is the cross
axis so similar to main access we have the cross-axis alignment as well so
what I can do that I can type cross-axis alignment and similar to main axis alignment I can provide
the cross-axis alignment as well so I can say cross-axis alignment axis alignment and center
and this will this will Centre align the row widgets in the centre in the cross axis
since this role does not have much space vertically then you won't be able to see cross-axis alignment effect
in this example but these are the sum of the concepts and what we can do is
that we can also control the main axis size of the row as well so for example if I do
main axis size but we can do is that we can provide main axis size dot
we can also provide the main axis size dot min in property as well so if we provide the main
axis minimum then the row will take only that much space that is required by the widget
for example, you can see that now the row is just beginning from here and ending here
so if you want to see it further than what
you can do is that you can change the background color of the row as well so let me wrap the
row widget is it inside the container so what I can do is that I can click on this option and choose wrap with container so if you don't want to click on this option you can
also click on Control + dot from your keyboard and choose container so now what happened
is that our row widget is wrapped inside the container and here I can provide the colour
property so that I can say I can buy the colour property and I can say color dot colours and
colours dot red for example and you can see that our row is now just taking only this
much space and if I just change the main axis size of our row to max then you will be able to
see that the row is taking the whole horizontal space that's available so this is how the main
Axis size property can be used to manipulate the Main axis size and if we are inside the column
then the main access will be the vertical space and if we are in the row then the main
axis will be the horizontal space so this this is this is something that you should
remember when you are working with row and column now let me remove this extra container
that I added a just for example so you can see that if I click on control+S button
than our login screen is looking like this I think I like the center option much
more than the space around and space amili space between options so in the next video I
will show you how to add padding in the screen so that our widgets are not touching the edges
of the screen that's it from this video and if you have any questions and make sure to write
your query in the comment section below because I check out each comment and reply to everyone