Flutter Journey 010 — Stack, Position, Sized Box, and Align Widgets in Flutter
Flutter is a popular open-source UI toolkit developed by Google for creating high-performance mobile and web applications. One of the key advantages of Flutter is its rich collection of widgets that enable developers to build beautiful, responsive, and intuitive user interfaces.
In this article, we will explore the Flutter UI widgets that you can use in your mobile app development projects.
Stack
The Stack is a widget that allows you to stack multiple widgets on top of each other. The widgets are positioned relative to the top-left corner of the screen by default, but you can change this using the alignment property.
Here’s an example of how to use the Stack widget.
In this example, the Stack widget contains three Container widgets, each with a different size and color. The alignment property is set to Alignment.center, which centers the child widgets inside the Stack. The child widgets are drawn in the order they are added, so the smallest “cyanAccent” container is drawn on top of the “amber” and “red” containers.
You can try it with different alignment positions like bottomCenter, bottomRight, bottomLeft, topCenter, topRight, topLeft, centerLeft and more.
Overall, the Stack widget is a powerful tool that allows you to create complex layouts by stacking multiple widgets on top of each other.
Positioned
In Flutter, the Positioned widget is used to position a child widget at a specific coordinate within a parent widget. The parent widget must be a Stack, since the Positioned widget's coordinates are relative to the top-left corner of the Stack.
Here is an example.
In this example, the Stack widget contains three Container widgets. The Positioned widget is used to position the “amber” container at the bottom right within the Stack. That’s why, I specified the bottom and right coordinates as 0. The bottom and right properties specify the distance from the bottom and right edges of the Stack, respectively.
In the above example, The Positioned widget is used to position the “amber” container at coordinates (10, 10) from the bottom and right within the Stack.
SizedBox
Sizedbox can be used to add space between widgets by setting the width and height properties to a specific value.
Here is an example.
In the above example, the first sized box add space at the start of the row. and second sized box adds space between two texts.
The SizedBox widget is also used to create a box with a specific size. The size can be specified using either the width and height properties, or the child property.
Overall, the SizedBox widget is a simple and powerful tool for creating boxes with specific sizes or adding space between widgets.
Align
In Flutter, the Align widget is used to align a child widget within a parent widget. The alignment can be specified using the alignment property, which takes an Alignment object.
Here’s an example of how to use the Align widget to center a child widget within its parent.
In this example, the Align widget is used to center a red Container widget within its parent. The alignment property is set to Alignment.center, which centers the child widget both horizontally and vertically.
You can also use the Alignment class to specify other alignments, such as Alignment.bottomCenter, Alignment.bottomRight, Alignment.topCenter, and so on. For example, to align a child widget to the bottom-right corner of its parent, you could use:
In this example, the Align widget is used to align a red Container widget to the bottom-right corner of its parent.
Overall, the Align widget is a useful tool for aligning child widgets within a parent widget, and the Alignment class provides a flexible way to specify different alignments.
Positioned vs Align
In Flutter, both the Positioned and Align widgets are used for positioning child widgets within a parent widget, but they have different use cases.
The Positioned widget is used to position a child widget relative to a parent widget's edges. It requires an explicit left, top, right, and/or bottom value to determine the position of the child widget. This widget is typically used inside a Stack widget to position child widgets on top of each other.
On the other hand, the Align widget is used to align a child widget within a parent widget based on a specified Alignment. It does not require an explicit position value and is more flexible than Positioned. The Align widget is typically used to center or align child widgets within a parent widget.
That’s it for now. I hope you understand the basic Flutter widgets and learn how to use them.
