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"),
          ),
        )
      ],
    ),
  ),
)

Answer 2

使用Stack小部件，然后在其中添加卡片。

现在使用下面的代码添加您的green视图

Positioned(
  left: 0.0,
  top: 0.0,
  child: Container(
    color: Colors.green,
    height: 150.0,
    width: 150.0,
  ),
)

现在将以下图案用于green小部件的圆角。

  

来自here和here的引用