flutter - 如何使用 flutter 绘制自定义形状的小部件

Question

我想在 flutter 中绘制以下形状:

如您所见，它以一种带有直边的椭圆形开始，然后弯曲以使其变窄。然后它进入一个矩形。在它的内部，它的线条开始变细，逐渐变粗。第一行弯曲以匹配形状的半径，然后它们变成矩形。

我如何在 flutter 中绘制它？在这个形状较薄的部分下方。

编辑:对不起，忘了说我想要能够控制红色形状的颜色。黑色形状将是永久性的，并且根据状态不同，红色形状将呈现不同的颜色。

Answer 1

这看起来像是在 SVG 中最容易完成的事情，使用某种工具 - 我个人使用 Inkscape 尽管它在 svg 文件中产生了很多垃圾(我使用 SVGOMG 去除了) .在 Inkscape 中您必须小心以确保它没有创建不必要的分组或使用转换而不是直接设置坐标。但是你应该可以使用 flutter svg plugin在您的应用中呈现它。

但是，如果您想为对象制作任何类型的动画，事情就会变得复杂得多。那么有两个选择——第一个是费力地将你的 SVG 路径转换为 Canvas 绘画操作(有一些工具可以为 Javascript Canvas 对象做这件事，这些对象足够接近你可以粘贴路径的 flutter 对象，然后运行快速搜索/替换以获得你需要的 flutter )。在制作 svg 插件之前，我已经用我的应用程序中使用的一些图标完成了这些操作。但如果你这样做，那么你就可以完全控制你的绘制方式 - 你可以随心所欲地使用渐变、颜色等。

您也可以直接使用 Canvas 绘制它，而无需先求助于 SVG。看看CustomPainter和 CustomPaint .热重载会对您有所帮助，但如果您之前没有使用过 Beziers 等，它会有点学习曲线(双关语意味)。

然而，这将是一个过程，可能不值得，因为那里有更简单的解决方案。看看 newly re-announced Flare - 主要的缺点是，除非你愿意支付，否则你的作品将被公开(但你可以阻止人们 fork )。虽然我还没有广泛使用它，但它确实是为这类事情量身定做的。