Color Picker in SwiftUI – Set Dynamic Background Color

by

We can select a color from the color picker using only this line of code:

 ColorPicker("Select a color", selection: $color)

We have to create a State variable:

    @State private var color: Color = .blue

If you run the app, you will able to see the color picker. Where you will be able to select colors from the color grid, color spectrum, or color sliders. Here is the output:

You can change the background dynamically using the color picker. Here is the full code:

import SwiftUI

struct ContentView: View {
    @State private var color: Color = .blue
    var body: some View {
        VStack{
            ColorPicker("Select a color", selection: $color)
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(color)
    }
}

#Preview {
    ContentView()
}

That’s it! Simple right?

Now, if you wish to hide the label, you can use .labelsHidden() the modifier:

            ColorPicker("Select a color", selection: $color)
                .labelsHidden()

Currently, the color picker aligns on the right. We can prevent that using a frame modifier:

         ColorPicker("Select a color", selection: $color)
                    .frame(width: 200)

Now it will align in the center.

Leave a Reply