Flutter - 如何在左上角创建带有标签的卡片？

Question

我想创建这样的东西：

但我不知道如何创建与卡片匹配的圆形标签（绿色）。

Answer 1

SizedBox(
  width: 200,
  height: 200,
  child: Card(
    elevation: 12,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    child: Stack(
      children: <Widget>[
        Align(
          child: Image.asset(
            "your_image",
            width: 150,
            height: 100,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          top: 0,
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 4, horizontal: 6),
            decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(8),
                  bottomRight: Radius.circular(8),
                ) // green shaped
            ),
            child: Text("CHOCOLATE"),
          ),
        )
      ],
    ),
  ),
)