Today we will be discussing Stack Flutter Widget which is widely used in all or most of the Flutter applications currently. So Stack is basically a data structure that is used to put processes or widgets or objects in form of the stack which can be referred to as in line.
You can think of a Stack data structure as putting a book on shelves or you are joining a line of people. In which case the first come first serve basis is followed. Hence here also in Stack Flutter Widget, the widgets are aligned in two directions.
One is the Horizontal direction in which widgets are stacked in horizontal line and the other one is the vertical direction in which case widgets will be vertically placed. So let discussion this widget with an example that will make it easier to understand.
1. Want to Overlap Widgets
So if you are basically tired of using the Row and Column widgets in flutter and maybe you want to overlap widgets then you should consider using Stack Flutter Widget.
Stack takes a list of widgets and renders them from the ground up. Below is the code to show the example.
Stack(
fit: StackFit.loose // Read below for more information
children: <Widgets>[
stackWidget1,
stackWidget2,
stackWidget3,
stackWidget4,
],
)
StackFit.loose will set the width and height of the widgets as per their actual width and height. But if you want to use or make it to the full width of the parent widget then you can use expand function. Let’s see the above code updated with fit value.
Stack(
fit: StackFit.expand
children: <Widgets>[
stackWidget1,
stackWidget2,
stackWidget3,
stackWidget4,
],
)
All the widgets will be aligned to topStart by default depending upon the text direction. So let the discussion about alignment property of Stack Widget.
2. Alignment Property of Stack Flutter Widget
If you want to change the Alignment of the stack flutter widget you need to update your code as below shown in the code box. So you need to override the default value using the alignment property of the stack widget.
Stack(
alignment: AlignmentDirectional.bottomCenter,
fit: StackFit.expand
children: <Widgets>[
stackWidget1,
stackWidget2,
stackWidget3,
stackWidget4,
],
)
But if you want to position a particular widget in the stack in a specified position then you can use the position widget in the child which you want to position as shown in the below code for widget 2.
Stack(
alignment: AlignmentDirectional.bottomCenter,
fit: StackFit.expand
children: <Widgets>[
stackWidget1,
Positioned(
botton:0,
right:0,
child: stackWidget2,
),
stackWidget3,
stackWidget4,
],
)
Hence sometimes there can be a scenario in which case the widget will be pushed out of the boundary of stack child. In that case, you need to use the overflow property of the stack to clip your widget into the screen. Let update the above code to do so.
Stack(
alignment: AlignmentDirectional.bottomCenter,
fit: StackFit.expand
children: <Widgets>[
stackWidget1,
Positioned(
botton:0,
right:0,
child: stackWidget2,
),
stackWidget3,
stackWidget4,
],
overflow: OverFlow.clip, // This will prevent to get widgets overflowed
)
I think these are all the important aspects of the stack flutter widget which we have discussed today. As these are the most important used widget in applications. And all the properties discussed are the major ones that are used on a daily basis.
If you want to learn more about Stack Flutter Widget then you should see the flutter.dev website to get complete information about all the properties you have in the stack widget. As the official site will contain all the documentation regarding this widget.
So that’s all for today in Stack Flutter Widget of the week. If you liked my post follow us on social media such as Facebook and Twitter. If you have any questions or query then put your comments below. You can also consider reading about AboutDialog Flutter Widget.
We are starting a very good email newsletter about flutter widgets and interview questions. If you want then please subscribe to my newsletter to know how can you crack interviews of Google, Facebook, etc.
