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

编程问答 2022-06-04

问题描述

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

到目前为止，这是我对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))),);

解决方法

您可以借助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),],);
badgebordercolorscolorscontainers