Async Custom Avatar in SwiftUI using AsyncImage

Uplift iOS Interview

The Guide is for YOU if
  • You are preparing for an iOS interview and want to improve your skills and knowledge and looking to level up your interview game and land your dream job.
  • You want to gain confidence and ease during iOS interviews by learning expert tips and curated strategies.
  • You want access to a comprehensive list of iOS interview QA to practice and prepare.

To create a custom avatar in SwiftUI using the AsyncImage library, you can use the AsyncImage view to asynchronously load the image from a URL, and then apply a cornerRadius() modifier to give it a circular shape. You can also use a ZStack to overlay a border or shadow on top of the image.

Here is an example of how you could create a custom avatar view using AsyncImage:

struct AvatarView: View {
    let url: URL
    let size: CGFloat

    var body: some View {
        AsyncImage(url: url){ image in
            image
                .resizable()
                .aspectRatio(contentMode: .fill)
        } placeholder: {
            Image(systemName: "photo.fill")
        }
        .frame(width: size, height: size)
        .cornerRadius(size / 2)
        .overlay(
            Circle()
                .stroke(Color.white, lineWidth: 4)
                .frame(width: size, height: size)
        )
        .shadow(radius: 10)
    }
}

You can then use the AvatarView like this:

struct ContentView: View {
    var body: some View {
        VStack {
            AvatarView(url: URL(string: "https://ishtiz.com/wp-content/uploads/2021/04/cropped-facebookIcon.png")!, size: 100)
        }
        .padding()
    }
}

You can customize the appearance of the avatar by modifying the image URL, size, border, shadow, and other parameters of the view. You can implement a simple avatar using a system image if you don’t need image from the network – How to Create A Custom Avatar in SwiftUI



✍️ Written by Ishtiak Ahmed

👉 Follow me on XLinkedIn



Get Ready to Shine: Mastering the iOS Interview




Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.

If you know someone who would benefit from reading this article, please share it with them.