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 200x200 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. A stepper is generally used in filling out forms online.For example, remember filling out an online form for applying to any university or passport, or driving license.
6 min read
Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing
5 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 - 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
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter - GridPaper Widget A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. Â How to use it?Dart GridPaper(
3 min read
Flutter - Inherited Widget If you are a flutter developer then you know how easy is to create Flutter UI. But when you have lots of widgets in your app and you want to pass data from one widget to another widget, this will be a pain for many developers,s especially for the newbie, this will be really hard for them to pass the
6 min read
Flutter - Card Widget Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read