Your First iOS & SwiftUI App: Polishing the App, Episode 20: Challenge: Draw the Rings | Kodeco, the new raywenderlich.com

🎓 Courses & Articles
1

Try changing the color of the rings from black to a nice gradient.

This is a companion discussion topic for the original entry at https://www.kodeco.com/28797859-your-first-ios-swiftui-app-polishing-the-app/lessons/20
2

Hi there,

I’m trying to figure out how that this episode is working for the color grandient.

 ForEach(1..<6) { ring in
                let size = CGFloat(ring * 100)
                
                Circle()
                    .stroke(lineWidth: 20.0)
                    .fill(
                        RadialGradient(
                            colors: [Color("RingsColor").opacity(0.3 * 0.8), Color("RingsColor").opacity(0)],
                            center: .center,
                            startRadius: 100,
                            endRadius: 300
                        )
                    )
                    .frame(width: size, height: size)
            }

From that code alone I would expect that the gradient is applied per ring, meaning each circle starts of with a rings color and opacity 0.3 * 0.8, ending with an opacity of 0. However, This part alone applies to all rings so that only the outer ring is getting an opacity of 0, even though the fill is applied per ring and not for the whole container.

By playing around I found out that it has to do with the startRadius and endRadius, which would mean that there is only 1 gradient. But I don’t really understand that because the gradient is again applied to each created circle.

I hope that my explanation is good enough to understand. Otherwise please ask, and thank you in advance!