fill and stroke a circle at the same time in SwiftUI

In SwiftUI, you can use fill() and stroke() modifiers to customize a circle depending on your needs.

But in SwiftUI, Apple doesn’t provide us any built-in modifiers or anything like this that can fill and stroke at the same time. But don’t worry. There are ways available that can give us the same effect.

I am going to show you two different ways that can be used to use the fill and stroke together on a SwiftUI circle.

Method 1: Using another circle in the background

We can use another circle in the background with the fill color:

        Circle()
            .strokeBorder(.purple, lineWidth: 18)
            .background(
                Circle().fill(.mint)
            )
            .frame(width: 176, height: 176)

Below is what it is going to look like:

As you can see, the parent circle has a strokeBorder with the color purple and inside the background we created another circle with the fill color mint.

Method 2: Using ZStack

We can also use the ZStack to give it an effect that looks like you are using both stroke and fill color together in a circle. Here we will create two different circles. But as these two will be in the same ZStack, so they both will overlap one another.

Below is the given code:

        ZStack {
            Circle()
                .fill(.purple)

            Circle()
                .strokeBorder(.mint, lineWidth: 18)
        }
        .frame(width: 216, height: 216)
          

And it will give the result in user interface like you can see in the screenshot image below:

By Faruque Ahamed Mollick