Flutter Stack
The stack is a widget that contains a list of widgets and we can position them on top each other. In other words, stack allows us to overlap and render multiple widgets on a single screen from bottom to top. Hence, the first widget to render is the bottommost item, and the last widget is the topmost item.
Key Points Related to Stack Widget
The following are the key points of the Flutter stack widget:
- The child widgets in a stack can be positioned or non-positioned.
- Positioned items are wrapped in Positioned widget and must have a one non-null child and position property
- The non-positioned children are aligned themselves. It displays on the screen based on the alignment of the stack. The default alignment of the children is top left corner.
- We can use the alignment to change the alignment of the children.
How to use a stack widget in Flutter?
The below example helps us explain the use of a stack that contains three containers of shrinking size:
Stack( children:[ // Max Size Container( color: Colors.green, ), Container( color: Colors.blue, ), Container( color: Colors.yellow, ) ], ),
It will give the following output:
Properties of the Stack Widget
The following are the properties used with the stack widget:
alignment: We determine how the children are positioned on the stack. they can be top, bottom, center, center-right, etc.
Stack( alignment: Alignment.topCenter, // Center of Top children:[ ] )
fit: We control the size of the non positioned children by using the fit property. It has three types: loose, expand and passthrough. The loose is used to set the children small, the expand attribute expands the children as large as possible, and the passthrough set the childrent depending on the parent widget.
Stack( fit: StackFit.passthrough, children:[ ] )
overflow: It controls the children, whether visible or clipped, when the content is overflowing outside the stack.
Stack( overflow: Overflow.clip, // Clip the Content children:[ ] )
clipBehavior: It determines whether the content will be clipped or not on overflow.
Positioned
We can use the positioned widget to position the child in the stack. The following is the constructor of the positioned widget:
const Positioned({
Key key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
})
Stack Widget Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyStackWidget(),
);
}
}
class MyStackWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Stack Widget Example"),
),
body: Center(
child: Stack(
fit: StackFit.passthrough,
overflow: Overflow.visible,
children: [
// Max Size Widget
Container(
height: 300,
width: 400,
color: Colors.green,
child: Center(
child: Text(
'Top Widget: Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
height: 100,
width: 150,
color: Colors.blue,
child: Center(
child: Text(
'Middle Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
Positioned(
top: 30,
left: 20,
child: Container(
height: 100,
width: 150,
color: Colors.orange,
child: Center(
child: Text(
'Bottom Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
)
),
],
),
)
),
);
}
}
Output
Is it possible to wrap stack inside stack in Flutter?
Yes, it is possible to wrap stack inside stack in Flutter. We can do this by wrapping the second stack inside a container with a height and a width property.
Lets see an example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyStackWidget(),
);
}
}
class MyStackWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Stack Widget Example"),
),
body: Center(
child: Stack(
children: [
Positioned(
top: 100,
child: Text(
"Stack#1",
style: TextStyle(color: Colors.black, fontSize: 20)
),
),
Positioned(
top: 150.0,
child: Container(
height: 220,
width: 220,
color: Colors.green,
child: Stack(
children: [
Positioned(
top:160,
child: Text(
"Stack Inside Stack#1",
style: TextStyle(color: Colors.white, fontSize: 20)
),
)
],
),
),
)
],
),
)
),
);
}
}
Output on running:
