如何在 Flutter 中创建带条纹的背景

Question

我正在尝试构建一个由交替的红色和橙色条纹组成的背景，如下所示：

我不想使用静态图像来确保不同设备的一致性。

我尝试使用渐变，但无法使其正常工作。

Container(
    decoration: BoxDecoration(
      // Box decoration takes a gradient
      gradient: LinearGradient(
        // Where the linear gradient begins and ends
        begin: Alignment.topRight,
        end: Alignment(0.3, 0),
        tileMode: TileMode.repeated, // repeats the gradient over the canvas
        colors: [
          // Colors are easy thanks to Flutter's Colors class.
          Colors.red,
          Colors.orange,
        ],
      ),
    ),
  ),

除了 Dart / Flutter 中的梯度之外，还有更好的方法来解决这个问题吗？

Answer 1

我刚刚修改了问题中的梯度值，最后得到了这个。您可以调整该end值以更改条带的角度和宽度。

BoxDecoration(
    gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment(-0.4, -0.8),
        stops: [0.0, 0.5, 0.5, 1],
        colors: [
            Colors.red,
            Colors.red,
            Colors.orange,
            Colors.orange,
        ],
        tileMode: TileMode.repeated,
    ),
)