Flutter Stack widget allows you to position elements relatively and let them overlay each other. As a matter of fact, Stack is an effective widget that you should use if you’re looking to implement creative and complex views in you app.
If you’re trying to learn how to use Flutter Stack widget, this post is meant for you.
In this example, we’ll together create a creative layout to display a product details in a modern way.
How Final Design Looks Like
A layout designed to display product details including title, description, price, and picture achieved using Flutter Stack widget as the main widget.
Understanding the Flutter Stack Example Structure
First thing to remember, always analyze the design to identify its widgets and how they’re structured. This is an essential step that will help you start implementing the design you’re trying to build.
In this picture, you can see that I’ve identified 4 elements which the Stack layout contains.
- A Container that holds all product details.
- A Positioned child that holds a smaller container which contains a Text widget which contains the product’s price.
- Another Positioned child that holds a Column which consists of two Text widgets to display the product’s title and description.
- A Container that contains an Asset Image to display the product’s image.
1. Build the main Container
To begin with, we build first child of the Stack,the container, that will hold all the product components and set its properties including size, border, margin, padding, and background color.
Container (
margin: EdgeInsets.only(left: 10, right: 10, top: 70),
padding: EdgeInsets.only(left: 10, right: 10),
width: MediaQuery.of(context).size.width - 20,
height: 200,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(25)),
),
Output
For one thing, I’ve set the background color of the app parent widget, which is a Scaffold, to the value of (0xffccc6c6). You can set it to any color of your choice to get an obvious result.
2. Build the product’s price section
Next, we build the second child of the Stack, a Positioned child, that holds the Container which is positioned at the bottom left of the main container and consist of the product’s price.
Positioned(
top: 230,
left: 10,
width: 100,
height: 40,
child: Container(
decoration: BoxDecoration(
color: Color(0xff961d27),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
),
child: Center(
child: Text(
'\$500',
style: TextStyle(
fontSize: 20,
color: Colors.white
),
),
),
)
),
Output
3. Build the product’s details Column within the Stack
Next, we build the third child of the Stack, another Positioned child, which contains the product’s title and description. The Positioned widget consists of a Column which in turn contains two Text widgets.
Positioned(
top: 105,
left: 40,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Red Iphone 11',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w800
),
),
Text(
'daniasblog.com',
style: TextStyle(
color: Colors.black54,
fontSize: 15,
),
),
],
),
),
Output
4. Build the product’s image section
Finally, we build the last child of the Stack, another Positioned widget, that consists of a Container which holds an Image widget to show the product’s image.
Positioned(
//top:5 ,
left: 60,
//right: 10,
child: Container(
width: 450,
padding: EdgeInsets.all(0),
//color: Colors.amber,
child: Image.asset('assets/iphone.png', fit: BoxFit.fill,),
),
),
Conclusion
Flutter Stack Widget is a pretty useful widget in any developer’s toolkit. I really hope this simple tutorial helped you understand how to use Flutter Stack widget in a better way. Get the complete example source code from GitHub.
