Async Custom Avatar in SwiftUI using AsyncImage

Uplift iOS Interview

"Uplift iOS Interview" is a comprehensive guide to help aspiring iOS developers soar to new heights in their careers. This book is an indispensable tool for anyone looking to crack the iOS interview and impress their future employers with their technical prowess. With in-depth coverage of Swift, AutoLayout, SwiftUI, Multithreading, Memory management so on and so forth, this book is a treasure trove of knowledge for anyone looking to uplift their iOS development career.

I want this

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

Rev Up Your iOS Skills: Take a Dynamic Learning Journey

iOS Career Boost is the ultimate learning journey to elevate your iOS development career through a dynamic blend of visual learning, handy cheat sheets, coding practice materials, and expertly curated tips and tricks

Get Ready to Shine: Mastering the iOS Interview

• Uplift iOS Interview - A Comprehensive Guide to iOS Interview
• Xcode Cheat Sheet for Swift
• Xcode Cheat Sheet for SwiftUI

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. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.

Connect with me on

Twitter and LinkedIn and don't hesitate to reach out with any questions about this post. Thank you for reading.