Image generated with ChatGPT

Shape, Stroke and Dash in SwiftUI

In this post we’ll learn how to:

• Create a shape with stroke
• Create a dashed stroke
• Create a dashed line

Create a shape with stroke

Begin by creating a yellow ellipse with an orange border:

struct ContentView: View {
    var body: some View {
        VStack {
            Ellipse()
                .stroke(style: StrokeStyle(lineWidth: 4))
                .foregroundStyle(.orange)
                .background(Ellipse().fill(.yellow))
                .frame(width: 200, height: 150)
        }
    }
}

We start by creating an ellipse, then add a border with a lineWidth of four. Next, set the color for the stroke, followed by adding a yellow ellipse as the background. Finally, set the dimensions for the entire shape.

We can have the same result with this code:

VStack {
        Ellipse()
        .strokeBorder(.orange, lineWidth: 4)
        .background(Ellipse().fill(.yellow))
        .frame(width: 200, height: 150)
}

Create a stroke dashed

So, why do we need the StrokeStyle? It’s used to create a dashed stroke:

The code:

Ellipse()
  .stroke(style…