In this post, we create a circle image with border and shadow using SwiftUI.

First of all, you need to add your image to Assets.xcassets. Here I added an image and named it “bi”:

Create new SwiftUI View: CircleImage.swift

import SwiftUI
 
struct CircleImage: View {
     var body: some View {
         // Change to your image name under Assets.xcassets
         Image("bi")
             .resizable()
             .clipShape(Circle())
             .overlay(Circle().stroke(Color.orange, lineWidth: 10))
             .scaledToFit()
             .padding()
             .shadow(color: .black, radius: 10, x: 0, y: 0)
     }
}

struct CircleImage_Previews: PreviewProvider {
     static var previews: some View {
         CircleImage()
     }
}

Here is the result:

Phuc Tran

Creator of Coflutter.

Founder & CTO at Bumbii Technology

Founder at Bumbii K12

Follow him on Twitter, Github, StackOverflow, LinkedIn, Upwork.