Flutter Align Widget - Flutter Widget Essentials #10 | Flutter UI Design Tutorial

[Music] a line is one of the most useful and yet one of the least talked about widgets in flutter as the name suggests a line can be used to align child widgets in their parent so let's take a look at how you can use a line in your own flutter ui at this point i have a simple screen in which i have a container which has a width and height of 350 and a color of green as a child i have a simple text that says flutter now i want to align this text at different positions in this container for this what i can do is i can go to the text which is the child of the container and wrap the text within a line the align widget has three main properties that is the alignment width factor and height vector the most useful one is the alignment itself so i'll use this property for now now there are three common ways to give value to this alignment property you can simply type in alignment and in this alignment class you can see that there are a number of constants that is bottom right center top left top center and so on you can simply use this constants to give the most common values to the alignment for example i can use center and as soon as i save the app you can see that the flutter text moves to the center of the container in the same way i can use top center and the text will shift itself i can shift it to bottom right and the text will go to the bottom right of the container this is the most common way in which we pass the value to the alignment now if you want a bit more control over the alignment you can pass in an instance of alignment class and using its constructor you can pass in your own x and y values for example i can pass in 0.5 comma 0.5 and at this point if i save the app you can see that the flutter text moves to a custom location one thing you can notice here is that the expected alignment when you pass in the value of 0.5 and 0.5 should be the center of the container but instead the flutter text moves between the center and the bottom right corner of the container now to get this expected behavior you can pass in the value as fractional offset instead of alignment and as soon as i save the app now you can see that the flutter text moves to the center of the container now what is the difference between the fractional offset and the alignment for this let me show you a detailed graphic in this graphic we have the difference between the alignment and the fractional offset box in the green is the container that we had in the app so when you pass in the value of 0.5 and 0.5 to the fractional offset the value lies in the center of the container because the value 0 0 and 1 1 represent the top left and bottom right corner of the container respectively while in the case of alignment when you pass in the value of 0.5 the point lies between the center and the bottom right of the container in simple terms the value of alignment ranges between -1 and 1 whereas in case of fractional offset the value ranges between 0 and 1. you can go beyond these values but that will take the text outside of the container in most cases when you need to pass a custom alignment you will use fractional offset but in cases when you need to align widgets with respect to the center you will use alignment instead now to show you how powerful alignment truly is let's replace the center with a stack now in the stack we'll pass in the children property now for the first child of the stack let's put in a container this container has a width and height of 200 and a box decoration in the box decoration we set the shape to circle and the color to red now as soon as i save the app you can see that in the stack the container is placed at the top left corner of the stack now if you want to move this container to the center of the stack what you have to do is you have to wrap this container with the positions and then calculate the position and pass it to the positioned widget but with align things get really simple you can wrap this container with an align widget and in the align you can set the alignment property and in this you can simply pass in alignment dot center and if you save the app you can see that the container directly moves to the center of the stack in the same way you can pass in custom alignments i can pass an instance of fractional offset and to the instance of this fractional offset i can pass in the value of 0.2 comma 0.2 and with this the circle moves near the top left corner of the stack now let's take a look at the other two properties of the align widget which are width vector and height vector so i'll remove the alignment from here and instead i'll put in width vector and give it a value of 0.5 and a height vector and set its value to 0.5 also at this point if i save the app you can see that the container moves beyond the top left corner of the stack what's happening here is that the width of the align is set to the width factor multiplied by the width of the child so in this case the width of the align is set to 100 and in the same way the height of the align is equal to height factor multiplied by the height of the container so the value of height is also 100 and because of this even though the width and height of this container is 200 for stack the size of this align widget is 100 by 100 one thing you can notice here is that since we're passing 0.5 for the width and height vector the size of a line should exactly be half of the size of this container and because of this only one-fourth of the portion of the circle should be visible but instead we're getting more than one-fourth of the circle here the reason for this is because for the width and height vector to work i have found that we need to pass in the alignment property also for this you can see that if i pass in the alignment of alignment dot bottom right exactly one fourth of the portion of the circle is visible the reason this alignment is necessary is because only with the help of this the aligned nose with respect to which point on the child it needs to calculate its width and height now let's see what happens if i set the value of alignment to top right now with this you would have expected that the container gets aligned to the top right corner of the stack but the reason this does not happen is because when we pass in the width factor and height vector a line uses the alignment property to calculate its width and height with respect to this alignment so just to demonstrate i'll wrap this alignment with a container and i'll give this container a color of blue and now if i save the app you can see that the color blue only appears on the top right corner of the original child container the width and height factor properties can be a bit confusing at first but once you understand them they're really useful so just to give you a true sense of how useful these properties can be let me show you an example this app is from one of my previous tutorials called item stack list view and in this we want the list items to appear as if they are stacked on top of each other for this we have a list view here and each item is given from this item data the way a line can be used in this is that we can wrap this item data with the align widget and in the align we can use the height vector and give it the value of 0.7 at this point if i save the app you can see that the items appear stacked because for the list view the height of each item is 70 of their actual height because what list view receives is the height of this align which is 70 of the height of the child to set the alignment we can simply pass in alignment property and for this we can pass in the alignment of top center and at this point if we save the app you can see that the alignment of the items is fixed and the app is working fine you can check this tutorial out from the link in the description below in this tutorial we have explored multiple ways to use the align widget and there are many other scenarios where a line can be really useful i hope you found this tutorial useful and for more updates on widget essential series consider subscribing to retro portal studio and for more upcoming content consider following me on twitter see you next time peace

Channel: RetroPortal Studio

Views: 7,143

Keywords: flutter, flutter ui, flutter tutorial, flutter tutorial for beginners, flutter widget essentials, flutter center widget, flutter widgets in detail, flutter retroportal studio, flutter dart, flutter widgets for beginners, flutter widget of the week, flutter widget for beginners, flutter widgets, flutter app development, flutter app, flutter align widget, flutter alignment, flutter fractional offset, flutter alignment x y, flutter alignment widget

Id: 7Dljvr-Afvc

Length: 8min 8sec (488 seconds)

Published: Sun Dec 13 2020