Hi welcome back to another video of our flutter series and in this video we are going to learn
how to add some padding around our widgets so right now you can see that our widgets are
touching the edges of the screen so this is not good so let's add some padding around
it so all we have to do is that we can wrap this column widget inside a widget that is called
padding so what padding widget do is that it adds padding around the widget so if I go ahead
and click this all I have to do is that I need to click here and after that I need to
Click on Control + dot from the keyboard and you can see that is menu appears and from
here I can choose a wrap with padding and what wrap with padding does is that it wraps our whole column
widget with the padding widget and inside the padding widget we are providing an
other property that is called padding and padding is taking edgeinsets.all now adding
edges has a different kind of constructors that I will explain you in a little bit but you
can see that but all constructor is taking one value that is 8.0 and 8.0 value but it
will do is that if I click on Control + A from my keyboard then you will be able to
see that on the right side that our now screen has some padding so if you want to increase
the padding size than I can do that as well so for example 16 any five control save it
again then you can see that it increases the padding so this is how we add the padding around the
edges but let's look at a look at some of the constructor that are available inside
the edge insets class so there is all function that we are here right now trying so what
all function does that it at padding around all the corners of the screen another variant
that we have is the edge insects from left top right bottom variant what it does is that
we can provide the left top right and bottom padding individually other than that we
have the only variant and this can be used to provide the padding on each side individually
for example if you want to provide padding only to the left side then we can use this
variant and other than that we have this symmetric variant but the symmetric variant is does that
we can provide equal padding to horizontally or vertically so these are all the variants
that are available please look into this symmetric variant for example so if I go ahead
and choose the edge insets dot symmetric variant I can type in and say let's goes horizontal
and horizontal is basically let's say I want to provide horizontal padding to 20 then it
will add 20 to left and right padding so if I save it now you can see that and other than
that we can also provide the vertical variant and what vertical variant will do is that
it will provide the vertical padding so if I go ahead and provide 60 here so for example
now you can see that on topic have some 60 padding here this is how we provide padding
to any widget just need to wrap our widget with the padding inside the building will be a need
to provide the padding property where we need to provide edge insets dot symmetric or edge insets
all variant so for now let's move this variant and choose the all variant and let
me provide 20 paddings to this screen for now another thing that I would like to do here
is that I would like to Central Line this widget so that it looks even better so what
we can do is that we can go it into the column widget and inside the column widget we can provide
the main axis alignment property and inside the main axis alignment we can provide the main
axis alignment dot Centre value and if I save it now you can see that our you know login
screen is looking even better because all the widgets are in the centre in
the next video we're going to learn how to add an image in our screen so that you know
we can add some branding to it or customise it so let's see in the next video 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