How to stack round rectangles so that they are embedded within each other, in flutter

Question

I have corner rounded rectangles, which I want to stack as follows. Each tile musk be linked to the next one whit the color of the one below.

I can't find exactly what I want, that is to say how to get this shape. My code is the following, rendering basic rounded corner rectangles :

return Container(
  decoration: BoxDecoration(
    color: backgroundColor,
    borderRadius: BorderRadius.circular(16),  
  ),
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Row(
      children: [
        const SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                expense.description,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              Text(
                DateFormat('dd/MM/yyyy').format(expense.date),
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                ),
              ),
            ],
          ),
        ),
        Text(
          '${expense.amount.toStringAsFixed(2)} €',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: amountColor,
          ),
        ),
      ],
    ),
  ),
);

Do you know I could I make this easily ?

Answer 1

What you can do here is make a stack put a card container with a color then place another card with height of (previous card + new card) then when when you add the third card same the height will be (first card height + second + new card).

Do let me know if this works or you need a proper code example.