Today I will show you how to use AngularGradient.

The start and end points of AngularGradient color gradients are clockwise.

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. AngularGradient will be placed in brackets.

• Create an AngularGradient.

• Set the starting color of AngularGradient to yellow, the middle color to green, and the end color to blue.

• The center point of the gradient is at the center of the Text by default.

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

• Modify the position of the gradient center point, putting it in the lower right corner of the Text.

AngularGradient(gradient: Gradient(colors: [.yellow, .green, .blue]),
                center: UnitPoint(x: 1, y: 1))

• Place the gradient center point in the center of the Text, and modify the AngularGradient's angle to -45 degrees. That is 45 degrees counterclockwise.

AngularGradient(colors: [.yellow, .green, .blue],
                center: UnitPoint(x: 0.5, y: 0.5),
                angle: Angle(degrees: -45))

• The default start angle of AngularGradient is 0 degrees, and the end angle is 360 degrees.

• If we set the end angle to 0 degrees, it will display two horizontal color bars.

AngularGradient(colors: [.yellow, .green, .blue],
                center: UnitPoint(x: 0.5, y: 0.5),
                startAngle: Angle(degrees: 0),
                endAngle: Angle(degrees: 0))

• Set the end angle of AngularGradient to 180 degrees and see the difference.

AngularGradient(colors: [.yellow, .green, .blue],
                center: UnitPoint(x: 0.5, y: 0.5),
                startAngle: Angle(degrees: 0),
                endAngle: Angle(degrees: 180))

Follow me on:

(Foks) Hui Wang's LinkedIn