如何在颤动中制作分段色线？答案

【问题标题】：How to make segmented color line in flutter?如何在颤动中制作分段色线？
【发布时间】：2020-07-13 13:34:11
【问题描述】：

我正在开发一个 Flutter 应用程序。我想在我的应用程序中引入以下图像设计。对于第二条分段线，我使用的是容器和行小部件。但是对于第一行，我该如何设计。是否有可能在 Flutter 中实现？我应该使用小部件还是图像（SVG，jpg）？

【问题讨论】：

【解决方案1】：

这可以通过多种方式完成：

您可以将其设为 SVG 并使用 flutter_svg 进行渲染
您可以使用多个 Container 创建一个 Row，如下所示：

Row(
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(color: Colors.yellow),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.red),
    ),
  ]    
)

更改color 和flex 的值，您将获得具有不同大小比例的不同段。如果您希望所有段具有相同的宽度，只需保持相同的 flex 值或使用 Exapanded 而不是 Flex。

您可以使用 CustomPaint 在 Canvas 中绘制它，但我不建议使用它，因为这更难以开发和维护，但它对于更复杂的形状和绘图很有用。

【讨论】：