ColorPicker in SwiftUI

In this SwiftUI tutorial, we’ll learn how to use a ColorPicker. SwiftUI provides us with a great ColorPicker UI that is very easy to implement and lets users select any system color very quickly.

Let’s see how we implement and use a ColorPicker for changing and picking colors for our UI

What this tutorial will cover:

• Implementation of ColorPicker.
• Customization of ColorPicker View.

ColorPicker Syntax and implementation

struct ContentView:View{
    @State private var bgColor = Color.red
    var body: some View{
        VStack{
            VStack {
               
                    ColorPicker("Set the background color", selection: $bgColor)
      
     }
  }
}

Here in the above example, we have only used a ColorPicker for selecting the background color. The ColoePicker initializer just takes a binding color variable, which will be updated whenever we select any color from the ColorPicker. In the ColorPicker UI, we can even change the opacity of the color.

Hiding the opacity setting option in ColorPicker

If you don’t want the user to change the opacity of the color, you can even hide the opacity setting option by using a slightly different initializer of ColorPicker.

struct ContentView:View{
    @State private var bgColor = Color.red
    var body: some View{
        VStack{
            VStack {
                
                //  ColorPicker("Set the background color", selection: $bgColor)
                
               // hide opaticity setting option
                ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
                                
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(bgColor)
            
        }
    }
}

Customization of ColorPicker View

Here we will customize one by one.

Hiding the ColorPicker Label

We can hide the label by providing the label with an empty string like this:

struct ContentView:View{
    @State private var bgColor = Color.red
    var body: some View{
        VStack{
            VStack {
                
                //  ColorPicker("Set the background color", selection: $bgColor)
                
               // hide opaticity setting option
             //   ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
                
                // hide the label with empty string
                ColorPicker("", selection: $bgColor, supportsOpacity: false)

            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(bgColor)
            
        }
    }
}

But this will not change the position of ColorPicker View. If you want to position it in the center, we can use the labelsHidden modifier. It will change the position of the PickerView and hide the label as well.

struct ContentView:View{
    @State private var bgColor = Color.red
    var body: some View{
        VStack{
            VStack {
                
                //  ColorPicker("Set the background color", selection: $bgColor)
                
               // hide opaticity setting option
             //   ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
                
                // hide the label with empty string
             //   ColorPicker("", selection: $bgColor, supportsOpacity: false)
                
                // hide the label with  labelsHidden modifier
                   ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
                     .labelsHidden()
                
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(bgColor)
            
        }
    }
}

Customizing the ColorPicker Label

If you want to customize the label of the ColorPicker we can use ColorPicker closure. In the closure, we can add our own customized label with an image and tint.

struct ContentView:View{
    @State private var bgColor = Color.white
    var body: some View{
        VStack{
            VStack {
                
             //     ColorPicker("Set the background color", selection: $bgColor)
               //     .padding()
                
               // hide opaticity setting option
              //  ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
                //    .padding()
                
                // hide the label with empty string
               //    ColorPicker("", selection: $bgColor, supportsOpacity: false).padding()
                
                // hide the label with  labelsHidden modifier
                //   ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
                   //
                //.labelsHidden()
                
                // customize the label
                ColorPicker( selection: $bgColor, supportsOpacity: false){
                    Label("Color Picker", systemImage: "paintpalette.fill")
                        .foregroundColor(Color.indigo)
                }.padding()
                
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(bgColor)
            
        }
    }
}