如何使用飞镖颤振制作曲线边界

Question

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

请参阅图片：https://i.stack.imgur.com/LVtTQ.png

Answer 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,),
],
);

Answer 2

尝试将一个容器放在带有框阴影的堆栈中，并使用定位的小部件将其放在右下角。

例如：

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

您可以使用的另一种解决方案是自定义图像，但您将在响应性方面遇到困难。

我希望它能有所帮助。😊

Answer 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" ?? "", 
),
),