Gradient in SwiftUI

SwiftUI comes with a built-in feature that can help iOS developers to provide gradient colors to the view in the easiest way. There are 3 types of gradients that SwiftUI provides are listed below:

• LinearGradient
• RadialGradient
• AngularGradient

In each type of gradient, we have to provide an array of colors as you can see in the given example:

Gradient(colors: [.green, .pink])

In the above example, we have provided two colors that are green and pink. This is the equivalent of the code given below:

Gradient(stops: [.init(color: .green, location: 0),
                                          .init(color: .pink, location: 1)])

The above code also has the stops location property to set the location of the color.

You can provide as many colors as you want:

Gradient(colors: [.green, .pink, .blue, .red])

Now we will learn about each of the gradients we listed at the beginning of this tutorial.

LinearGradient

In LinearGradient you have to provide the start point and end point. This is the most common type of gradient.

In LinearGradient, the gradient applies the color function along an axis defined by the start and end positions.

We have to provide the start point and the end point of the gradient with UnitPoint. In SwiftUI, there are some predefined unit points available like .bottom, .top, .center etc.

Below is the given code for LinearGradient:

LinearGradient(gradient: Gradient(colors: [.green, .blue, .red]), startPoint: .topLeading, endPoint: .bottomTrailing)

The above code will generate a gradient of provided colors that will look something like the image given below:

You can also take a variable to store the gradient colors:

let gradient = Gradient(colors: [.green, .blue, .red])
            
LinearGradient(gradient: gradient, startPoint: .topLeading, endPoint: .bottomTrailing)

In the above SwiftUI program, we have created a constant gradient and stored the gradient-type data. Then we pass it as the value of the gradient in the LinearGradient view.

RadialGradient

In RadialGradient, you have to specify the start radius, end radius, and center of the gradient. The concept of RadialGradient is very to the LinearGradient.

The generated gradient will be as circular around the center and move outward to the end radius we specify.

Below is given a code example of a RadialGradient:

let gradient = Gradient(colors: [.green, .blue, .red])
                        
RadialGradient(gradient: gradient, center: .center, startRadius: 1, endRadius: 112)

And below is given the generated gradient for the above code:

Let’s look at another example with a provided value of endPoint:

let gradient = Gradient(colors: [.green, .blue, .red])
            
RadialGradient(gradient: gradient, center: .center, startRadius: 1, endRadius: 540)

AngularGradient

In AngularGradient, the colors are applied as the changes in angle. Below is given the simplest form of AngularGradient with four different colors:

let gradient = Gradient(colors: [.green, .blue, .pink, .mint])
            
AngularGradient(gradient: gradient, center: .center)

Below is what our gradient looks like:

We can specify the start and end angles of the AngularGradient. Below is an example:

let gradient = Gradient(colors: [.green, .blue, .pink])
            
AngularGradient(gradient: gradient, center: .center, startAngle: .degrees(90), endAngle: .degrees(180))

It is also possible to start from the angle 0 degrees and use the second form where you can specify start angle:

let gradient = Gradient(colors: [.green, .blue, .pink])
            
AngularGradient(gradient: gradient, center: .center, angle: .degrees(120))

Below is what the user sees for the above gradient:

By Faruque Ahamed Mollick