Stack & IndexedStack In Flutter

Updated 28 April 2023


Hi, folks let’s understand the Stack & IndexedStack in Flutter.
The stack is a widget in Flutter that contains a list of widgets and positions them on top of each other.
An IndexedStack is a stack where just one component is displayed at one time by its index
In Flutter app development developers use these widgets in various places in order to enhance the app UI.

You can also check out our Flutter app development services for more Flutter app development.

Stack Widget

The stack widget contains a list of widgets and places them on top of each other. And it places their children on top of each other like a stack of books. In other words, the stack widget would overlap multiple widgets on one screen. As you can add different images or colors using containers in it.

alignment :

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

textDirection :

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

fit :

–>  This property decided how the non-positioned children in the Stack will fill the space available.

–> fit has three types of StackFit.loose, StackFit.expand, StackFit.passthrough

overflow :

–> To manage whether the overflowing content of the child widget should be clipped, or remain as it is, like-: visible.

Positioned Widget:

The Positioned widgets are related to the position of some widgets. The right-positioned widgets allow us to control this. A child of that stack is positioned on the inside of the stack.

height: we can give a specific height to a widget.

width: we can give a specific width to a widget.

left: set margin/padding from the left side of the widget.

right: set margin/padding from the right side of the widget.

top: set margin/padding from the top side of the widget.

bottom: set margin/padding from the bottom side of the widget.

IndexedStack Widget

An IndexedStack is a stack where only one component is shown at one time by its index. A Stack that shows a solitary child from a list of children. The showed child is the one with the given index. The stack is consistently just about as large as the biggest child. On the off chance that the value is null, nothing is shown.

alignment: The non-positioned and partially-positioned children in the stack are aligned using these attributes.

text direction: These properties are used to determine alignment based on the text direction.

sizing: The non-positioned children in the stack are sized using these properties.

index: These attributes are used to display the child’s index.

children: The List uses these properties.

That’s all for this Article 🎊 .


We learned about Stack and IndexedStack in Flutter in this blog.

Visit the link for additional information on the Stack in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home