我如何使用 Flutter 制作带有这种装饰的容器

Question

Please see image。我不太关心容器的 child 。只是装饰。我正在尝试实现黄色背景和右上角的复选图标。到目前为止，我只能制作容器并为其设置边框颜色。

到目前为止，这是我的 Container:

代码

Container(
  height: 50,
  width: 90,
  decoration: BoxDecoration(
    border: Border.all(color:Colors.yelloAccent[100]),
    borderRadius: BorderRadius.all(Radius.circular(5),
    ),
    color: color,
  ),
  child: Center(child: Text(text, style: TextStyle(fontSize: 12, color: textColor, fontWeight: FontWeight.w900))),
);

Answer 1

您可以借助 Stack 小部件轻松创建它。

可以通过旋转 Container 小部件并调整其位置来创建右上角的三角形。这可以通过 Positioned & Transform 小部件来实现。

最后，复选标记图标可以放在三角形顶部的另一个 Positioned 小部件中。

在这里，这段代码可能会对您有所帮助：

return Stack(
      children: [
        // The actual container with border
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(4),
            border: Border.all(color: Colors.amber, width: 2),
          ),
          padding: const EdgeInsets.symmetric(horizontal:36, vertical: 24),
          child: Text(
            'Payment',
            style: const TextStyle(
              color: Colors.black87,
            ),
          ),
        ),
        
        // The top right triangular shape
        Positioned(
          top: -20,
          right: -80,
          child: Transform.rotate(
            angle: pi / 4,
            child: Container(
            color: Colors.amber,
            height: 50,
            width: 150,
          ),),
        ),
        
        // The Icon
        Positioned(
          top: -4,
          right: -8,
          child: Icon(Icons.done, color: Colors.white),
        ),
      ],
    );

我如何使用 Flutter 制作带有这种装饰的容器

How can i make a container with this kind of decoration using Flutter

containers

border

colors

badge

flutter