# Widgets 15 | Stack

![What we will learn?](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXPXjbXrBqnwoOpDUJf%2F-LXP_zhgke-YpGgNEmDc%2FStack_09.jpg?alt=media\&token=30c69c1b-8265-4130-aeb0-f1ceade4dac5)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXP4VzmdmM4TH4F7Fzl%2FStack-01.png?alt=media\&token=bff57f9a-a1b9-4e85-829c-795aabccf1d0)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXP8nLkH0jsmwcopoI_%2FStack-02.png?alt=media\&token=c0d02b8a-695b-4ab9-b084-6793eae2b0f2)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXPCqYcu3tta4nPgyx3%2FStack-03.png?alt=media\&token=54c5d03e-6b32-47f9-96eb-6ac104092a5a)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXPEzgjvPSDuUG0VtUu%2FStack-04.png?alt=media\&token=280e7f93-612e-4fc5-a026-b12104a36200)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXPJke_lPIzr6S1aeEz%2FStack-05.png?alt=media\&token=e8f5aa3d-4d49-4749-962f-1cc0d94c6bb4)

## 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`.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXPQBcohWl3zEOFhR8r%2FStack-06.png?alt=media\&token=ceb1c3ca-29c1-4aec-856c-856da022c91e)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXP0fF_97edEkPwewqh%2F-LXPUs_gIKyYuwrBYkSn%2FStack-07.png?alt=media\&token=1e05a5be-7f85-48f6-8134-5757f5b40cdc)

## 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;