The Stack widget in Flutter allows you to overlap widgets. For example, you can use the Stack widget to develop a UI that shows a list of users’ profile pictures overlapping on top of the previous one. The Stack widget is one of the most important and widely used widgets. But sometimes you may want to control how the widgets are positioned. So in this tutorial, we’ll see the Flutter position widget in Stack: The top 3 ways and when you can use them.

Here’s what we’ll cover:
The Problem
The problem is that when you add several children to the Stack widget, all the children are positioned in the top start (top-left for the LTR text settings) direction of the Stack widget.

You may want to change this default setting and have the widget’s position of your choice. That’s what we’ll see in the next section.
Flutter Position Widget in Stack : 3 Ways
In Flutter, to position widget in Stack, there are mainly three ways:
- Using Align Widget
- Using Position Widget
- Using Stack’s Alignment Property
You can use any of the above based on your requirements.
1. Using Align Widget
You can use the Align widget, to align a particular widget in a specific position. If you use the Align widget, your child widget will not follow the Stack’s alignment and then you can place the widget anywhere on the screen using the Align’s alignment property.
Here’s how you do it:
Step 1: Wrap the Stack’s child widget inside the Align
widget.
Step 2: Inside the Align widget, add the alignment
property and give it the alignment of your choice. For example, AlignmentDirectional.centerStart
, AlignmentDirectional.topEnd
and so on.
Step 3: Run the app.
Code Example:
Stack( children: [ Align( alignment: AlignmentDirectional.topEnd, // <-- SEE HERE child: Container( width: 300, height: 300, color: Colors.redAccent, ), ), Container( width: 250, height: 250, color: Colors.amberAccent, ), Container( width: 230, height: 230, color: Colors.deepPurpleAccent, ), ], )
When to Use:
You can use the Align widget when you want the widget not to follow the Stack’s alignment and position a widget as per the alignment specified in the Align widget.
Output:

Using Position Widget
Using the Position widget, you can place a widget at a custom position such as 10 pixels from left and 15 pixels from the top, instead of just topLeft, bottomCenter.
Here’s how you do it:
Step 1: Wrap the Stack’s child widget inside the Position
widget.
Step 2: Inside the Position widget, add the top
, right
, bottom
, left
property and give it a value. For example, setting top:15 and right:0 will position a widget on the top right of your screen with 15 px space from the top.
Step 3: Run the app.
Code Example:
Stack( children: [ Align( alignment: AlignmentDirectional.topEnd, child: Container( width: 300, height: 300, color: Colors.redAccent, ), ), Container( width: 250, height: 250, color: Colors.amberAccent, ), Positioned( //<-- SEE HERE right: 0, top: 15, child: Container( width: 230, height: 230, color: Colors.deepPurpleAccent, ), ), ], )
When to Use:
You should use the Position widget when you want to place any widget at a specific location on your screen.
Output:

Using Stack’s Alignment Property
Using Stack’s alignment property, you can align all the widgets in one direction. For example, all widgets in the center, all widgets in the bottom right, and so on.
To position the widget in the Stack, simply add the alignment
property and give it the alignment of your choice. For example, AlignmentDirectional.centerStart
, AlignmentDirectional.topEnd
and so on.
Code Example:
Stack( alignment: AlignmentDirectional.center, children: [ Container( width: 300, height: 300, color: Colors.redAccent, ), Container( width: 250, height: 250, color: Colors.amberAccent, ), Container( width: 230, height: 230, color: Colors.deepPurpleAccent, ), ], )
When to Use:
Use this property when you want to align ALL of your widgets in a specific direction.
Output:

Conclusion
In this tutorial, we learned the Flutter position widget in Stack. We first saw the problem of having the default direction with the Stack widget and then saw how you can position a widget in Stack using Align, Position widget. We also explored the simplest way of positioning all the widgets in one direction using Stack’s alignment property.
Would you like to check other interesting Flutter tutorials?