SwiftUI comes with easiest way of coding!
In SwiftUI they have given 3 types of gradients, you can easily show gradients on any of the view.
- Linear Gradient
- Radial Gradient
- Angular Gradient
In gradient option we have to pass array of colors.
Linear Gradient
Linear Gradient have start point and end point options.
|
1 |
LinearGradient(gradient: Gradient(colors: [.blue, .white, .pink]), startPoint: .topLeading, endPoint: .bottomTrailing) |
Radial Gradient
In Radial Gradient we have to specify start radius point, end radius point with center point from where the radial gradient will start.
|
1 |
RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 2, endRadius: 650) |
Angular Gradient
In Angular Gradient we have to pass center point only.
|
1 |
AngularGradient(gradient: Gradient(colors: [.green, .blue, .black, .green, .blue, .black, .green]), center: .center) |
Sample Code
Here is sample code of “SwiftUI with Gradient” the output of which is shown at the beginning of the post.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ContentView.swift // GradientSwiftUI // Created by Ashish Kakkad on 16/10/19. import SwiftUI struct ContentView: View { var body: some View { ZStack { RadialGradient(gradient: Gradient(colors: [.orange, .red]), center: .center, startRadius: 100, endRadius: 470) Text("SwiftUI").font(.system(size: 83)).fontWeight(.thin).foregroundColor(.white) }.edgesIgnoringSafeArea(.all) } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } |
Conclusion
SwiftUI is comes with lot of things to learn. Keep Learning!
Happy Coding 🙂