Flutter Position Widget in Stack- 3 Top Ways to Know (2023)

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
• Flutter Position Widget in Stack : 3 Ways
  1. Using Align Widget
  2. Using Position Widget
  3. Using Stack’s Alignment Property

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?