SwiftUI – How to create a Picker

Share on facebook
Share on twitter
Share on pinterest

Creating a Picker in SwiftUI is very simple – give it a try 🚀

A picker in SwiftUI is a piece of UI that includes one or multiple lists displayed as a wheel. The user can use this wheel(s) for selecting a specific value. Pickers are often found within iOS apps. Take a look at the date selection in the system’s Calendar app or the time selection in the Clock app 🕓⠀

Here is how to create a Picker in SwiftUI 👇

Step 1: Create a State property for keeping track of the current selection.⠀ ⠀

Step 2: Create the data set for your Picker, in our example it‘s an array holding color names as Strings.⠀ ⠀

Step 3: Create a Picker with binding it to the State and providing it with a suitable Label. If you want no label, just insert a Text with an empty String⠀ ⠀

Step 4: Inside the Picker, implement a ForEach loop that cycles through every object of your data set. You can then use the loop‘s closure for creating one Text object for every object of the data set and assigning with an index.⠀ ⠀ SwiftUI then knows which index every object should have and updates the State depending on the current selection! You can then use the State‘s value, for example as we do with a Text displaying the selected color.

struct ContentView: View {
    //1. Create a State for keeping track of the current selection
    @State var selection = 0
    //2. Create an array for holding the picker's content
    let colors = ["Green", "Blue", "Orange", "Yellow"]

    var body: some View {
        VStack {
            //3. Create the Picker by binding it to the State and providing it with a label
            Picker(selection: $selection, label: Text("MyPicker")) {
                //4. Create on row for every String in your array and assign it to a index
                ForEach(0 ..< colors.count) { index in
                     Text(self.colors[index]).tag(index)
                }
            }
            Text("Selected color: \(colors[selection])")
                .padding(.bottom, 70)
        }
    }
}


If you want to learn more about SwiftUI, make sure you check out our free SwiftUI Basics eBook and our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!

3 replies on “SwiftUI – How to create a Picker”

I just completed your Timer tutorial in the book and it went well, except for one detail: When you select a time, it does not show up in the countdown value until after you tap the button. The time should change as the picker view values change.

Thanks.

I have used a date picker in past versions of swift to take “duration” input from the user. I did this by setting the mode fo the date picker in count-down mode. Is there a way to implement this in SwiftUI?

Leave a Reply

Your email address will not be published. Required fields are marked *

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount