How to create a background with stripes in Flutter

Question

I'm trying to build a background consisting of alternating red and orange stripes like this:

I don't want to use a static image to ensure consistency over different devices.

I tried to use gradients but I'm having trouble making it work.

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

Is there a better way to solve this other than gradients in Dart / Flutter?

Answer 1

I've just modified gradient value in the question and ended up with this. You can adjust the end value to change the angle and width of the strips.

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,
    ),
)