How to Make a Color Picker with ScrollView, Scroll Position and Visual Effects - SwiftUI iOS 17

In this SwiftUI tutorial, I’ll show you how to create a custom color picker with scroll position and visual effects using SwiftUI in iOS 17. With the new features introduced in iOS 17, you can now easily track the scroll position and create a fancy color picker.

First, we’ll explore the default color picker in iOS and learn how to customize its appearance. Then, we’ll dive into creating our own custom color picker using SwiftUI. I’ll show you how to generate a range of colors using the hue, saturation, and brightness values. We’ll use a LazyVStack and a LazyVGrid to display the colors in a scrollable view.

I’ll also demonstrate how to track the scroll position and highlight the selected color. We’ll add visual effects like opacity and scale to create a more dynamic and interactive color picker.

Don’t forget to check out my new course on SwiftUI layout and grab the book with all the code and explanations.

0:00 Introduction
1:19 SwiftUI ColorPicker
2:16 Wheel Color Picker with scrollPosition
20:02 Grid Color Picker with 2-dimensional ScrollView
36:58 Summary

#SwiftUI #scrollview

[aleksandrsukhinin]

Thanks from Russia. Your voice is really pleasant to listen to and your English is understandable for me. Thanks for your lesson.

[benceylan]

I am very happy that you switched to dark theme on Xcode. I resubscribed :)

[moiCode]

Thank you very much, very good explained. I don't understand much english but even me understood a great part of you're video. Thanks so much

[Ehsan_]

Great video Karin. Imo, a bit of corner radius around the selected color in front of the "You selected" label, would make it look even better.

[awakeFromNib]

That was very complex and interesting, thanks!

[kabaliercan]

Thank you so much from Turkey <3 <3

[lme]

Awesome tutorial. Thank you, Karin. I’m still a beginner, but if I want to share the selected color with other views how do I safe it correctly? As a binding?