Flutter Stack Widget and Properties With Examples
Flutter Knowledge Sharing #16
This is my next story about Flutter. Google has just announced Flutter 2 as the new generation. There have so many upgrades. In summary, there have portability, web stability, AdMob Support, and more new features. Now the Flutter developers are not only mobile developers. Therefore, Flutter will be the future. I have written so many articles in Flutter that you are must need to know as a beginner. I am very happy to say that, Developers engaged more and more with those articles with positive reactions. This is another step of that happy journey.
Flutter is depending on widgets. Mainly, the Flutter is introducing as a front-end development Framework while the main building block is Widgets. So you need to collect a vast knowledge about Widgets is more important. In this story, I am going to talk about Stack Widget in Flutter with examples.
The stack is the widget that contains many other widgets. In here, widgets are overlapping each other and display when it wants. All widgets positioned from bottom to top as usually in the stack data structure. Similarly we can use the CustomMultiChildLayout and CustomSingleChildLayout widgets to achieve the same result. We can create a Stack and use their properties as follows.
There have two types of elements inside a stack widget, positioned and non-positioned. Positioned elements aligned as it is and non-positioned elements usually positioned at the left top of the stack. First, we check how the basic behaviour of a stack widget.
Example 1
Here you can see three non-positioned containers inside the Stack. And showing the image result as follows.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter - Stack Widget'),
),
body: Container(
child: Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)),
),
);
}
}Result of this basic stack widget and three non-positioned elements as below.
Stack Widget: Properties
Then we check how to use the properties of the Stack class practically. The constructor of the Stack widget showing as follows.
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
this.clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
}There have 5 properties to consider.
- alignment
- textDirection
- fit
- overflow
- clipBehavior
alignment
This property used to define the position of those contained elements. the default value is topStart. Other values are showing here:
topLeft - The top left corner.
topCenter - The center point along the top edge.
topRight - The top right corner.
centerLeft - The center point along the left edge.
center - The center point, both horizontally and vertically.
centerRight - The center point along the right edge.
bottomLeft - The bottom left corner.textDirection
Text direction is mentioned as ltr(left to right) or rtl(right to left).
fit
It will be used to determine how the non-position elements resize to fit the stack. There have three types of this property: loose, expand and passthrough.
- loose: Set the child widget size small and as it’s the original size
- expand: Expand the size of children's as much as possible
- passthrough: Child widget set in a relative position as per the parent’s position
overflow
It controls the children widgets, whether visible or clipped when it’s content overflowing outside the stack.
clipBehaviour
This property determines whether the content will be clipped or not.
Positioned
This is another element rather than a property, that we can use inside a Stack. We can determine the position of the element inside the Stack. Sample Positioned widget is showing follow.
Positioned(
top: 50,
left: 50,
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),Example 2
This example has used the properties of stack and Positioned widget inside the widget. The image will explain the example code below.
child: Stack(
alignment: Alignment.topCenter,
fit: StackFit.passthrough,
clipBehavior: Clip.antiAliasWithSaveLayer,
overflow: Overflow.visible,
children: <Widget>[
new Text(
'Here is a Text Field at the bottom',
style: new TextStyle(
fontSize: 20.0,
fontFamily: 'Roboto',
color: Colors.black,
)
),
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
),
Positioned(
top: 50,
left: 50,
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),
),
],
)
Indexed Stack
This is another class of Flutter which have similarities to the stack class. You should know how Indexed Stack change from Stack class.
The Indexed Stack displaying only one element at a time according to the index. Index of that element should display, need to determine by us.
Conclusion
This story gives you the knowledge about the stack class in Flutter. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)
