Stack and Positioned Widget in Flutter
What is Stack in Flutter?
Stack and Positioned Widget allows us to make a layer of widgets by putting them on top of each other. In this article we will learn about Stack and Positioned Widget and How to Implement in our Project.Stack Widget
Stack is the parent of all the widget that we want to put as a layer. Stack contain children of widgets. The child widget in a stack can be either positioned or non-positioned like container or others.
We can use the alignment attribute to change the alignment of the widgets which non-positioned.
Stack places the children widgets in order with the first child being at the bottom and the last child being at the top.
How to use Stack Widget
The below example helps to understand the use of stack widget quickly.
Now look at the result of this code here to understand the concept. Hope you understand the uses of stack widget. So let's use positioned widget.
Positioned Widget
Positioned widgets are use to specify the position of a widget inside the stack widget. It contain single child. You can put any widget as child of positioned widget and give a position inside the stack widget.
If you are familiar with HTML and CSS, you may know how to use relative and absolute to position a image inside a div. Things are same here. Stack Widget is positioned to relative by default and Positioned widget has an absolute value. An example will give you bright sight.
Example of Positioned Widget
Here we have added positioned widget as a children widget of our Stack. Then we provide some position value.
Stack(
children: <Widget>[
// Max Size
Container(
height: 300,
width: 400,
color: Colors.green,
),
Container(
height: 250,
width: 350,
color: Colors.blue,
),
Container(
height: 200,
width: 300,
color: Colors.yellow,
),
Positioned(
top: 0,
right: 0,
child: Container(
height: 100,
width: 200,
color: Colors.red,
),)
],
);Now look at the result here what you get. Here we positioned top:0 means from top, it takes 0px then from right it takes 0px. So the result is marked as number 4.
Create Profile Page using Stack
In this example we will make Flutter profile page with cover image and avatar image by using stack and positioned widget.
Project Source Code
import 'package:flutter/material.dart';
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Stack Demo'),centerTitle: true,),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
// background image and bottom contents
Column(
children: <Widget>[
Container(
height: 200.0,
color: Colors.orange,
child: Center(
child: Text('Background image goes here'),
),
),
Expanded(
child: Container(
color: Colors.white,
child: Center(
child: Text('Content goes here'),
),
),
)
],
),
// Profile image
Positioned(
top: 150.0, // (background container size) - (circle height / 2)
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.green
),
child: Icon(Icons.person,color: Colors.white,)
),
)
],
),
);
}
}Wrapping Up
Stack and positioned widgets are very handy for creating any type of UI. Hope you are now able to implement stack and positioned widget into your project and create beautiful UI. Is it possible to add stack widget inside another stack widget? The answer is yes. So try to do this job and comment us your result. Thank you.