Stack Widget – Flutter Widget Guide By Flutter Agency

• Flutter
• Flutter Widget Guide

What is Stack Widget in Flutter?

A Stack Widget is a Widget that stacks its child widgets on top of each other and displays a single child at any time or we can say that allows multiple layers of widgets into a single screen.

It is useful when a user wants to Overlap multiple children in a single screen.

The Default constructor of Stack Widget looks like below:

Stack({
  Key key,
  AlignmentGeometry alignment:                         AlignmentDirectional.topStart,
  TextDirection textDirection,
  StackFit fit: StackFit.loose,
  Overflow overflow: Overflow.clip,
  List<Widget> children: const [],
});

Stack takes a list of widgets and renders them one on the other.

Each child of a Stack is either positioned or non-positioned. Positioned children are those wrapped in a Positioned Widget that has at least one non-null property. The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left environments. The positioned children are then placed relative to the stack according to their top, right, bottom, and left properties.

What is Positioned Widget in Flutter ?

Positioned Widget is used to align the children’s relative parent widget.

It works with a combination of parameters – vertical (top, bottom, height) and horizontal (left, right, and width) to position the widgets within the Stack.
If not Positioned Widget, Align Widget is used to position the member of Stack.

Non-positioned Widget :

If Stack’s member is not wrapped with Align Widget or Positioned Widget, then it considered as Non-positioned widget.
Non-positioned widgets end up on the screen based on Stack’s alignment property. By default, the top left corner on the screen.

Properties of a Stack Widget:

• alignment:

It basically determines the placement of Non-positioned Widget available in Stack.

Stack(
  alignment: Alignment.topCenter, // Center of Top
  children: <Widget>[
  list of Children
  ]
  )

• textDirection:

One can change the direction of text, whether it should flow from left to right (LTR) or right to left (RTL). Which becomes quite handy while working with multiple languages.

Stack(
  textDirection: TextDirection.rtl, // Right to Left
  children: <Widget>[]
  )

• fit:

It determines the size of Non-positioned Widget available in Stack Widget. It has a Property as listed below:

• StackFit.loose: If the constraints of 300*400 passed to the stack from its parent then the non-positioned children of the stack can have any width from 0 to 300 and hight from 0 to 400.
  StackFit.expand: If the constraints of 300*400 passed to the stack from its parent then the non-positioned children of the stack will have the highest width (i.e 300) and also highest hight (i.e 400).
  StackFit.passthrough: The constraints passed to the stack from its parent will remain unmodified for the non-positioned children.

Code Snippet will look like below:

Stack(
  fit: StackFit.loose,
  children: <Widget>[
  ]
)

• overflow:

To manages whether overflowing content of child widget should be clipped, or remain as it is, i.e visible.

Stack(
  overflow: Overflow.clip, // Clip the Content...
  children: <Widget>[
  ]
  )

How to use Stack Widget in Flutter?

Stack takes a list of widgets and renders them from bottom to top direction.

Stack(
  children: <Widget>[
    ThirdWidget(),
    SecondWidget(),
    FirstWidget(),
  ],
),

Example:

When we wrap three Container Widget each of different color we will have a code snippet look like below:

Stack(
      children: <Widget>[
        Container(
          height: 350,
          width: 350,
          color: Colors.orangeAccent,
        ),
        Container(
          height: 200,
          width: 200,
          color: Colors.purple,
        ),
        Container(
          height: 150,
          width: 150,
          color: Colors.green,
        )
      ],
    );

We will get output like below:

Stack

Users can make use of a combination of Stack and Positioned to align the child in a particular position. Consider a code snippet like below:

Center(
      child: Stack(children: [
        Container(
          height: 100,
          width: 100,
          color: Colors.green,
        ),
        Positioned(
          bottom: 20,
          left: 20,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.orangeAccent,
          ),
        ),
        Positioned(
          top: 50,
          right: 50,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        )
      ]),
    );

We will get output like below:

Positioned with Stack

General Queries With Stack Widget in Flutter

• Is it possible to wrap Stack inside Stack in flutter?

Users can wrap your second Stack With Container with height and width property.

Stack fill height and width of the parent widget but in your case height and width of the parent, the widget is not defined as it is a Stack. If you define the size of the parent widget so that stack can Position their child widget from their start point.

Stack(
  children: [
    Positioned(
      top: 350.0,
      child: Text("Text#1"),
    ),
    Positioned(
      top: 100.0,
      child: Container(
        height: mediaQueryData.size.height,
        width: mediaQueryData.size.width,
        child: Stack(
          children: [
            Positioned(
              top:200.0,
              child: Text("Text#2"),
            )
          ],
        ),
      ),
    )
  ],
),

• Users have a widget in a stack so he would like to position my button bar in the bottom center of the stack but nothing works. The widget just remain sticks to the left side.

Consider a code snippet like below:

Align(
  alignment: Alignment.bottomCenter,
  child: ButtonBar(
    alignment: MainAxisAlignment.center,
    children: <Widget>[
      new OutlineButton(
        onPressed: () {
          Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) => new LoginPage()));
        },
        child: new Text(
          "Login",
          style: new TextStyle(color: Colors.white),
        ),
      ),
      ElevatedButton(
        color: Colors.white,
        onPressed: () {
          Navigator.push(
            context,
            new MaterialPageRoute(
              builder: (context) =>
                new RegistrationPage()));
        },
        child: new Text(
          "Register",
          style: new TextStyle(color: Colors.black),
        ),
      )
    ],
  ),
)

Conclusion:

In this article, we have been through How to use Stack Widget Flutter?

Thanks for being with us on a Flutter Journey !!!

Keep Learning!! Keep Fluttering !!!

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.