Episode 7: Mastering Stack Widget in Flutter: A Complete Guide
Season 1: Exploring Common Widgets #flutterforbeginners
Understanding Stack
The Stack widget in Flutter provides the ability to place widgets on top of each other in layers. These child widgets are positioned according to alignment or explicit positioning relative to the stack’s dimensions. The Stack widget itself sizes based on the non-positioned widgets, typically expanded to fit. This functionality enables developers to create complex, layered UI designs.
Using Stack
To get a grasp of how Stack works, consider this simple example where we create a new Flutter project and add a Stack widget to our main.dart
file.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Mastering Stack in Flutter'),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.yellow,
),
Container(
height: 150,
width: 150,
color: Colors.green,
),
Container(
height: 100,
width: 100,
color: Colors.blue,
),
],
),
),
),
);
}
}
In this code, we create a Stack with three Container widgets of different sizes and colors. They are stacked on top of each other, with the largest (yellow) container at the bottom, the mid-sized (green) container in the middle, and the smallest (blue) container on top.
Stack Alignment
The Stack widget provides the 'alignment' property to control the position of its children. By default, the alignment is top-start, which means children are positioned in the top-left corner of the Stack. The alignment can be changed to place the children differently, as shown below:
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.yellow,
),
Container(
height: 150,
width: 150,
color: Colors.green,
),
Container(
height: 100,
width: 100,
color: Colors.blue,
),
],
)
In this case, the containers are aligned in the center of the Stack. The alignment property supports different values like Alignment.bottomRight, Alignment.topCenter, and others, allowing for versatile positioning of child widgets.
Positioned Widget
For even more control over the position of a child widget within the Stack, you can use the Positioned widget. Positioned widgets are drawn relative to the edges of the Stack and are optional.
Consider the following code:
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.yellow,
),
Container(
height: 150,
width: 150,
color: Colors.green,
),
Positioned(
top: 50,
left: 50,
child: Container(
height: 50,
width: 50,
color: Colors.red,
),
),
],
)
We added a Positioned widget that contains a red container and specified a 'top' and 'left' value, which positions the red container 50 pixels from the top and left edges of the Stack. Remember, if both horizontal (i.e., 'left' and 'right') or both vertical (i.e., 'top' and 'bottom') values are provided, the Positioned widget's width or height adjusts to fit within the bounds of the Stack.
Overlapping Elements
Stack is also useful for overlapping elements. This can be achieved by combining the Positioned widget and alignment properties.
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.yellow,
),
Positioned(
bottom: 10,
child: Container(
height: 50,
width: 50,
color: Colors.green,
),
),
Container(
height: 100,
width: 100,
color: Colors.blue,
),
],
)
In this example, we've positioned a green container at the bottom of the Stack and centered a blue container. As you can see, Stack allows for highly flexible and complex widget layouts.
Conclusion
And there you have it! With this comprehensive guide, you should now have a solid understanding of the Stack widget in Flutter, including how to layer and position child widgets. The Stack widget is a powerful tool for building complex UIs, and we highly encourage you to experiment with it in your projects.
Thank you for reading our guide on mastering the Stack widget in Flutter. If you found this helpful, please consider sharing it with your fellow developers. If you have any questions, feel free to leave a comment below, and we'll do our best to assist you. Happy Fluttering!