Creating Custom modifier in SwiftUI

Creating Custom modifier in SwiftUI

To get rid of applying same set of modifier repeatedly. SwiftUI has ViewModifier using it we can create our own custom modifier.

Benefits of Custom Modifier:

• Managing all UI attributes from a single place.
• Following DRY principle
• Building different styles for UI Components like Error Label or info Label and PrimaryButton or Secondary button etc.

Let us create a Button with image and different type of labels

If we want to make your own, define a struct that conforms to the ViewModifier protocol.

requirement of this protocol ,that we accept a body(content:) method that transforms some sort of content however we want, returning the result.

struct InfoLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(8)
            .background(Color.gray)
            .foregroundColor(Color.white)
            .font(.body)
            .cornerRadius(8.0)
    }
}

Here , we have created a InfoLabel modifier have custom properties

Output:

Info Label

Similarly we can create for warning and error label.

ThemeButton:

struct ThemeCTAButton: View {
    let title: String
    let action: (()-> Void)?
    var body: some View {
        HStack {
            Image(systemName: "square.and.arrow.up.circle")
            Button(title) {
                if let handler = action {
                    handler()
                }
            }
        }
        .modifier(ThemeButton())
    }
}
struct ThemeButton: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(8)
            .background(Color.green)
            .foregroundColor(Color.white)
            .font(.body)
            .cornerRadius(8.0)
    }
}

Output:

Complete Code Example :

//
//  ContentView.swift
//  CustomModifier
//
//  Created by Pawan Kumar on 16/09/22.
//
import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Warning Label")
                .modifier(WarningLabel())
            Text("Error Label!")
                .modifier(ErrorLabel())
            Text("Info Label")
                .modifier(InfoLabel())
           ThemeCTAButton(title: "Share") {
              print("Share button Tapped")
           }
        }
}
}
struct ThemeCTAButton: View {
    let title: String
    let action: (()-> Void)?
    var body: some View {
        HStack {
            Image(systemName: "square.and.arrow.up.circle")
            Button(title) {
                if let handler = action {
                    handler()
                }
            }
        }
        .modifier(ThemeButton())
    }
}
struct ThemeButton: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(8)
            .background(Color.green)
            .foregroundColor(Color.white)
            .font(.body)
            .cornerRadius(8.0)
    }
}
struct InfoLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(8)
            .background(Color.gray)
            .foregroundColor(Color.white)
            .font(.body)
            .cornerRadius(8.0)
    }
}
struct ErrorLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.red)
            .foregroundColor(Color.white)
            .font(.body)
    }
}
struct WarningLabel: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.yellow)
            .foregroundColor(Color.white)
            .font(.largeTitle)
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Complete Code Output:

Conclusion:

This is just creating with SwiftUI Modifier.More to come.#KeepCoding 💻 #KeepSharing

Thank you for reading, please hit the recommend icon if like this collection 😊 . Questions? Leave them in the comment.