Part 10 Finishing the Color Picker | Create the Color Picker with SwiftUI

This is a series of articles on creating a color picker in SwiftUI. Previously, we have completed the color picker itself. In this article, we will finish up by creating a sample application that actually uses the color picker we created.

TOC

What we make

Display the “Hello World” label and button, and when the button is tapped, display the color picker. Changing the color in the color picker will change the text color of the Hello World label to the color of the color picker.

Implement the model

Create a model class for the sample application.

Implement the ColorPickerAppModel

This sample application simply manages text color. We created the following model class.

import SwiftUI

class ColorPickerAppModel : ObservableObject {
    @Published var textColor: Color = .black
}

Make it an EnvironmentObject

It is appropriate for the ColorPickerAppModel class to manage information about the app and for its instance to be accessible by the entire app. Such an object is an EnvironmentObject in SwiftUI.

import SwiftUI

@main
struct ColorPickerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(ColorPickerAppModel())
        }
    }
}

Implement the main screen

Implement the main screen. The main screen will have one label with “Hello World” and one button for displaying the color picker.

Placement of label

The label text is larger text and ColorPickerAppModel.textColor is set to the text color. ColorPickerAppModel is an EnvironmentObject, so you can access it with @EnvironmentObject. If you define a property with @EnvironmentObject, you can access the instance set by the .environmentObject modifier.

The instance set to EnvironmentObject in ColorPickerApp.swift is used when the app is running.
In Xcode’s Live Preview, the instance passed to environmentObject() running in ContentView_Previews.previews is used.
Note the difference.

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var model: ColorPickerAppModel
    
    var body: some View {
        VStack {
            Text("Hello World")
                .font(.largeTitle)
                .foregroundColor(model.textColor)
                .padding()
            Button("Change Color") {
                
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(ColorPickerAppModel())
    }
}

Show Color Picker

Create a function to change the text color using the color picker previously implemented.

Managing the display state of the color picker

Add code to display the color picker, designed to manage the state of being displayed in SwiftUI. Add a property to ContentView that manages the state of the color picker being displayed.

The concept of “managing the displayed state” is a feature that differs greatly from UIKit.

struct ContentView: View {
    @EnvironmentObject var model: ColorPickerAppModel
    
    @State private var isColorPickerPresented: Bool = false

Display the Color Picker

To display the color picker, change the isColorPickerPresented property, which manages the display state, to true. Use the sheet modifier to display the modal based on it. sheet modifier displays the ColorPicker.

Also, a ColorPickerModel is needed for the initializer of the ColorPicker. I think it would be wrong to add it to ColorPickerAppModel, since it is only needed where the color picker is displayed. So, add the property to ContentView.

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var model: ColorPickerAppModel
    
    @State private var isColorPickerPresented: Bool = false
    @StateObject var colorPickerModel: ColorPickerModel = ColorPickerModel()
    
    var body: some View {
        VStack {
            Text("Hello World")
                .font(.largeTitle)
                .foregroundColor(model.textColor)
                .padding()
            Button("Change Color") {
                self.isColorPickerPresented = true
            }
            .sheet(isPresented: $isColorPickerPresented) {
                ColorPicker(model: colorPickerModel)
            }
        }
    }
}

Update ColorPickerAppModel.textColor

Implement the process of assigning the color set in the color picker to ColorPickerAppModel.textColor. When the color picker is closed, the value in the ColorPickerAppModel property is retrieved and the textColor property is updated. To perform some processing when it is closed, use the onDisappear modifier.

struct ContentView: View {
    @EnvironmentObject var model: ColorPickerAppModel
    
    @State private var isColorPickerPresented: Bool = false
    @StateObject var colorPickerModel: ColorPickerModel = ColorPickerModel()
    
    var body: some View {
        VStack {
            Text("Hello World")
                .font(.largeTitle)
                .foregroundColor(model.textColor)
                .padding()
            Button("Change Color") {
                self.isColorPickerPresented = true
            }
            .sheet(isPresented: $isColorPickerPresented) {
                ColorPicker(model: colorPickerModel)
                    .onDisappear() {
                        self.model.textColor = Color(red: self.colorPickerModel.red, green: self.colorPickerModel.green, blue: self.colorPickerModel.blue)
                    }
            }
        }
    }
}
ContentView preview showing the color picker.
ContentView preview showing the color picker

Download the code

Click here to download the code created for this article.

Serialized Articles

This article is part of a series of articles titled “Create the Color Picker with SwiftUI”. Other articles in the series are here.

Create the Color Picker with SwiftUI

Let's share this post !

Author of this article

Akira Hayashiのアバター Akira Hayashi Representative, Software Engineer

I am an application developer loves programming. This blog is a tech blog, its articles are learning notes. In my work, I mainly focus on desktop and mobile application development, but I also write technical books and teach seminars. The websites of my work and books are here -> RK Kaihatsu.

TOC