Draw a Circle in SwiftUI

In this tutorial, I will show you how to draw a Circle in SwiftUI with some examples.

SwiftUI provides five commonly used built-in shapes to Apple developers. Circle is one of them which is widely used. In the example below we are creating a circle:

    var body: some View {
        
        Circle()
        
    }

The above code will create a circle in the view:

As you can see in the above screenshot, with just a single code Circle(), we are able to draw a circle in our view. This is the minimal requirement for a circle to be created.

By default, this circle is fit to our SwiftUI view. The default radius of the circle is half of the smallest edge of the frame.

The color of the circle is completely filled up with black. If you don’t mention any color, it will always be black.

Well, it is possible for us to customize our circle with the help of modifiers. We can do a lot of interesting things to play with the circle. For example, below we are providing the width and height of the circle:

        Circle()
            .frame(width: 100, height: 50)

You may want to set the circle color other than black. It can be done by passing the specific color to the fill() modifier. Below is the code for this:

        Circle()
            .fill(.green)

Now see another example where you can apply the fill color and frame size to a circle together:

        Circle()
            .fill(.green)
            .frame(width: 100, height: 50)

Below you can see, both the size of our circle and its fill color have been changed:

Now see another example where we set a stroke for the circle instead of filling the whole circle with color:

        Circle()
            .inset(by: 8)
            .stroke(Color.mint, lineWidth: 16)

Look at the image below:

From the above image, you can see this time the circle is not completely filled with the provided color. It is rather setting a border color which is known as stroke.

You can set the frame height width for the above circle:

        Circle()
            .inset(by: 8)
            .stroke(Color.mint, lineWidth: 16)
            .frame(width: 80, height: 80)

By Faruque Ahamed Mollick