The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to display text over an image, the Stack widget is ideal for such scenarios.
The Stack widget has two types of child widgets:
- Positioned widgets: These are wrapped in the Positioned widget and are positioned using the top, right, left, and bottom properties, allowing for precise control of their placement within the stack.
- Non-positioned widgets: These are simply placed in the Stack without being wrapped in a Positioned widget. By default, they are aligned to the top-left corner unless you specify a different alignment using the alignment property.
Stack layers its children in the order they are declared, meaning the first widget appears at the bottom and the last one on top. You can use the key property to modify this rendering order or assign a specific order to the child widgets if needed.
Constructor of Stack Class:
Syntax
Stack({
Key? key,
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection? textDirection,
StackFit fit: StackFit.loose,
Overflow overflow: Overflow.clip,
Clip clipBehavior: Clip.hardEdge,
List<Widget> children: const <Widget>[]
}
)
Properties of Stack Widget:
- alignment: This property takes a parameter of Alignment Geometry, and controls how a child widget which is non-positioned or partially-positioned will be aligned in the Stack.
- clipBehaviour: This property decided whether the content will be clipped or not.
- fit: This property decided how the non-positioned children in the Stack will fill the space available to it.
- overflow: This property controls whether the overflow part of the content will be visible or not,
- textDirection: With this property, we can choose the text direction from right to left. or left to right.
Example 1:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
), //AppBar
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: Center(
child: Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
), //Container
Container(
width: 250,
height: 250,
color: Colors.black,
), //Container
Container(
height: 200,
width: 200,
color: Colors.purple,
), //Container
], //<Widget>[]
), //Stack
), //Center
), //SizedBox
) //Center
) //Scaffold
) //MaterialApp
);
}
Output:
Explanation of the above Program:
In this Flutter app, the root widget is the Scaffold, which provides the basic structure. At the top of the widget tree, there’s an AppBar with a Text widget displaying “GeeksforGeeks” as the title, and the background color of the AppBar is set to Colors.greenAccent[400].
In the body of the app, the parent widget is Center, which centers its child widget—a SizedBox with a height and width of 300. The SizedBox itself contains another Center widget, which holds the Stack widget.
Inside the Stack, there are three Container widgets:
- The first Container has a width and height of 300 (matching the SizedBox) and is colored red.
- The second Container has a width and height of 250 and is colored black.
- The third Container is 200×200 in size and is colored purple.
When we run the app, we can see that these three containers are stacked on top of each other, with the red container at the bottom, the black container in the middle, and the purple container on top. Since all three containers are non-positioned widgets within the Stack, their default alignment is set to Alignment.topRight, causing them to be aligned to the top-right corner.
Example 2:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
), //AppBar
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: Center(
child: Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
padding: EdgeInsets.all(15.0),
alignment: Alignment.topRight,
child: Text(
'One',
style: TextStyle(color: Colors.white),
), //Text
), //Container
Container(
width: 250,
height: 250,
color: Colors.black,
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomLeft,
child: Text(
'Two',
style: TextStyle(color: Colors.white),
), //Text
), //Container
Container(
height: 200,
width: 200,
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg") //NetworkImage
), //DecorationImage
), //BoxDecoration
child: Text(
"GeeksforGeeks",
style:
TextStyle(color: Colors.white, fontSize: 20.0),
), //Text
), //Container
], //<Widget>[]
), //Stack
), //Center
), //SizedBox
) //Center
) //Scaffold
) //MaterialApp
);
}
Output:
Explanation of the above Program:
In this app, we’ve added padding and a Text widget to each of the three containers, with the text color set to white.
- In the first Container, the text is “One,” and the alignment is set to Alignment.topRight, placing the text in the top-right corner.
- In the second Container, the text is “Two,” and the alignment is set to Alignment.bottomLeft, positioning the text in the bottom-left corner.
- In the third Container, we’ve added a background image displaying the GeeksforGeeks logo by using the decoration property. The text in this container is “GeeksforGeeks,” and its alignment is set to Alignment.bottomCenter, placing the text at the bottom-center, just above the image.
This demonstrates how the Stack widget can be effectively used to overlay text (or any other widget) on top of another widget, allowing for flexible and layered UI designs.
Example 3:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
), //AppBar
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: Center(
child: Stack(
fit: StackFit.expand,
clipBehavior: Clip.antiAliasWithSaveLayer,
overflow: Overflow.visible,
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
), //Container
Positioned(
top: 80,
left: 80,
child: Container(
width: 250,
height: 250,
color: Colors.black,
),
), //Container
Positioned(
left: 20,
top: 20,
child: Container(
height: 200,
width: 200,
color: Colors.purple,
),
), //Container
], //<Widget>[]
), //Stack
), //Center
), //SizedBox
) //Center
) //Scaffold
) //MaterialApp
);
}
Output:
Explanation of the above Program:
In this app, we’ve wrapped the purple and black Container widgets inside Positioned widgets, making them positioned children within the Stack.
The Stack widget’s fit property is set to StackFit.expand, which forces all its child widgets to take up the maximum available space. The clipBehavior is set to Clip.antiAliasWithSaveLayer to prevent any bleeding edges, ensuring smooth edges around the child widgets. Additionally, the overflow is set to visible, allowing any part of the child widgets that exceed their boundaries to remain visible.
Since the purple and black containers are wrapped with Positioned, we now need to specify their positions.
- For the black Container, the top and left properties are both set to 80, which causes it to overflow beyond the SizedBox and the red container underneath. However, due to the overflow being set to visible, we can still see the overflowing portion.
- For the purple Container, the top and left are both set to 20, making it slightly offset compared to the original example.
This shows how we can use the Stack widget to create flexible layouts with overlapping and positioned elements. However, similar layouts can also be achieved using widgets like CustomSingleChildLayout or CustomMultiChildLayout, which provide even more control over custom positioning.
Similar Reads
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Flutter - Stateless Widget
Stateless Widget is something that does not have a state. To understand a Stateless Widget, you need to clearly understand widgets and states. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To le
4 min read
Flutter - Stepper Widget
In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. Stepper is generally used in filling forms online. For example, remember filling an online form for applying to any university or passport or driving license. We filled
8 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read
Flutter - ShaderMask Widget
ShaderMask is a widget in Flutter that applies a shader to its child. It allows you to create various visual effects by manipulating the colors and gradients of the child widget. In this article, we are going to implement the ShaderMask widget and explore some properties of it. Basic Syntax of Shade
4 min read
OffStage Widget in Flutter
Flutter provides an inbuilt widget called “Offstageâ€, which is been used to hide or show any widget programmatically depending on user action/event. Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit
4 min read
Flutter - Transform Widget
The Transform widget in Flutter is used to apply various transformations to its child widget, such as rotation, translation (positioning), scaling, and skewing. In this article, we are going to implement all transformations such as rotation, translation (positioning), scaling, and skewing made by th
6 min read
Opacity Widget in Flutter
The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensive as it needs coloring the child
2 min read
Flutter - InkWell Widget
InkWell is the material widget in flutter. It responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of
2 min read
Flutter - Positioned Widget
Positioned is a widget that comes built-in with flutter SDK. Positioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets. Constr
3 min read