66. SwiftUI: Introducing RadialGradient

Hui Wang

Sep 18, 20221 min read

Today I will show you how to use RadialGradient.

The RadialGradient starts from the origin and spreads outward with an ellipse.
The gradient consists of an ellipse and a color group.
The ellipse is for controlling the position and shape of the gradient.
The color group is for controlling the color changes.

Steps:

First, create a Text to show the effect of the gradient.
Set the font size of the Text to 36.
Set the padding of the Text.
Set Text's foregroundColor to white.
Finally, add a background to the Text. RadialGradient will be placed in brackets.
Create a RadialGradient.
Set the starting color of RadialGradient to yellow, the middle color to green, and the end color to blue.
Set the center point of the gradient to the center of the Text.
Set startRadius to 0
Set endRadius to 50

var body: some View {
    VStack {
        Text("SwiftUI Gradient!")
            .font(.system(size: 36))
            .padding()
            .foregroundColor(.white)
            .background(
                RadialGradient(gradient: Gradient(colors: [.yellow, .green, .blue]),
                               center: .init(x: 0.5, y: 0.5),
                               startRadius: CGFloat(0),
                               endRadius: CGFloat(50))
            )
    }
}