Your First iOS & SwiftUI App: Polishing the App

At this point, we’ve drawn our rings, but the color isn’t right; they are plain black.

Let’s look back to Luke’s design and see what it should be like.

Here in Figma, we can see Luke has defined a nice light blue color for the rings.

We can see that the innermost circle has an opacity of 0.8 - but that’s inside a group that has an opacity of 0.3, so the opacity is actually 0.8 * 0.3.

Then as we click each circle we see they all have the same color, but are more and more transparent - first 0.8 * 0.3, then 0.6 * 0.3, and so on all the way to fully transpraent.

Now, how can we accomplish this effect with SwiftUI?

Think back to the episode earlier on this course on Colors and Gradients. You learned how to apply a Linear Gradient to the button to apply a partially transparent white at the top of the button, to a fully clear color at the bottom of the button.

Well, it turns out that there’s another type of gradient that you can use called Radial Gradient. A radial gradient basically varies the color based on how far it is from a center point.

The way Radial Graident works is you give it a start color, and an end color. You also specify a start radius and end radius.

For any given point, you calculate the distance between it and the center of the radial gradient. If the color is less than the start Radius, the color is the start color. If the color is greater than the end radius, the color is the end color. And for anything in between, the color is smoothly interpolated.

Your challenge for this episode is to fill your rings with a radial gradient. Here’s how I recommend you do this:

1. First, create a new color in your Asset Catalogue for the rings color. If you look at Figma, you’ll see it’s actually the same color for both light and dark mode. It just doens’t look that way, because the color is so transparent, so on dark mode the black background is showing through.
2. Second, right after you apply the stroke modifier to the circle shape, apply a fill modifier. To test that it’s working, fill it with your rings color.
3. Once you have that working, instead of filling it with your rings color, fill it with a radial gradient. You can see the syntax by dragging a radial gradient modifier in from the asset catalogue.
4. The start color should be the Rings color you set up, but the opacity should be 0.8 * 0.3.
5. The end color should be the Rings color again, but this time with the opacity set to 0.
6. The start radius should be 100, and the end radius 300.

This challenge is designed to be a bit of a stretch, but give it a shot anyway, as it will show you any areas where you’re currently confused. Then when you’re ready, keep watching for the solution. Good luck!

Add a new color called RingsColor. Set appeaerances to none, color to #D0E3F9.

Add to RingsView:

.fill(
  Color("RingsColor")
)

Delete Color(“RingsColor”) and drag in a radial gradient.

.fill(
  RadialGradient(
    gradient: Gradient(colors: [Color("RingsColor").opacity(0.3 * 0.8),
      Color("RingsColor").opacity(0)]),
    center: .center,
    startRadius: 100,
    endRadius: 300)
)