How To Make a Product Page Design in Flutter | Flutter Stack

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.

Flutter stack example
An example of Flutter Stack layout

 

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.

Flutter stack example
Structure of the stack example
  1. A Container that holds all product details.
  2. A Positioned child that holds a smaller container which contains a Text widget which contains the product’s price.
  3. Another Positioned child that holds a Column which consists of two Text widgets to display the product’s title and description.
  4. 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.

Output 1 – Container

 

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

Output 2 – Product’s price container

 

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

Output 3 – Product’s details section

 

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.

Oh hi there!
It’s nice to meet you.

Sign up to receive awesome content in your inbox, every month.

Let's Do This!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top