Picker and PickerStyles in SwiftUI | Bootcamp #38

In this video we will dive into the Picker() component in SwiftUI. We will learn a couple different ways to initialize a picker and then add a couple real-work example on how we can change the formate of the picker using .pickerStyle() to better fit our app's needs. The formatting styles we will cover include:
- WheelPickerStyle()
- MenuPickerStyle()
- SegmentedPickerStyler()

🤙 WELCOME BACK 🤙

[raymundoortiz]

all programming tutorials should be like this!!, showing only 1 thing, but detailing many ways to use it... BRAVO!!!!

[rayhaanalykhan]

So it turns out that the completion used in the video is deprecated, instead we have to use a similar completion, which has 'content' first then the 'label'.

*The issue is that now the label (content of label) won't show If we just placed the picker on it's own, we have to place it in a list for the label to show.*

List {

Picker(selection: $selection) {

ForEach(filterOptions, id: \.self) { option in
Text(option)
// .font(.headline)
// .foregroundStyle(.red)
.tag(option)
}

}
label: { // This will only work if our picker is in a list.

HStack {

Text("Filter: ")
Text(selection)
}
.font(.headline)
.foregroundStyle(.white)
.padding()
.padding(.horizontal)
.background(.blue)
.clipShape(.rect(cornerRadii: 10, bottomLeading: 10, bottomTrailing: 10, topTrailing: 10)))
.shadow(color: .blue.opacity(0.3), radius: 10, x: 0, y: 10)
}

.pickerStyle(.menu)

/*
Label will only show in these picker styles, when picker is in a list:
- inline
- menu
*/
}

*Alternatively we can use a 'Menu' and use a different picker view completion with it. Note: This is a workaround.*

Menu {
Picker("Filter", selection: $selection) {
ForEach(filterOptions, id: \.self) { option in
HStack {
Text(option)
Image(systemName: "heart.fill")
}
.tag(option)
}
}

} label: {
HStack {
Text("Filter:")
Text(selection)
}
.font(.headline)
.foregroundColor(.white)
.padding()
.padding(.horizontal)
.background(.blue)
.cornerRadius(10)
.shadow(color: Color.blue.opacity(0.3), radius: 10, x: 0, y: 10)
}

[Nortiz]

iOS 16+
Put the picker in the list
ex)
List {
Picker(selection: $selection) {
id: \.self) { option in



} label: {

}
.pickerStyle(.inline) // .automatic .segement whatever
}

[marlhex]

Thanks for styling the picker! on the todoList set pages per segmentedControl

[serhii_rs]

Thanks for the video lesson! You made my day!

[jay]

Thanks for the video, please could you do a tutorial on implementing a Contact Picker

[afdreadbrizgaming]

I am having a problem following along. I get all the way into the program until you Show the alternative, once you get to the @8:15 mark it gets tricky for me because Im not sure if its a different version of xcode. Im just getting into it now. I don't get the same result that you do. for some reason I still get the "1" instead of picker to come up on my view and I cannot write code for the button because it does not show up but I don't get any compilation errors when I follow along and that bothers me because I really want to understand it and I cant grasp it past that point

[mhfs]

Thank you for the video. You might want to consider a video about the picker view’s behaviour in other container views, like List, Form, ScrollView. Quite challenging.

[husseinawada]

hello nick, the Label is not showing in the picker for xcode 14, I've surffed the web about this problem and no one have an answer, so if you know how to solve it please upload a new video about it .
thanks

[DavidShaw-dcre]

This example no longer works in xcode 15.0.1

[mattbinkowski]

Any thoughts on how to populate the picker when you've previously saved the selection in CoreData?

[rohitkulkarni]

Love this tutorial, seems as though the ability to customize the picker itself has some issues with iOS 15 (basically no matter what code you have itll just show the raw text), and this works perfectly fine if i load it onto an iOS 14.5 sim, has anyone found a way to make it work? I've seen a workaround to use Menu instead of picker but given the amount of people facing the issue i find it odd its been like this and also so close to iOS 16 release

[serhii_rs]

Picker for iOS is changed in iOS 16. Could you make update for this?

[andresraigoza]

I love your way of teaching, thank you so much!!! I wanted to ask you. I am using Xcode 13 and now the label in the MenuPickerStyle does not show up on the screen. Do you know why?

[deanspann]

Would it be possible for you to create a tutorial on creating dropdown pickers and storing that data in a firebase collection?
Essentially creating a collection for user profile information, and then create a variable for gender that is displayed as a dropdown picker in the UI interface.

[TeemoChan]

This is how I did it to costumes the picker for the new update, I embedded the picker inside a menu {} label{} :

@State var selectedNumber: Int = 0

var body: some View {

Menu {
Picker(selection: $selectedNumber, label: EmptyView()) {
ForEach(0..<18){index in
Text("\(index)")
}
}
} label: {
cosutomlabel
}

}

var cosutomlabel: some View {
HStack{
Text("Choise: ")
Text("\(selectedNumber)")
}
.foregroundColor(.white)
.font(.title)
.fontWeight(.bold)
.padding()
.background(.blue)
.cornerRadius(10)
.shadow(color: .blue.opacity(0.3), radius: 10, x: 0, y: 10)
}


}

[vedantk]

Hey Nick, Is there any way to change the segmentColor without using UIKIT ?

[marvinmeinhard]

Thank you for these Tutorials! Is there any native functionality to have a picker that allows multiple selections? e.g. whe i want a user to be able to select up to 3 options at a time? it seems that you have to build a workaround using a list...

[vladimirmoor]

Thanks for the video. A little comment: is iOS13 you can use only a wheel picker.

[ostanjaffcompany]

Previously I tried this, but it doesn't work in a subview where a @Binding is used, It can only be used where the selected is kept in an @State variable, so it is not very useful as if it is used in the main view, this will be applied in all the pickers.
init() {
= UIColor.red

: UIColor.white], for: .selected)
}

Thanks anyway, I hope you can keep it up.