How to render gradient in swiftUI?

In swiftUI we can render colors in different ways, one of them is gradient. In the latest versions of swiftUI it can be done easily. If you are targeting iOS 16 or later you can easily generate gradient simply by adding .gradient() to the color as shown below.

struct ContentView: View {
    var body: some View {
        Rectangle().fill(.blue.gradient)
            .frame(width: 200, height: 300)
    }
}

To support iOS versions prior to 16, we can use one of SwiftUI’s built in gradient types to get better control. For example for a text filed we can achieve white to black gradient by using LinearGradient as shown below.

    var body: some View {
        Text("Example")
            .padding()
            .foregroundStyle(.white)
            .font(.largeTitle)
            .background(
                LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .leading, endPoint: .trailing)
            )
    }

Inside gradient the colors are listed in an array. We can add multiple colors to the array and swiftUI will arrange them in equal size. The above code can be update as shown below.

    var body: some View {
        Text("Gradient with more than two colors. All colors will get equal priority as shown in this image")
            .padding()
            .foregroundStyle(
                LinearGradient(gradient: Gradient(colors: [.black, .white]), startPoint: .leading, endPoint: .trailing)
            )
            .font(.largeTitle)
            .background(
                LinearGradient(gradient: Gradient(colors: [.blue, .white, .black]), startPoint: .leading, endPoint: .trailing)
            )
    }

we can easily change the direction of transition by changing the start and end points. If you give .top and .bottom the gradient will change the direction as shown in below image.

There are other gradient styles like RadialGradient and AngularGradient, which creates a radial gradient through a variety of colors starting from the center of the circle and going out to edges.

    var body: some View {
        Circle()
            .fill(
                RadialGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple]), center: .center, startRadius: 10, endRadius: 100)
            )
            .frame(width: 300, height: 300)
    }

    var body: some View {
        Circle()
            .fill(
                AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple]), center: .center)
            )
            .frame(width: 300, height: 300)
    }

Because all three gradient types conform to the ShapeStyle protocol, you can use them for backgrounds, fills, and strokes. For example, this uses our rainbow conical gradient as a thick inner stroke for a circle as shown below.

        Circle()
            .strokeBorder(
                AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center, startAngle: .zero, endAngle: .degrees(360)),
                lineWidth: 50
            )
            .frame(width: 200, height: 200)
    }