How to create a picker in SwiftUI and Styling the picker

This tutorial will give you a brief on how to create a picker in SwiftUI. We will cover creating a basic picker using Array and Enums and also go through styling your picker in SwiftUI.

This tutorial uses Xcode 12 beta 2

Creating Basic Picker in SwiftUI

You can use a simple Array, iterate it over using ForEach and you can have your Picker ready in no time.

So let’s create PickerView, which will contain the picker:

import SwiftUI

struct PickerView: View {
    var generes = ["Action","Adventure","Comedy","Drama","Horror","SciFi"]
    @State private var selectedGenere = 0
    var body: some View {
        VStack {
            Picker(selection: $selectedGenere, label: Text("Select Movie Genere")) {
                ForEach(0..<generes.count) {
                    Text(self.generes[$0])
                }
            }
            Text("You Selected \(self.generes[selectedGenere])")
        }
    }
}

Here you can see we have used selectedGenere to store the selection of the picker. You can get the selected value of the picker using this selection index, as we did in the last Text.

The best thing about SwiftUI is that you can see all the changes that you do while coding live on your preview screen.

Using Enum with Picker

You can also use enum cases to fill your picker data.

enum Genere:String, CaseIterable, Identifiable {
    case action
    case adventure
    case comedy
    case drama
    case horror
    case scifi
    
    var id: String {self.rawValue}
}
struct PickerView: View {
    @State private var selectedGenere = Genere.action.rawValue
    var body: some View {
        VStack {
            Picker(selection: $selectedGenere, label: Text("Select Movie Genere")) {
                ForEach(Genere.allCases) {
                    Text($0.rawValue.capitalized)
                }
            }
            Text("You Selected \(selectedGenere.capitalized)")
        }
        
    }
}

Both of the above code snippets will the below result.

So that was the basic Picker, nothing fancy!

You may want to change the style of the picker depending on your (Project manager’s) requirement! Let’s see how you can style your picker!

Styling your Picker

You can customise your picker using PickerStyle. Following types of PickerStyles are available:

From the above options you can use DefaultPickerStyle, SegmentedPickerStyle and WheelPickerStyle on iOS. The other two works on macOS.

PickerStyle in Action

To setup any specific style to all the picker instances within a view, we use pickerStyle(_:) modifier

struct PickerView: View {
    var season = ["Summer","Winter","Spring","Autumn"]
    @State private var selectedSeason = 0
    var body: some View {
        VStack {
            Picker(selection: $selectedSeason, label: Text("Select Movie Genere")) {
                ForEach(0..<season.count) {
                    Text(self.season[$0])
                }
            }
            Text("You Selected \(self.season[selectedSeason])")
        }.pickerStyle(SegmentedPickerStyle())
    }
}

We used SegmentedPickerStyle, preview of the above code will be :