Stack widget in Flutter

You use the row widget to place the children in a horizontal array and you use the Column widget to place the children in a vertical array. But, what if you want to place the children in an overlapping manner, i.e; the child at the top overlaps the child below it. In other words, what if you want to place the child widgets on top of each other. How would you do that? The answer is the Stack widget. In this post, I will tell you about the Stack widget in flutter and how you can use the Stack widget in your flutter project.

What is the Stack widget in Flutter?

The Stack widget in flutter places its child widgets in a manner that one child comes on top of the other child. For example, If we have 3 container widgets and we have to put the container widgets on top of each other, then the containers go like this – 1st container, then the 2nd container on top of the 1st container, then the 3rd container on top of the 2nd container. The stack’s child widgets are either positioned or non-positioned. If we wrap a child in a Positioned widget, then that child becomes a positioned child.

Now, let’s see an example. So that you know how to use the Stack widget in flutter.

Output :

Here, I have used three container widgets inside the stack widget. The containers have been placed in this manner – The first container is at the bottom, then the second container is on top of the first container, and then the third container is on top of the second container.

That’s it about the Stack widget in flutter.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: