New in SwiftUI 3: foregroundStyle

DevTechie Inc
Apr 6, 2022

Introduced in iOS 15 and SwiftUI 3, foregroundStyle is a new modifier which can be used to apply color or pattern as foreground to view. This modifier can be applied to style content of text, shapes, symbols, images etc.

Let’s start by setting foreground style with orange color:

struct ForegroundStyleExample: View {
    var body: some View {
        VStack {
            Text("DevTechie")
            Image(systemName: "globe")
            Capsule()
                .frame(height: 50)
                .overlay {
                    Text("SwiftUI 3")
                        .foregroundColor(.pink)
                }
        }
        .font(.system(size: 42))
        .foregroundStyle(Color.orange)
    }
}
Another use case of this can be to apply gradient on Text view.

Note: Prior iOS 15, adding gradient effect on Text would require custom implementation. If you would like to learn about that, check out this video on YouTube(while you are there hit the like and subscribe for me 😜): https://www.youtube.com/watch?v=m_EWD6LkVls

So back to applying gradient on Text, here is how it goes:

struct ForegroundStyleExample: View {
    var body: some View {
        VStack {
            Text("DevTechie")
            Image(systemName: "globe")
            Capsule()
                .frame(height: 50)
                .overlay {
                    Text("SwiftUI 3")
                        .foregroundColor(.white)
                }
        }
        .font(.system(size: 42))
        .foregroundStyle(
            LinearGradient(
                colors: [.pink, .orange],
                startPoint: .top,
                endPoint: .bottom)
        )
        .padding()
    }
}
Note: if you are applying style to single Shape, use fill(style:) instead as it’s more efficient to use .fillover .foregroundStyle

We can apply material as foregroundStyle as well:

struct ForegroundStyleExample: View {
    var body: some View {
        ZStack {
            
            LinearGradient(colors: [.teal, .blue], startPoint: .leading, endPoint: .trailing)
            
            Image(systemName: "globe")
                .font(.system(size: 200))
                .foregroundColor(.secondary)
            
            Capsule()
                .frame(maxHeight: 100)
            .overlay{
                VStack {
                    Text("DevTechie")
                }
                .font(.system(size: 42))
                .foregroundColor(.white)
            }
            .foregroundStyle(
                .ultraThinMaterial
            )
            .padding()
            
        }
        .edgesIgnoringSafeArea(.all)
    }
}
Hierarchical styles are also possible with foregroundStyle. For this use case we will combine newly introduced TimeLineView along with foregroundStyle and spice it up with new animation modifier 😍

First we will create a card view:

struct DTCard: View {
    var color: Color
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "globe")
            Text("DevTechie")
                .font(.largeTitle)
                .foregroundStyle(.primary)
            Text("iOS Video Courses")
                .foregroundStyle(.secondary)
            Text("SwiftUI  ̣ Swift")
                .foregroundStyle(.tertiary)
        }
        .padding()
        .background(RoundedRectangle(cornerRadius: 20).foregroundStyle(.quaternary))
        .foregroundStyle(color)
        .animation(.easeInOut, value: color)
    }
    
}
Notice use of foregroundStyle in bold👆

Next we will use this card inside TimeLineView:

struct ForegroundStyleExample: View {
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 1)) { _ in
            let color = Color.init(red: Double.random(in: 0...1), green: Double.random(in: 0...1), blue: Double.random(in: 0...1))
            DTCard(color: color)
        }
    }
}
Note the changing colors for different styles. BTW if you want to modify the animation just change following:

TimelineView(.periodic(from: Date(), by: <<Set time in seconds here>>))

With that, we have reached the end of this article. Thank you once again for reading, if you liked it, don’t forget to subscribe our newsletter.

Like