Gradient Views in SwiftUI
Ever since announce of SwiftUI by Apple, its has been very exciting for iOS developers all around the world to try out brand new language for apple development, not because its new but due to its short lines of code to achieve that used to take couple of lines in normal Swift and UIKit.
In SwiftUI creating gradient views are very simple.
There are 3 types of gradient views in SwiftUI that we can create.
- LinearGradient
- RadialGradient
- AngularGradient
Linear Gradient: This is the type of gradient that goes in one direction. To create linear gradient we provide start and end point.
eg. LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)
Radial Gradient: This is the type of gradient that move outward in a circle shape. To create radial gradient we provide start and end radius with center point.
eg. RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 180)
Angular Gradient: This is the type of gradient that cycles colors around a circle rather than radiating outward, and can create some beautiful effects. This gradient is also called as conic or conical gradient. In order to create angular gradient we specify variety of gradient colors and then center point.
eg. AngularGradient(gradient: Gradient(colors: [.red, .blue, .yellow, .green, .purple, .orange]), center: .center)
You can try out how it looks by creating a new SwiftUI Project.
Paste above code in content view body and check how it looks. Or you can put them in V-Stack to see in one view.
Mine looked like this. You can change the color and experient accordingly as per your requirement and app theme.
1. Linear Gradient
2. Radial Gradient
3. Angular Gradient
All gradient in same view demo :)
See how easy with just 1–2 lines of code we can create gradient views in SwiftUI.
Download link: https://github.com/PrakashMaharjan/swiftui_gradient_views
Thanks
Happy Coding :)
