> For the complete documentation index, see [llms.txt](https://flutteropen.gitbook.io/flutter-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteropen.gitbook.io/flutter-widgets/widgets-15-or-stack.md).

# Widgets 15 | Stack

![What we will learn?](/files/-LXP_zhgke-YpGgNEmDc)

## Before Stack

Before our tutorial, we should create a page to contain our code.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class StackPage extends StatefulWidget {
  @override
  _StackState createState() => _StackState();
}

class _StackState extends State<StackPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.STACK),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            //our code.
            SizedBox(height: 600)
          ],
        ),
      ),
    );
  }
}
```

It just shows an empty page with a title.

![](/files/-LXP4VzmdmM4TH4F7Fzl)

## Simple Use

The Stack is a layout that can contain multiple children widgets, but they are in different layers. Let's look at an example.

```dart
 Widget _simpleStack() => Container(
        constraints: BoxConstraints.expand(height: 160),
        child: Stack(
          children: <Widget>[
            Container(
              color: RED,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
              color: BLUE_LIGHT,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 30, horizontal: 60),
              color: PURPLE,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 50, horizontal: 80),
              color: TEXT_BLACK_LIGHT,
            ),
          ],
        ),
      );
```

It shows as below, you can see the layers all in the same position but different size. The upper layer just put upon the bottom one, just like a book with different pages put on a table.

![](/files/-LXP8nLkH0jsmwcopoI_)

## Constructor

So, let's look at its constructor.

```dart
Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  })
```

The parameters are a bit less for us. But should tell you how to use them.

## alignment

We have used the alignment in the Container. It is the same as the alignment in the Container. You can find more detail in the Widgets 01 | Container. I just give an example here to describe it here.&#x20;

```dart
 Widget _alignStack() => Container(
        margin: EdgeInsets.only(top: 10),
        color: BLUE_DEEP,
        constraints: BoxConstraints.expand(height: 160),
        child: Stack(
          alignment: Alignment.centerRight,
          children: <Widget>[
            Container(
              height: 100,
              width: 100,
              color: Colors.white,
            ),
            Container(
              height: 60,
              width: 60,
              color: TEXT_BLACK_LIGHT,
            ),
          ],
        ),
      );
```

It shows as follows.

![](/files/-LXPCqYcu3tta4nPgyx3)

## textDirection

This will control the direction of the `Text`. It has two choices, the `ltr` draws from left to right, the `rtl` draws it from right to left.

```dart
Widget _textLeftStack() => Container(
        margin: EdgeInsets.only(top: 10),
        color: GREEN,
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        constraints: BoxConstraints.expand(height: 60),
        child: Stack(
          textDirection: TextDirection.ltr,
          children: <Widget>[
            Text(
              "Flutter Open drawed from left to rigt",
              style: TextStyle(color: TEXT_BLACK_LIGHT),
            )
          ],
        ),
      );

  Widget _textRightStack() => Container(
        margin: EdgeInsets.only(top: 10),
        color: PURPLE,
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        constraints: BoxConstraints.expand(height: 60),
        child: Stack(
          textDirection: TextDirection.rtl,
          children: <Widget>[
            Text(
              "Flutter Open drawed from right to left",
              style: TextStyle(color: TEXT_BLACK_LIGHT),
            )
          ],
        ),
      );
```

It will show you as below.

![](/files/-LXPEzgjvPSDuUG0VtUu)

## fit

This will control the size of the children widgets in the flutter.It has only three types of the `StackFit`.

```dart
Widget _fitStack() => Container(
      color: PURPLE,
      margin: EdgeInsets.only(top: 10),
      constraints: BoxConstraints.expand(height: 220),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            constraints: BoxConstraints.expand(height: 60),
            color: RED,
            child: Stack(
              fit: StackFit.loose,
              children: <Widget>[
                Container(
                  color: BLUE_DEEP,
                  child: Text(
                    "StackFit.loose",
                    style: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 20),
                  ),
                )
              ],
            ),
          ),
          Container(
            constraints: BoxConstraints.expand(height: 60),
            color: GREEN,
            child: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Container(
                  child: Text(
                    "StackFit.expand",
                    style: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 20),
                  ),
                  color: BLUE_LIGHT,
                )
              ],
            ),
          ),
          SizedBox(height: 10),
          Container(
            constraints: BoxConstraints.expand(height: 60),
            color: RED_LIGHT,
            child: Stack(
              fit: StackFit.passthrough,
              children: <Widget>[
                Container(
                  child: Text(
                    "StackFit.passthrough",
                    style: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 20),
                  ),
                  color: GREEN,
                )
              ],
            ),
          )
        ],
      ));
```

It will show you as follows.The `loose` make the children widget as small as possible, the `expand` set the children as large as possible. The `passthrough` will depend on its parent widget.

![](/files/-LXPJke_lPIzr6S1aeEz)

## overflow

This parameter will control the children widget.  When its content outside the `Stack`. whether the children widget will be visible or clip. Let's look at an example.

```dart
 Widget _overVisibleStack() => Container(
    margin: EdgeInsets.only(top: 10),
    color: BLUE_LIGHT,
    constraints: BoxConstraints.expand(height: 40),
    child: Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Positioned(
          top: 15,
          child: Text(
            "Flutter Open is too long to draw here, it will be visible.\n666666666666666666666666666666666",
            style: TextStyle(color: TEXT_BLACK_LIGHT),
          ),
        )
      ],
    ),
  );
  Widget _overClipStack() => Container(
        margin: EdgeInsets.only(top: 10),
        color: BLUE_LIGHT,
        constraints: BoxConstraints.expand(height: 40),
        child: Stack(
          overflow: Overflow.clip,
          children: <Widget>[
            Positioned(
              top: 15,
              child: Text(
                "Flutter Open is too long to draw here, it will be cliped.\n666666666666666666666666666666666",
                style: TextStyle(color: TEXT_BLACK_LIGHT),
              ),
            )
          ],
        ),
      );
```

It will show you like this. The first one shows the contents, but two cut the part that outside the `Stack`.

![](/files/-LXPQBcohWl3zEOFhR8r)

## Positioned

It isn't the parameter of the `Stack`, but it relates to the `Stack`. It will help you locate the children widgets in the `Stack`. Let's look at its constructor.

```dart
const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  }) 
```

The parameters, left, top, right, and bottom will control the distance inside the Stack. If we set `left: 10`, this Positioned will locate at the position at the `Stack` that the distance from the left of the `Stack` is 10. Let's look at an example.

```dart
Widget _posStack() => Container(
        margin: EdgeInsets.only(top: 10),
        color: TEXT_BLACK_LIGHT,
        constraints: BoxConstraints.expand(height: 100),
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 10,
              top: 10,
              height: 60,
              width: 60,
              child: Container(
                color: RED,
              ),
            ),
            Positioned(
              right: 200,
              top: 30,
              height: 60,
              width: 60,
              child: Container(
                color: BLUE_DEEP,
              ),
            ),
            Positioned(
              right: 10,
              top: 10,
              height: 60,
              width: 60,
              child: Container(
                color: GREEN,
              ),
            ),

          ],
        ),
      );
```

It will show you as follows.

![](/files/-LXPUs_gIKyYuwrBYkSn)

## Conclusion

The Stack is very common in the flutter. If you have a layout that doesn't have a simple direction, such as horizontal, vertical. You can consider this layout.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | Medium                                        |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |

&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteropen.gitbook.io/flutter-widgets/widgets-15-or-stack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.