如何使用飞镖颤动制作曲线边框？答案

【问题标题】：How to make curve border using dart flutter?如何使用飞镖颤动制作曲线边框？
【发布时间】：2021-12-14 16:07:51
【问题描述】：

我尝试过边框，但没有得到实际结果。实际上，我需要这种类型的边框/形状，例如 bottomRight。[在此处输入图像描述][1]

查看图片：https://i.stack.imgur.com/LVtTQ.png

【问题讨论】：

标签： flutter dart containers border decoration

【解决方案1】：

您可以通过使用Container 和BorderRadius.only 来实现它，如下所示：

return Container(
  width: 100.0,
  height: 150,
  padding: const EdgeInsets.all(20.0),
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.zero,
      topRight: Radius.zero,
      bottomLeft: Radius.zero,
      bottomRight: Radius.circular(20.0),
    ),
  ),
);

或者如果你有那个三角形的 png 图片，你可以像这样把它堆叠到右下角：

return Stack(
  alignment: Alignment.bottomRight,
  children: [
    Container(
      width: 100.0,
      height: 150,
      padding: const EdgeInsets.all(20.0),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.zero,
          topRight: Radius.zero,
          bottomLeft: Radius.zero,
          bottomRight: Radius.circular(20.0),
        ),
      ),
    ),
    Image.asset("images/paper_flip.png", width: 30, height: 30,),
  ],
);

【讨论】：

【解决方案2】：

尝试使用 box-shadow 将容器放入堆栈中，并使用定位的小部件将其带到右下角。

例如：

use stack and this stack have 3 widgets 
  one is the rectangle with border and 
  the other one is the smaller white rectangle on the first widget to cover the black border and 
  the last one is the triangle with box-shadow 
remember to use box-shadow with both widgets and 
positioned widget will put both of them to the right bottom corner

您可以使用的另一种解决方案是自定义图像，但您会遇到响应速度问题。

我希望它有所帮助。 ?

【讨论】：

【解决方案3】：

参考此代码：

 Container(
        height: 90,
        width: 90,
        padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        margin: EdgeInsets.only(left: 3.0, right: 3.0, bottom: 5.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0.0),
              topRight: Radius.circular(0.0),
              bottomLeft: Radius.circular(0.0),
              bottomRight: Radius.circular(18.0)),
        ),
        child: Text(
          "Hai hello" ?? "", 
        ),
      ),

【讨论】：