How to achieve a design similar to this in Flutter?

Question

I want design something like this.

For this I've used stack and positioned widget as follows:

Stack(
        children: [
          Column(
              children: [
                Container(
                  height: 180,
                  width: 130,
                  padding:EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                      fit:BoxFit.cover,
                      image: AssetImage("assets/images/bookshelf.jpg")
                    )
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(0),
                  child: Text("by Author Name", style: TextStyle(fontSize: 10, color: Colors.grey),),
                ),
                Padding(
                  padding: EdgeInsets.all(0),
                  child: Text("Book Name"),
                )
              ],
          ),
          Positioned(
            bottom: 30,
            left:0,
            height: 60,
            width: 60,
            child: PriceTag()
          ),
          Positioned(
              top: 0,
              left:85,
              height: 60,
              width: 60,
              child: RatingCard()
          )
        ],
      ),

But the problem is, I've placed PriceTag widget in positioned widget with bottom: 30. And when I put this design in Horizontal List View with certain height, bottom is measured from height of that list view. How can I achieve property "bottom" related with this image view, not height of Horizontal List view. Because if I put height more, that circular tag will be out of photo.

Answer 1

You seem to have a problem with your element hierarchy:

- Stack 
  - Column
    - Container(bookshelf.jpg)
    - Padding - Text("by Author Name")
    - Padding - Text("Book Name"),
 - Positioned - PriceTag()
 - Positioned - RatingCard()

Price and Rating are outside of your bookshelf. I don't think that's what you want.

Try something like this:

- Column
  - Container
    - Column
      - RatingCard()
      - PriceTag()
  - Padding - Text("by Author Name")
  - Padding - Text("Book Name")

You also don't need Stack or Positioned anymore. PriceTag and RatingCard can be aligned with Align(alignment: Alignment.topRight, child: RatingCard())