← writing
·4 min read

SwiftUI Alerts, Pickers, and Gradients

SwiftUI has been the talk of the town since it was launched during Apple’s WWDC 2019. This declarative user interface builder toolkit is here to stay and should give stiff competition to Interface Builders and Storyboards in the long run.

Being a Swift-only framework isn’t the only advantage it’s got. Its declarative syntax, which allows defining all states at once, is a big boon for developers.

Moreover, you don’t have to worry about maintainability across teams (Storyboards, are you reading this?) or the readability when the codebase increases.

With its easy to use drag-and-drop (or just in code) interface and live previews, building the UI is far easier and faster than ever before! Additionally, it supports interoperability with UIKit.

I could go on and on about its advantages, but let’s leave that for another time.

In the next sections, we’ll be implementing different kinds of alert controllers, picker views, and gradients in our SwiftUI iOS application.

For starters, you need Mac Catalina, Xcode 11, and iOS 13 or above as deployment target to integrate SwiftUI in your application.

Getting Started

Launch a new Xcode single-view application. Select SwiftUI as the user interface type from the wizard. Here’s what you see once you’re done with the setup.

Two structures are created by default. A ContentView is for laying out the content and layout of the View. The Preview is for displaying it in a view.

Before we dive right into SwiftUI, let us look at one important property wrapper.

What is State?

Properties inside a struct can be marked with the keyword State. Doing so allows us to modify those properties and subsequently update our views. Any change to the state property triggers an update on the view.

SwiftUI Alerts

Alerts in SwiftUI largely fall under the following three types:

  • Alert dialogs
  • Action sheets
  • Popovers

Alert dialogs

I’m sure you’ve made endless alert controllers in UIKit. SwiftUI alerts have a much easier way to create alerts and define actions in a declarative way as shown below:

showingAlert is a bindable property that shows the alert on the basis of the button tap.

Action sheets

Action sheets are no longer a style in SwiftUI. They have a separate syntax similar to alert controllers. Here are an example and an illustration of it:

Popovers

Popovers are basically tooltips. Not much different from modal sheets on iPhones. It requires an arrowEdge property for displaying the arrow in a particular direction.

Here’s some sample code for it with different previews defined.

Let’s sail onto pickers next!

SwiftUI Pickers

Pickers are UI components used for selecting an option. Pickers in SwiftUI can be styled in different ways, such as:

  • Navigation view style.
  • Wheel picker.
  • Segmented picker.
  • Date picker style.

In the next sections, we’ll be discussing a few of these picker styles.

Navigation view style

Here’s an example of the navigation view-picker style which is embedded in a form.

Segmented picker style

The following code shows an example of a SegmentedPickerStyle.

Switching between Segmented and WheelPicker styles is easier than ever.

Let’s now sail towards our last stop! Gradients.

SwiftUI Gradients

Adding gradients in SwiftUI is very easy. Currently, SwiftUI supports three kinds of gradients:

  • Linear gradient — Color is applied along the axis.
  • Radial gradient — Color is applied based on distance from an edge. It can be from the center, top, bottom, etc.
  • Angular gradient — Also known as conic gradients, color is applied as the angle changes.

Radial gradients

Linear and angular gradients

LinearGradients require setting the start point and endpoint as shown below.

LinearGradient(gradient: colors, startPoint: .leading, endPoint: .bottomTrailing)

AngularGradients require passing the point of origin. It can be center, top, bottom, leading, or any random point. Optionally, we can also pass the angles at which we want the gradient to be drawn.

AngularGradient(gradient: colors, center: .center, angle: .degrees(200))

Conclusion

Our ship’s journey started with alerts. Addressing the different styles, followed by a detour to pickers, and finally ended with gradients in SwiftUI. SwiftUI is here to stay and will be quickly adopted in the next few years.

That’s it for this one. I hope you enjoyed it.